React 19 テスト移行パターン

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

優先順序

テストファイルを以下の順序で修正してください。各レイヤーは前のレイヤーに依存しています：

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

---

1. act() Import の修正

// Before  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  インポートを分割:
import { act } from 'react';
import { fireEvent, render } from '@testing-library/react'; // Simulate + renderIntoDocument の代わり

---

2. Simulate → fireEvent

// Before  Simulate は 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 を二重呼び出ししなくなりました。エフェクト呼び出し回数をカウントするスパイアサーションを更新する必要があります。

戦略 常に測定し、推測しない：

# 失敗したテストを実行し、エラーから実際の回数を読み取ります:
npm test -- --watchAll=false --testPathPattern="[filename]" --forceExit 2>&1 | grep -E "Expected|Received"

// Before (React 18 StrictMode  エフェクトは 2 回実行):
expect(mockFn).toHaveBeenCalledTimes(2);  // 1 呼び出し × 2 (strict 二重呼び出し)

// After (React 19 StrictMode  エフェクトは 1 回実行):
expect(mockFn).toHaveBeenCalledTimes(1);

// レンダーフェーズの呼び出し (コンポーネント本体)  React 19 StrictMode でも二重呼び出しされます:
expect(renderSpy).toHaveBeenCalledTimes(2);  // レンダー本体呼び出しのため 2 のままです