react19-test-patterns

作成者: github

React 19互換性へのテストファイル移行におけるbefore/afterパターンを提供します。act()インポート、Simulateの削除、StrictModeの呼び出し回数の変更を含みます。

npx skills add https://github.com/github/awesome-copilot --skill react19-test-patterns

React 19 Test Migration Patterns

Reference for all test file migrations required by React 19.

Priority Order

Fix test files in this order; each layer depends on the previous:

  1. act import fix first, it unblocks everything else
  2. SimulatefireEvent fix immediately after act
  3. Full react-dom/test-utils cleanup remove remaining imports
  4. StrictMode call counts measure actual, don't guess
  5. Async act wrapping for remaining "not wrapped in act" warnings
  6. Custom render helper verify once per codebase, not per test

1. act() Import Fix

// Before  REMOVED in React 19:
import { act } from 'react-dom/test-utils';

// After:
import { act } from 'react';

If mixed with other test-utils imports:

// Before:
import { act, Simulate, renderIntoDocument } from 'react-dom/test-utils';

// After  split the imports:
import { act } from 'react';
import { fireEvent, render } from '@testing-library/react'; // replaces Simulate + renderIntoDocument

2. Simulate → fireEvent

// Before  Simulate REMOVED in React 19:
import { Simulate } from 'react-dom/test-utils';
Simulate.click(element);
Simulate.change(input, { target: { value: 'hello' } });
Simulate.submit(form);
Simulate.keyDown(element, { key: 'Enter', keyCode: 13 });

// After:
import { fireEvent } from '@testing-library/react';
fireEvent.click(element);
fireEvent.change(input, { target: { value: 'hello' } });
fireEvent.submit(form);
fireEvent.keyDown(element, { key: 'Enter', keyCode: 13 });

3. react-dom/test-utils Full API Map

Old (react-dom/test-utils)New location
actimport { act } from 'react'
SimulatefireEvent from @testing-library/react
renderIntoDocumentrender from @testing-library/react
findRenderedDOMComponentWithTaggetByRole, getByTestId from RTL
findRenderedDOMComponentWithClassgetByRole or container.querySelector
scryRenderedDOMComponentsWithTaggetAllByRole from RTL
isElement, isCompositeComponentRemove not needed with RTL
isDOMComponentRemove

4. StrictMode Call Count Fixes

React 19 StrictMode no longer double-invokes useEffect in development. Spy assertions counting effect calls must be updated.

Strategy always measure, never guess:

# Run the failing test, read the actual count from the error:
npm test -- --watchAll=false --testPathPattern="[filename]" --forceExit 2>&1 | grep -E "Expected|Received"
// Before (React 18 StrictMode  effects ran twice):
expect(mockFn).toHaveBeenCalledTimes(2);  // 1 call × 2 (strict double-invoke)

// After (React 19 StrictMode  effects run once):
expect(mockFn).toHaveBeenCalledTimes(1);
// Render-phase calls (component body)  still double-invoked in React 19 StrictMode:
expect(renderSpy).toHaveBeenCalledTimes(2);  // stays at 2 for render body calls

githubのその他のスキル

console-rendering
github
Goにおける構造体タグベースのコンソールレンダリングシステムの使用手順
official
acquire-codebase-knowledge
github
ユーザーが既存のコードベースのマッピング、ドキュメント化、またはオンボーディングを明示的に依頼した場合にこのスキルを使用します。「このコードベースをマッピングして」「ドキュメント化して…」といったプロンプトで起動します。
official
acreadiness-assess
github
Run the AgentRC readiness assessment on the current repository and produce a static HTML dashboard at reports/index.html. Wraps `npx github:microsoft/agentrc…
official
acreadiness-generate-instructions
github
AgentRCのinstructionsコマンドを使用して、カスタマイズされたAIエージェント指示ファイルを生成します。.github/copilot-instructions.md(デフォルト、VS CodeのCopilotに推奨)を出力します…
official
acreadiness-policy
github
ユーザーがAgentRCポリシーを選択、作成、または適用するのを支援します。ポリシーは、関連性のないチェックを無効にしたり、影響度/レベルを上書きしたり、設定することで、レディネススコアリングをカスタマイズします。
official
add-educational-comments
github
コードファイルに教育的なコメントを追加し、効果的な学習リソースに変換します。説明の深さとトーンを、設定可能な3つの知識レベル(初心者、中級、上級)に適応させます。ファイルが提供されない場合は自動的にリクエストし、番号付きリストで素早く選択できます。教育的なコメントのみを使用してファイルを最大125%拡張します(ハードリミット:新しい行400行、1,000行を超えるファイルは300行)。ファイルのエンコーディング、インデントスタイル、構文の正確性を保持し、...
official
adobe-illustrator-scripting
github
ExtendScript(JavaScript/JSX)を使用して、Adobe Illustratorの自動化スクリプトの作成、デバッグ、最適化を行います。スクリプトを作成または修正して操作する際に使用します…
official
agent-governance
github
宣言的なポリシー、意図分類、および監査証跡により、AIエージェントのツールアクセスと動作を制御します。構成可能なガバナンスポリシーは、許可/ブロックされたツール、コンテンツフィルター、レート制限、承認要件を定義し、コードではなく設定として保存されます。セマンティック意図分類は、パターンベースのシグナルを使用して、ツール実行前に危険なプロンプト(データ流出、権限昇格、プロンプトインジェクション)を検出します。ツールレベルのガバナンスデコレーターは、関数にポリシーを適用します...
official