元素的出现和消失

有时您需要测试元素是否存在，然后消失或反之。

等待元素出现

如果您需要等待元素出现，异步等待实用程序 允许您等待断言满足后再继续。等待实用程序会一直重试，直到查询通过或超时。异步方法返回 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'))
})

使用 MutationObserver 比以固定时间间隔轮询 DOM 使用 waitFor 更有效率。

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 或从 DOM 中删除后很有用。

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

not.toBeInTheDocument

jest-dom 实用程序库提供了 .toBeInTheDocument() 匹配器，可用于断言元素是否存在于文档的正文中，或不存在。这比断言查询结果为 null 更具意义。

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