fireEventではなくuserEventを使う

2024年5月21日

fireEventではなくuserEventを使うべき理由と、userEventの使い方、userEventが対応できないケースについて解説する。

Table of Contents

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

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

userEventが対応できないケース

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

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

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

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

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

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

await userEvent.click();