跳到主要内容

API

Vue Testing Library 重新导出了 DOM Testing Library 的所有内容。

它还暴露了这些方法：

render(Component, options)​

render 函数是 Vue Testing Library 中渲染组件的唯一方法。

它最多接收 2 个参数，并返回一个带有一些辅助方法的对象。

function render(Component, options, callbackFunction) {
  return {
    ...DOMTestingLibraryQueries,
    container,
    baseElement,
    debug(element),
    unmount,
    html,
    emitted,
    rerender(props),
  }
}

参数​

Component​

要测试的有效 Vue 组件。

Options​

一个包含额外信息的对象，将被传递给 @vue/test-utils 的 mount。

此外，也可以提供以下选项：

store (Object | Store)​

一个Vuex存储的对象定义。如果提供一个 store 对象， Vue Testing Library 将导入并配置一个 Vuex 存储。如果传递了一个实例化的 Vuex 存 储，它将被使用。

routes (Array | VueRouter)​

一组用于Vue Router 的路由。如果提供了 routes，该 库将导入并配置 Vue Router。如果传递了一个实例化的 Vue Router，它将被使用。

props (Object)​

它将与 propsData 合并。

container (HTMLElement)​

默认情况下，Vue Testing Library 会创建一个 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，则默认为 container的值，否则默认为 document.body。 baseElement 被用作查询的基础元素，也是你使用 debug() 时打印的内容。

render 返回结果​

render 方法返回一个有几个属性的对象。

...queries​

render 最重要的特点是，DOM Testing Library的查询会自动返 回，其第一个参数绑定到 baseElement，默认为 document.body。

查看查询的完整列表。

const {getByLabelText, queryAllByTestId} = render(Component)

container​

渲染后的 Vue 组件所包含的 DOM 节点。默认情况下，它是一个 div。这是一个普通的 DOM 节点，所以你可以调用 container.querySelector 等来检查子元素。

提示：要获得你的渲染元素的根元素，可以使用 container.firstChild。

🚨 如果你发现自己使用 container 来查询渲染的元素，那么你应该重新考虑一下! 其 它的查询被设计成对你正在测试的组件的变化有更强的适应性。避免使用容器来查询元素 !

baseElement​

包含的 DOM 节点，你的 Vue 组件在 container 中被渲染。如果你没有在 render 的 选项中指定 baseElement ，它将默认为 document.body。

当你想测试的组件在容器 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 Testing Library。

unmount()​

@vue/test-utils destroy 的别名.

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 控制的输入。它更新 input/select/textarea 的内部值，同时发出 适当的本地事件。

请看 v-model 示例测试 中的一个 update 运行实例。

cleanup​

解除用 render 挂载的 Vue 树。

如果你使用的是支持 afterEach hook 的环境（如 Jest），就没有必要手动调用清理 。Vue Testing Library 会帮你处理。

如果在调用 render 时没有调用 cleanup，可能会导致内存泄漏和测试不幂等（这可能会 导致测试中难以调试的错误）。