速查表

React Testing Library 中所有导出函数的简要指南

render const {/* */} = render(Component) 返回
- unmount 用于卸载组件的函数
- container 组件挂载的 DOM 节点的引用
- 来自 DOM Testing Library 的所有查询，绑定到文档，因此无需将节点作为第一个参数传递（通常，您可以使用 screen 导入代替）

import {render, fireEvent, screen} from '@testing-library/react'

test('loads items eventually', async () => {
  render(<Page />)

  // Click button
  fireEvent.click(screen.getByText('Load'))

  // Wait for page to update with query text
  const items = await screen.findAllByText(/Item #[0-9]: /)
  expect(items).toHaveLength(10)
})

查询

与 DOM 测试库的差异
React Testing Library 中 render 返回的查询与 DOM Testing Library 相同，除了它们将第一个参数绑定到文档，因此您无需 getByText(node, 'text') 而是 getByText('text')

参见我应该使用哪个查询？

	无匹配项	1 个匹配项	1+ 个匹配项	异步？
getBy	抛出	返回	抛出	否
findBy	抛出	返回	抛出	是
queryBy	null	返回	抛出	否
getAllBy	抛出	数组	数组	否
findAllBy	抛出	数组	数组	是
queryAllBy	[]	数组	数组	否

ByLabelText 按标签或 aria-label 文本内容查找
- getByLabelText
- queryByLabelText
- getAllByLabelText
- queryAllByLabelText
- findByLabelText
- findAllByLabelText
ByPlaceholderText 按输入占位符值查找
- getByPlaceholderText
- queryByPlaceholderText
- getAllByPlaceholderText
- queryAllByPlaceholderText
- findByPlaceholderText
- findAllByPlaceholderText
ByText 按元素文本内容查找
- getByText
- queryByText
- getAllByText
- queryAllByText
- findByText
- findAllByText
ByDisplayValue 按表单元素的当前值查找
- getByDisplayValue
- queryByDisplayValue
- getAllByDisplayValue
- queryAllByDisplayValue
- findByDisplayValue
- findAllByDisplayValue
ByAltText 按 img alt 属性查找
- getByAltText
- queryByAltText
- getAllByAltText
- queryAllByAltText
- findByAltText
- findAllByAltText
ByTitle 按 title 属性或 svg title 标签查找
- getByTitle
- queryByTitle
- getAllByTitle
- queryAllByTitle
- findByTitle
- findAllByTitle
ByRole 按 aria 角色查找
- getByRole
- queryByRole
- getAllByRole
- queryAllByRole
- findByRole
- findAllByRole
ByTestId 按 data-testid 属性查找
- getByTestId
- queryByTestId
- getAllByTestId
- queryAllByTestId
- findByTestId
- findAllByTestId

异步

React 测试库从 dom-testing-library 重新导入了 dom-testing-library 异步 API。

waitFor（Promise）在它停止抛出或超时之前重试函数
waitForElementToBeRemoved（Promise）在它不再返回 DOM 节点之前重试函数

事件

参见事件 API

fireEvent 触发 DOM 事件：fireEvent(node, event)
fireEvent.* 用于默认事件类型的帮助程序
- click fireEvent.click(node)
- 参见所有支持的事件
act 对 react act 的包装器；React 测试库已在对 act 的调用中包装了 render 和 fireEvent，因此大多数情况下应该不需要手动使用它

其他

参见在元素内查询、配置 API、清理、

within 获取一个节点并返回一个包含绑定到该节点的所有查询的对象（用于返回 React Testing Library 的 render 方法的查询）：within(node).getByText("hello")
configure 更改全局选项：configure({testIdAttribute: 'my-data-test-id'})
cleanup 清除 DOM（与 afterEach 一起使用以在测试之间重置 DOM）

文本匹配选项

给定以下 HTML

<div>Hello World</div>

将找到 div

// Matching a string:
getByText('Hello World') // full string match
getByText('llo Worl', {exact: false}) // substring match
getByText('hello world', {exact: false}) // ignore case

// Matching a regex:
getByText(/World/) // substring match
getByText(/world/i) // substring match, ignore case
getByText(/^hello world$/i) // full string match, ignore case
getByText(/Hello W?oRlD/i) // advanced regex

// Matching with a custom function:
getByText((content, element) => content.startsWith('Hello'))

获取可打印的速查表

查询​

异步​

事件​

其他​

文本匹配选项​

查询

异步

事件

其他

文本匹配选项