jest と react-testing-library を使用して要素が存在しないかどうかをテストするにはどうすればよいでしょうか? 質問する

からDOM テスト ライブラリ ドキュメント - 出現と消失

アサーション要素が存在しない

標準メソッドは要素が見つからない場合にエラーをスローするため、要素がDOM に存在しないgetByことをアサーションしたい場合は、代わりに API を使用できます。queryBy

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

APIqueryAllバージョンは、一致するノードの配列を返します。配列の長さは、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()