速查表

一个简短的指南，介绍了 Vue Testing Library 中所有导出的函数。

查询

与 DOM 测试库的区别

Vue Testing Library 中从 render 返回的查询与 DOM Testing Library 相同。但是，它们将第一个参数绑定到文档，因此您不用写 getByText(node, 'text')，而是写 getByText('text')。

搜索变体

	没有匹配项时返回	匹配到一项时返回	匹配到一项或多项时返回	异步？
getBy...	抛出异常	返回	抛出异常	否
findBy...	抛出异常	返回	抛出异常	是
queryBy...	null	返回	抛出异常	否
getAllBy...	抛出异常	数组	数组	否
findAllBy...	抛出异常	数组	数组	是
queryAllBy...	[]	数组	数组	否

搜索类型

	按...查找	DOM 示例
...ByLabelText	标签或 aria-label 内容	<label for="element" />
...ByPlaceholderText	输入占位符值	<input placeholder="name" />
...ByText	元素文本内容	<p>Lorem ipsum</p>
...ByDisplayValue	表单元素的当前值	输入元素的当前值
...ByAltText	img alt 属性	<img alt="电影海报" />
...ByTitle	title 属性或 svg title 标签	<span title="添加" /> 或 <title />
...ByRole	ARIA 角色	<div role="dialog" />
...ByTestId	data-testid 属性	<div data-testid="some-message" />

您可以编写任何搜索变体和搜索类型的组合。

示例

getByLabelText('用户名') 将搜索包含字符串“用户名”的 <label> 元素，并将返回关联的 input。如果没有找到任何元素，或者找到多个元素，它将抛出异常。

queryAllByRole('nav') 将同步查找所有具有 role="nav" 属性的元素，并返回包含结果的数组（如果未找到任何结果，则返回空数组）。

有关更多信息，请参见 我应该使用哪个查询？。

异步实用程序

• waitFor (Promise) 在内部重试函数，直到它停止抛出异常或超时。
• waitForElement (Promise) 重试函数或函数数组，并返回结果。
• findBy 和 findAllBy 查询是异步的，并且会一直重试，直到超时或查询成功返回；它们包装了 waitForElement。

有关更多信息，请参见 DOM 测试库异步 API。

请记住，在测试中 await 或 .then() 异步函数的结果！

触发事件

• fireEvent() 触发 DOM 事件：fireEvent(node, event)
• fireEvent.* 默认事件类型的帮助器
  • click fireEvent.click(node)
  • input fireEvent.input(node, event)
  • 查看所有支持的事件

有关更多信息，请参见 事件 API

与 DOM 测试库的区别

Vue Testing Library 返回的所有事件都是异步的，因此您应该 await 或 then() 结果。

VTL 还公开了 fireEvent.update(node, value) 事件来处理 v-model。有关更多详细信息，请参见 API。

其他

• within(node) 获取一个节点，并返回一个包含所有绑定到该节点的查询的对象：within(getByTestId("global-header")).getByText("hello")。
• configure(config) 更改全局选项：configure({testIdAttribute: 'my-test-id'})。

有关更多信息，请参见 在元素内查询 和 配置 API。

文本匹配选项

假设有以下 HTML

<div>Hello World</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'))