react19-test-patterns

React 19 テスト移行パターン

React 19 で必要となるすべてのテストファイル移行のリファレンスです。

優先順位

各レイヤーは前のレイヤーに依存するため、次の順序でテストファイルを修正してください。

1. act のインポート まず修正します。これにより、ほかのすべての作業が進められます
2. Simulate → fireEvent act の直後に修正します
3. react-dom/test-utils の完全なクリーンアップ 残りのインポートを削除します
4. StrictMode の呼び出し回数 推測せず、実際に測定します
5. 非同期の act でラップ 残っている「act でラップされていない」警告に対応します
6. カスタム render ヘルパー テストごとではなく、コードベースごとに一度確認します

---

1. act() のインポート修正

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

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

ほかの test-utils のインポートと混在している場合：

// 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 API 完全対応表

旧（react-dom/test-utils）	新しい場所
act	import { act } from 'react'
Simulate	@testing-library/react の fireEvent
renderIntoDocument	@testing-library/react の render
findRenderedDOMComponentWithTag	RTL の getByRole、getByTestId
findRenderedDOMComponentWithClass	getByRole または container.querySelector
scryRenderedDOMComponentsWithTag	RTL の getAllByRole
isElement、isCompositeComponent	削除してください。RTL では不要です
isDOMComponent	削除

---

4. StrictMode の呼び出し回数の修正

React 19 の StrictMode は、開発環境で useEffect を二重に呼び出さなくなりました。エフェクトの呼び出し回数を数えるスパイのアサーションを更新する必要があります。

方針 常に実測し、決して推測しない：

# 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