beforeEachでrender関数を使った時のact()エラーを解消する。

actエラー

React Testing Library の act() 警告（warning）は、「テスト実行時にコンポーネントの状態（state）を変更する処理が発生したが、それが act() でラップされていない」場合に出るものです。
基本的には、テストコードとコンポーネントコードの両方で「非同期に状態が変わる処理があるとき」や「ユーザー操作をトリガーとして状態変更が起こるとき」に、適切にラップされていないと act() warning が出やすくなります。
renderは内部的にactを実行する仕様になっていますが、beforeEachの中に入れると別スコープとなるためactの警告が発生します。

警告の出るコード

    describe('モーダル画面', () => {
      beforeEach(() => {
          render(
              <TestRender />
          );
      })


      test(`登録ボタンをクリックしたらモーダル画面が表示される`, async () => {
        // ...
      });

      test(`×をクリックしたらモーダル画面が閉じる`, async () => {       
        // ...
      });

actを使うことでエラー解消

renderそのものをactを入れることで、ステート更新が完了するまで処理を待つことができます。

    describe('モーダル画面', () => {
      beforeEach(async () => {
        await act(async () => {
          render(
            <TestRender />
          );
        });
      });

      test(`登録ボタンをクリックしたらモーダル画面が表示される`, async () => {
        // ...
      });

      test(`×をクリックしたらモーダル画面が閉じる`, async () => {       
        // ...
      });

その他のactエラー解決方法

各テストでrenderする。この場合はテストのスコープでrenderする(内部的にactする)ためエラーは出ません。

    describe('モーダル画面', () => {

      test(`登録ボタンをクリックしたらモーダル画面が表示される`, async () => {
        render(
            <TestRender />
        );
        // ...
      });

      test(`×をクリックしたらモーダル画面が閉じる`, async () => {
        render(
            <TestRender />
        );
        // ...
      });

そもそも

コンポーネント内で正しくasync、await処理ができていればマウントする時にactエラーは出ません。
act関数を使わなくても良いコードを目指したいですね。🤖