表示と非表示

要素が表示されてから消える、またはその逆のテストが必要になる場合があります。

表示を待つ

要素が表示されるのを待つ必要がある場合、非同期待ちユーティリティ を使用して、続行する前にアサーションが満たされるのを待つことができます。待ちユーティリティは、クエリが成功するかタイムアウトするまで再試行します。非同期メソッドはPromiseを返すため、常に`await`または`.then(done)`を使用して呼び出す必要があります。

1. findByクエリを使用する

test('movie title appears', async () => {
  // element is initially not present...
  // wait for appearance and return the element
  const movie = await findByText('the lion king')
})

2. waitForを使用する

test('movie title appears', async () => {
  // element is initially not present...

  // wait for appearance inside an assertion
  await waitFor(() => {
    expect(getByText('the lion king')).toBeInTheDocument()
  })
})

非表示を待つ

waitForElementToBeRemoved 非同期ヘルパー 関数は、コールバックを使用して各DOM変更で要素をクエリし、要素が削除されると`true`を返します。

test('movie title no longer present in DOM', async () => {
  // element is removed
  await waitForElementToBeRemoved(() => queryByText('the mummy'))
})

waitForでDOMを定期的にポーリングするよりも、MutationObserver を使用した方が効率的です。

waitFor 非同期ヘルパー 関数は、ラップされた関数がエラーを停止するまで再試行します。これは、要素がページから消えることをアサートするために使用できます。

test('movie title goes away', async () => {
  // element is initially present...
  // note use of queryBy instead of getBy to return null
  // instead of throwing in the query itself
  await waitFor(() => {
    expect(queryByText('i, robot')).not.toBeInTheDocument()
  })
})

要素が存在しないことをアサートする

標準的な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(0) // expect no elements

not.toBeInTheDocument

jest-dom ユーティリティライブラリは、.toBeInTheDocument() マッチャーを提供します。これは、要素がドキュメントのbody内にあるかどうかをアサートするために使用できます。これは、クエリの結果が`null`であることをアサートするよりも意味のある場合があります。

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