API
Vue 测试库 重新导出 DOM 测试库 中的所有内容。
它还公开了以下方法
render(Component, options)
render 函数是 Vue 测试库中渲染组件的唯一方法。
它最多接受 2 个参数并返回一个包含一些辅助方法的对象。
function render(Component, options) {
return {
...DOMTestingLibraryQueries,
container,
baseElement,
debug(element),
unmount,
html,
emitted,
rerender(props),
}
}
参数
Component
要测试的有效 Vue 组件。
Options
包含要传递给 @vue/test-utils 的额外信息的 对象 挂载。
此外，还可以提供以下选项
store (Object | Store)
一个 Vuex 存储的 对象 定义。如果提供 store 对象，Vue 测试库 将导入并配置 Vuex 存储。如果传递的是实例化的 Vuex 存储，则将使用它。
routes (Array | VueRouter)
一组 Vue 路由器 路由。如果提供 routes，该库将导入并配置 Vue 路由器。如果传递的是实例化的 Vue 路由器，则将使用它。
props (Object)
它将与 propsData 合并。
container (HTMLElement)
默认情况下，Vue 测试库 将创建一个 div 并将其附加到 baseElement。这是您的组件将被渲染的位置。如果您通过此选项提供自己的 HTMLElement 容器，则它不会自动附加到 baseElement。
例如：如果您正在对 tablebody 元素进行单元测试，它不能是 div 的子元素。在这种情况下，您可以将 table 指定为渲染 container。
const table = document.createElement('table')
const {container} = render(TableBody, {
props,
container: document.body.appendChild(table),
})
baseElement (HTMLElement)
如果指定了 container，则它将默认为此，否则它将默认设置为 document.body。baseElement 用作查询的基础元素，以及在使用 debug() 时打印的内容。
render 结果
render 方法返回一个具有以下几个属性的对象
...查询
render 最重要的功能是，来自 DOM 测试库 的查询会自动返回，它们的第一个参数绑定到 baseElement，默认设置为 document.body。
有关完整列表，请参阅 查询。
const {getByLabelText, queryAllByTestId} = render(Component)
container
渲染的 Vue 组件的包含 DOM 节点。默认情况下它是一个 div。这是一个普通的 DOM 节点，因此您可以调用 container.querySelector 等来检查其子节点。
提示：要获取渲染元素的根元素，请使用
container.firstChild。
🚨 如果您发现自己使用
container来查询渲染的元素，那么您应该重新考虑！其他查询旨在更能适应对您正在测试的组件进行的更改。避免使用container来查询元素！
baseElement
在 container 中渲染 Vue 组件的包含 DOM 节点。如果您没有在 render 的选项中指定 baseElement，则它将默认设置为 document.body。
当您要测试的组件在 container div 之外渲染某些内容时，这很有用，例如，当您要对门户组件进行快照测试时，门户组件直接在 body 中渲染其 HTML。
注意：
render返回的查询会查看baseElement，因此您可以使用查询来测试您的门户组件，而无需baseElement。
debug(element)
此方法是 console.log(prettyDOM(element)) 的快捷方式。
import {render} from '@testing-library/vue'
const HelloWorldComponent = {
template: `<h1>Hello World</h1>`,
}
const {debug} = render(HelloWorldComponent)
debug()
// <div>
// <h1>Hello World</h1>
// </div>
这是一个围绕 prettyDOM 的简单包装器，它也是公开的，来自 DOM 测试库。
unmount()
@vue/test-utils 的别名 销毁。
html()
@vue/test-utils 的别名 html。
emitted()
@vue/test-utils 的别名 emitted。
rerender(props)
@vue/test-utils 的别名 setProps。
它通过 Promise 返回，因此您可以 await rerender(...)。
fireEvent
由于 Vue 在重新渲染期间异步应用 DOM 更新，因此 fireEvent 工具被重新导出为 async 函数。为了确保 DOM 能够在测试中响应事件而正确更新，建议始终 await fireEvent。
await fireEvent.click(getByText('Click me'))
此外，Vue 测试库公开了两种有用的方法
touch(elem)
它同时触发 focus() 和 blur() 事件。
await fireEvent.touch(getByLabelText('username'))
// Same as:
await fireEvent.focus(getByLabelText('username'))
await fireEvent.blur(getByLabelText('username'))
update(elem, value)
正确处理由 v-model 控制的输入。它更新输入/选择/文本区域的内部值，同时发出相应的原生事件。
在 v-model 示例测试 中查看 update 的工作示例。
cleanup
卸载使用 render 挂载的 Vue 树。
如果您的测试框架（例如 mocha、Jest 或 Jasmine）将全局
afterEach()函数注入测试环境，则会自动调用它。否则，您需要在每个测试后调用cleanup()。
在调用 render 时未能调用 cleanup 可能会导致内存泄漏以及非幂等测试（这会导致测试中难以调试的错误）。