Skip to content
koralle's Front-End Tech Memo

React Testing Libraryを使ったテストの書き方

ドキュメント

まず基本の基本はドキュメントを読む。

https://testing-library.com/docs/react-testing-library/intro/

Common mistakes with React Testing Libraryを読む

Common mistakes with React Testing Libraryは、
React Testing Libraryを作ったKent C. Doddsが書いた記事で、
React Testing Libraryの正しい使い方や、よくある間違いを紹介している。

日本語訳はここで読める。

その中でも特に気になったものをいくつかメモっておく。

containerにクエリするのをやめよう。

シンプルにテストが読みにくくなるし、テストが壊れやすくなるからだとか。

// ❌
const { container } = render(<Example />)
const button = container.querySelector('.btn-primary')
expect(button).toHaveTextContent(/click me/i)


// ✅
render(<Example />)
screen.getByRole('button', {name: /click me/i})

waitForの中に副作用を書かない。

waitForの中に副作用を書くと、その副作用が複数回発生する可能性があるとか。

// ❌
await waitFor(() => {
  fireEvent.keyDown(input, { key: 'ArrowDown' })
  expect(screen.getAllByRole('listitem')).toHaveLength(3)
})


// ✅
fireEvent.keyDown(input, { key: 'ArrowDown' })
await waitFor(() => {
  expect(screen.getAllByRole('listitem')).toHaveLength(3)
})

queryは「存在しないことをチェックする」場合以外には使わない様にしよう

query*系の関数は、要素が見つからなかった場合にnullを返すのが特徴。
というか、それが唯一の用途らしい。

読むと良さそうな記事（随時更新）