Open2022/03/21にコメント追加1

Warning: An update to FavoriteProductList inside a test was not wrapped in act(...).とエラーがでた

React

Jest

nerusan

概要

JESTでReactのテストを記述していると以下の警告が出た。

Warning: An update to FavoriteProductList inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */

       29 |        const repository = new ProductFirebaseRepository();
      30 |         const products = await repository.findByIds(favoriteProductIds);
   > 31 |         setFavoriteProducts(products);
           |         ^
     32 |       })();

警告の通りactで囲んだ部分でレンダリングしてテストをしたが、改善されなかった。

import { act } from 'react-dom/test-utils';
act(() => {
        <Component />
});

この時の解決策を記述する

解決策

import { waitFor } from '@testing-library/react';

test('test', async () =>{
    await waitFor(() => {
        render(<FavoriteProductList />);
    });
});

概要

解決策

参考