fireEventではなくuserEventを使う

fireEvent ではなく userEvent を使う#

React Testing Library では、イベントを実行する方法として、fireEvent と userEvent があるが、基本的に userEvent を利用するべき。

• userEvent：ブラウザ内でユーザーが操作した場合に発生するイベントをシュミレートする。
• fireEvent：DOM の特定のイベントを発火する。dispatchEvent の薄いラッパー。

単一のイベントを発火する fireEvent を利用して実際のブラウザにおけるインタクションに対していくつものイベントを処理する挙動を再現することは難しいため、より実際に近い挙動を再現できる userEvent が推奨される。

https://testing-library.com/docs/dom-testing-library/api-events/

userEvent が対応できないケース#

ただし、userEvent は完全にカバーできていないケースがいくつかあるため、fireEvent の存在は知っておく必要がある。例えば、Shift ＋矢印キーによる範囲選択や touch イベントを userEvent はカバーできていない。

• https://github.com/testing-library/user-event/issues/880
• https://github.com/testing-library/user-event/issues/966
• https://github.com/testing-library/user-event/issues/871

userEvent の使い方#

userEvent は次のように利用する。

1
import userEvent from "@testing-library/user-event";
2

3
const user = userEvent.setup();
4
await user.click();

非推奨な userEvent の使い方#

調べると userEvent.click()のような呼び出しをしているケースがあるが、user-event のメジャーアップデートの移行をしやすくするために残された記法であり非推奨。

https://testing-library.com/docs/user-event/intro#writing-tests-with-userevent

1
import userEvent from "@testing-library/user-event";
2

3
await userEvent.click();