created: 2021-04-28T08:34:51.000Z

React Testing Library で a test was not wrapped in act をなんとかする

Formik を使っていてこんな警告が出た。

console.error node_modules/react-dom/cjs/react-dom.development.js:530 Warning: An update to Formik inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...):

コンポーネントの更新をともなうテストは act 関数のコールバック内で行うことになっているそうだ。もし、それ以外の場所でコンポーネントが更新されたとき、React は予期せぬ更新だとして上述の警告を出す。

act 関数を使うのでもいいが、React Testing Library は waitFor という関数を提供しているので、その中でアサーションをするのであれば警告を免れることができる。また、waitFor は単純に便利なのでこれを使うと具合がいい。

When in need to wait for any period of time you can use waitFor, to wait for your expectations to pass. Here's a simple example:

  test("submit call refreshWithQueryparameter", async () => {
    const { getByText } = rendered;
    // locationオブジェクトをいじるイベントをキック
    fireEvent.click(getByText('Submit'))
    await waitFor(() => {
      expect(global.location.search).toBe("OK=1");
    });
  });

参考