[解決済み】jestとreact-testing-libraryを使って、要素が存在しないことをテストするにはどうすればよいですか？

質問

私はJestとreact-testing-libraryを使ってユニットテストを書いているコンポーネントライブラリを持っています。特定のpropsやイベントに基づいて、特定の要素がレンダリングされていないことを検証したいのです。

getByText , getByTestId などが投げられ、エラーが発生します。 react-testing-library が見つかる前にテストが失敗した場合、その要素は expect 関数が起動します。

react-testing-libraryを使って、jestに存在しないものをどのようにテストするのでしょうか？

どのように解決するのですか？

から DOM Testing-library Docs - 出現と消滅

要素が存在しないことを主張する

標準的な getBy メソッドは、要素が見つからないとエラーを投げます。 というアサーションを行いたい場合、その要素が ではない DOM に存在する。 を使用することができます。 queryBy のAPIで代用できます。

const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist

は queryAll APIバージョンは、一致するノードの配列を返します。この配列の長さは 配列は、要素が追加されたり削除されたりした後のアサーションに便利です。 DOM

const submitButtons = screen.queryAllByText('submit')
expect(submitButtons).toHaveLength(2) // expect 2 elements

not.toBeInTheDocument

は jest-dom ユーティリティ・ライブラリは .toBeInTheDocument() マッチャーを使用することで、ある要素が であるかどうか。これは、次のように主張するよりも意味があります。 クエリ結果が null .

import '@testing-library/jest-dom/extend-expect'
// use `queryBy` to avoid throwing an error with `getBy`
const submitButton = screen.queryByText('submit')
expect(submitButton).not.toBeInTheDocument()