⌨️

@testing-library/user-eventを使ったユーザーイベントのサンプル集

2023/05/05に公開

はじめに

UIコンポーネントの単体・結合テストを実施する時にユーザーイベントを再現するために必要不可欠な存在になっている@testing-libraryのuser-event
今回はそのuser-eventを使った様々なユーザーイベントの表現方法やTipsをまとめたいと思います!(随時更新できたら良いな〜と😂)

インストールや設定方法は今回の内容とは逸れるので省きます!気になる方は下記公式サイトを参考にしていただければと!
https://testing-library.com/docs/user-event/intro

これから紹介するコードは全て、下記コードのテストケースの中に記述する想定です。

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

const user = userEvent.setup();

it("テストケース", async () => {
  ...こちらでuser-eventを使用します...
});

また、本稿では@testing-library/user-eventv14を使用します。

サンプル集

keydown

>を末尾に追記することで、キーを押下したままにすることができます。

await user.keyboard('{a>}');

keyup

/をキーの前につけることで、解除(keyup)することができます。
基本的にkeydownで紹介したコードの後に、記述する必要があります。

// keydown
await user.keyboard('{a>}');
// keyup
await user.keyboard('{/a}');

keypress

keydownkeyupを同時に実行することができます。

await user.keyboard('a');

同時に押下(サンプルの場合Shifta)することも可能。

await user.keyboard('{Shift>}A{/Shift}');

tab

タブキーの押下を表現する。

await user.keyboard('{Tab}');

tabというショートカットAPIもある。

await user.tab();

contextmenu

keysMouseRightを指定することで、右クリックを表現する。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がまだ実装途中のため、今後もユーザーイベントが追加されていくと思われます!その時は、随時更新できるよう頑張ります✊
また、単体テストの考え方や使い方についても記事を書いていますので良かったら見てください👀
https://zenn.dev/brunchmade/articles/3ad9287863cc1a

Discussion