【React】jestを使用したテスト

書き方

.tsx

import { unmountComponentAtNode } from "react-dom";
import { act } from 'react-dom/test-utils';

describe('テスト箇所', () => {
  let container = null;

  // セットアップ
  beforeEach(() => {
    // documentにDOM要素を描画する
    container = document.createElement('div');
    document.body.appendChild(container);
  });

  // クリーンアップ
  afterEach(() => {
    // documentからDOM要素を削除する
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });

  it('テスト内容', () => {
    act(() => {
      // コンポーネントをレンダリングする
    });

    // アサーション
    expect('test').toBe('test'); // コンポーネントのレンダリングが完了していることが保証されている
  });
});

unmountComponentAtNode()

• DOMからマウントされたReactコンポーネントを削除する
• イベントハンドラや state をクリーンアップする

act()

• react-dom/test-utils が提供するテストのための関数
• アサーションの前に act() 内の処理がすべて完了し、DOM に反映されていることを保証する