🌊

React Testing Library で awaitable な Query を使いたい

2020/12/03に公開

React

Test

tech

React Testing Library で findBy* を使って、要素が表示されるのを待機したいのだが、いざ使ってみると失敗する。

await screen.findByTestId('the-element');

これを実行すると、以下のような Warning が出る。

  console.error node_modules/@testing-library/react/dist/act-compat.js:88
    It looks like you're using a version of react-dom that supports the "act" function, but not an awaitable version of "act" which you will need. Please upgrade to at least react-dom@16.9.0 to remove this warning.

この警告は、React 16.8 で追加された^[1] ReactTestUtils.act() がその時点では async 関数をサポートしておらず、16.9 でサポートされた^[2] ので、react-dom をアップグレードしろ、という内容である。

react-dom のバージョンを上げるのだが、react と react-test-renderer のバージョンも合わせる必要がある。今回は 16.8 を使っていたので、16.9.0 にする。

"react": "16.9.0",
"react-dom": "16.9.0",
"react-test-renderer": "16.9.0",

しかし、これで再度実行すると、今度は以下のエラーが出る。

TypeError: MutationObserver is not a constructor

Jsdom を 14.x にする必要がある。^[3] しかし、jest が使っているデフォルトの jsdom が古いので、jest-environment-jsdom-fourteen を導入する。まず、このパッケージをインストール。

$ npm install --save-dev jest-environment-jsdom-fourteen

次に Jest の設定に以下を追加する。

{
  "testEnvironment": "jest-environment-jsdom-fourteen"
}

脚注

Discussion