March 31, 2022

classとreact-testing-library

react-testing-libraryで、コンポーネントの中にある以下のようなjsxが条件によって期待通りに切り替わっているかテストしたい場合があった。

{count && <span className="count">{count}</span>}

assertするためにまず、このspanをもってくる必要がある。 なのでまず、react-testing-libraryのドキュメントを読んだけどgetByClassみたいなクエリがない。

• https://testing-library.com/docs/react-testing-library/cheatsheet

多分、classはどの要素にでもあるものじゃない&一意でないからそれをもとに要素を検証するのは推奨しないという思想があるんじゃないのかなと思う。 なので、ドキュメント通り各要素にテスト用のidを付与してByTestId系のクエリで取得するか、aria-roleがあるものだったらByrole系のクエリで取得するのが良さそう。

ただ、テスト用にidを付与するような運用はしていないので今回はこんな感じでcontainerからgetElementsByClassNameで無理やり要素を持ってきてテストした。

it('countは描画されない', () => {
  const { container } = render(<Component />,{})
  expect(container.getElementsByClassName("count").length).toBe(0)
})