@testing-library/user-eventを使ったユーザーイベントのサンプル集
はじめに
UIコンポーネントの単体・結合テストを実施する時にユーザーイベントを再現するために必要不可欠な存在になっている@testing-libraryのuser-event。
今回はそのuser-eventを使った様々なユーザーイベントの表現方法やTipsをまとめたいと思います！（随時更新できたら良いな〜と😂）
インストールや設定方法は今回の内容とは逸れるので省きます！気になる方は下記公式サイトを参考にしていただければと！
これから紹介するコードは全て、下記コードのテストケースの中に記述する想定です。
import userEvent from "@testing-library/user-event";
const user = userEvent.setup();
it("テストケース", async () => {
...こちらでuser-eventを使用します...
});
また、本稿では@testing-library/user-eventのv14を使用します。
サンプル集
keydown
>を末尾に追記することで、キーを押下したままにすることができます。
await user.keyboard('{a>}');
keyup
/をキーの前につけることで、解除（keyup）することができます。
基本的にkeydownで紹介したコードの後に、記述する必要があります。
// keydown
await user.keyboard('{a>}');
// keyup
await user.keyboard('{/a}');
keypress
keydownとkeyupを同時に実行することができます。
await user.keyboard('a');
同時に押下（サンプルの場合Shiftとa）することも可能。
await user.keyboard('{Shift>}A{/Shift}');
tab
タブキーの押下を表現する。
await user.keyboard('{Tab}');
tabというショートカットAPIもある。
await user.tab();
contextmenu
keysにMouseRightを指定することで、右クリックを表現する。targetにはコンテキストメニューを表示する対象のDOM要素を指定する。
await user.pointer({keys: '[MouseRight]', target: element});
doubleClick
ダブルクリックを表現する。
await user.pointer([
{target: element},
{keys: '[MouseLeft][MouseLeft]', target: element}
])
dblClickというショートカットAPIもある。
await user.dblClick(element: Element);
tripleClick
トリプルクリックを表現する。
await user.pointer([
{target: element},
{keys: '[MouseLeft][MouseLeft][MouseLeft]', target: element},
])
tripleClickというショートカットAPIもある。
await user.tripleClick(element: Element);
hover
mouseenter,mouseover等のマウスが対象DOMへ入ってきたイベント時に使用する。
await user.hover(element: Element):
or
await user.pointer({target: element});
unhover
mouseout,mouseleave等のマウスが対象DOMから離れたイベント時に使用する。
await user.unhover(element: Element);
or
await user.pointer({target: element.ownerDocument.body});
input
inputへの入力を表現する。
第一引数に対象のDOM要素。第二引数に入力値。
await user.type(element, 'bar')
upload
ファイルのアップロードを表現する。
第一引数に対象のDOM要素。第二引数にアップロードしたいファイルを指定する。
await user.upload(element: HTMLElement, fileOrFiles: File | File[]);
最後に
今回は@testing-library/user-eventのユーザーイベントサンプル集をまとめてみました！
@testing-library/user-eventがまだ実装途中のため、今後もユーザーイベントが追加されていくと思われます！その時は、随時更新できるよう頑張ります✊
また、単体テストの考え方や使い方についても記事を書いていますので良かったら見てください👀
Discussion