useEventは事前にsetupしよう

reactコンポーネントのユニットテストを書く際にTesting Libraryを利用していましたがv13からv14へのアップデートでuserEventの使い方が変わっていました。

ドキュメントはこちら
https://testing-library.com/docs/user-event/intro

使い方

v13まではこうでしたが

MyComponent.spec.ts

import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'

it('button click test', async () => {
  const user = userEvent.setup()

  render(<MyComponent />)

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

  // ...assertions...
})

v14からはこちらのような書き方が推奨されています。

MyComponent.spec.ts

import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'

const setup = () => {
  return {
    user: userEvent.setup(),
    ...render(<MyComponent />),
  }
}


it('button click test', async () => {
  const user = setup()

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

  // ...assertions...
})

終わりに

v13の書き方でも動作自体に問題はなかったので今まで同じ書き方で実装を行っていましたが今後はv14で推奨される書き方で実装を進めたいと思います。
ドキュメントはしっかり読むべきですね。