メインコンテンツにスキップ

セットアップ

たとえば、ユーザーがキーボードキーを押すなどしてブラウザーで操作を行う場合、ブラウザーに表示される UI レイヤーと操作を行います。次に、ブラウザーはこの入力内容を解釈し、必要に応じて基礎となる DOM を変更して信頼されたイベントを発行します。
UI レイヤーと信頼されたイベントはプログラムでは利用できません。
そのため、user-event は、ブラウザーで発生するとおりにユーザー操作をシミュレートするために回避策を適用し、UI レイヤーをモック化する必要があります。

setup() ごとのセッションの開始

setup(options?: Options): UserEvent

userEvent.setup() API は、これらの回避策をドキュメントに適用し、user-event の「インスタンス」を構成できます。
このインスタンスのメソッドは、どのキーが押されているかなど、1 つの入力デバイスの状態を共有します。

これにより、実際のユーザーによる説明どおりの操作のように動作する、複数の連続した操作を記述できます。

import userEvent from '@testing-library/user-event'

const user = userEvent.setup()

await user.keyboard('[ShiftLeft>]') // Press Shift (without releasing it)
await user.click(element) // Perform a click with `shiftKey: true`

インスタンスは別の.setup() API を公開しており、同じ入力デバイスの状態を共有する別のインスタンスを構成できます。

クリップボード API は通常、セキュアなコンテキスト以外では使用できません。
クリップボードに関連するワークフローをテストできるようにするには、userEvent.setup()window.navigator.clipboard をスタブに置き換えます。

Direct API

デフォルトのエクスポートで直接 API を呼び出すこともできます。これにより、setup が内部的に呼び出されてから、インスタンスでメソッドが使用されます。

これは、バージョン 14 への移行と簡単なテストの記述を容易にするためにあります。userEvent.setup() によって返されたインスタンスでメソッドを使用することをお勧めします。