導入

user-event は、Testing Library の補完ライブラリであり、ブラウザでインタラクションが発生した場合と同じイベントをディスパッチすることで、ユーザーインタラクションをシミュレートします。

`fireEvent`との違い

fireEventはDOMイベントをディスパッチしますが、user-eventは完全なインタラクションをシミュレートし、複数のイベントを発火させ、その過程で追加のチェックを行います。

Testing Libraryの組み込みfireEventは、ブラウザの低レベルなdispatchEvent APIをラップした軽量なラッパーであり、開発者は任意の要素で任意のイベントをトリガーできます。問題は、ブラウザは通常、1つのインタラクションに対して1つのイベントをトリガーするだけではないことです。例えば、ユーザーがテキストボックスに入力すると、要素にフォーカスが当てられ、キーボードイベントと入力イベントが発火し、入力中に要素の選択範囲と値が操作されます。

user-eventを使用すると、具体的なイベントではなく、ユーザーインタラクションを記述できます。途中で可視性と操作性のチェックを追加し、ブラウザでのユーザーインタラクションと同様にDOMを操作します。ブラウザでは、非表示の要素をクリックしたり、無効なテキストボックスに入力したりできないという点を考慮に入れています。
これがコンポーネントとのインタラクションのテストにuser-eventを使用する理由です。

ただし、まだ実装されておらず、user-eventで記述できないユーザーインタラクションや側面もあります。このような場合は、fireEventを使用して、ソフトウェアが依存する具体的なイベントをディスパッチできます。

これにより、インタラクションの具体的な側面に関するあなたの仮定に、コンポーネントやテストが依存することになります。したがって、そのようなインタラクションの正しい側面を既に指定している場合は、このプロジェクトに貢献して、user-eventでもこれらのケースをカバーできるようにすることを検討してください。

`userEvent`を使用したテストの記述

コンポーネントがレンダリングされる前にuserEvent.setup()を呼び出すことをお勧めします。これはテスト自体で行うことも、セットアップ関数を使用することでもできます。"テスト時にネストを避ける"で説明されている理由から、テスト自体の外部（例：before/afterフック内）でuserEvent関数をレンダリングまたは使用することはお勧めしません。

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

// inlining
test('trigger some awesome feature when clicking the button', async () => {
  const user = userEvent.setup()
  // Import `render` and `screen` from the framework library of your choice.
  // See https://testing-library.dokyumento.jp/docs/dom-testing-library/install#wrappers
  render(<MyComponent />)

  await user.click(screen.getByRole('button', {name: /click me!/i}))

  // ...assertions...
})

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

// setup function
function setup(jsx) {
  return {
    user: userEvent.setup(),
    // Import `render` from the framework library of your choice.
    // See https://testing-library.dokyumento.jp/docs/dom-testing-library/install#wrappers
    ...render(jsx),
  }
}

test('render with a setup function', async () => {
  const {user} = setup(<MyComponent />)
  // ...
})

userEvent.click()（内部的にsetupをトリガーします）などのAPIを直接呼び出すことはv14でもサポートされていますが、このオプションはv13からv14への移行を容易にし、単純なテストのためにあることに注意してください。userEvent.setup()によって返されるインスタンスのメソッドを使用することをお勧めします。

fireEventとの違い​

userEventを使用したテストの記述​

`fireEvent`との違い

`userEvent`を使用したテストの記述