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. Simulate → fireEvent 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のその他のスキル

debugging-workflows
github
GitHubのエージェンティックワークフローをデバッグするためのガイド - ログの分析、実行の監査、問題のトラブルシューティング
go-codemod
github
gh aw fix コマンド用のGoコードモッドを実装およびテストする。
acreadiness-policy
github
ユーザーがAgentRCポリシーを選択、作成、または適用するのを支援します。ポリシーは、関連性のないチェックを無効にしたり、影響度/レベルを上書きしたり、設定することで、レディネススコアリングをカスタマイズします。
ai-ready
github
あらゆるリポジトリをAI対応にします。コードベースを分析し、AGENTS.md、copilot-instructions.md、CIワークフロー、Issueテンプレートなどを生成します。PRレビューを解析し…
create-oo-component-documentation
github
オブジェクト指向コンポーネント向けに、業界のベストプラクティスとアーキテクチャ文書化標準に従った、包括的で標準化されたドキュメントを作成します。
dependabot
github
DependabotはGitHubに組み込まれた依存関係管理ツールであり、3つの主要機能を備えています。
doublecheck
github
AI出力のための3層検証パイプライン。検証可能な主張を抽出し、ウェブ検索で支持または反証する情報源を見つけ、敵対的レビューを実行…
foundry-agent-sync
github
ローカルのJSONマニフェストから、REST APIを介してAzure AI Foundry内でプロンプトベースのAIエージェントを直接作成および同期します。スキャフォールディングスキルとは異なり、単に…