插件

插件为 Vue 测试工具的 API 添加全局级功能。这是使用自定义逻辑、方法或功能扩展 Vue 测试工具 API 的官方方式。

插件的一些用例

1. 为现有公共方法创建别名
2. 将匹配器附加到 Wrapper 实例
3. 将功能附加到 Wrapper

Wrapper 插件

使用插件

通过调用 config.plugins.VueWrapper.install() 方法安装插件。这必须在您调用 mount 之前完成。

install() 方法将接收一个 WrapperAPI 实例，其中包含实例的公共和私有属性。

// setup.js file
import { config } from '@vue/test-utils'

// locally defined plugin, see "Writing a Plugin"
import MyPlugin from './myPlugin'

// Install a plugin onto VueWrapper
config.plugins.VueWrapper.install(MyPlugin)

您可以选择传入一些选项

config.plugins.VueWrapper.install(MyPlugin, { someOption: true })

您的插件应该只安装一次。如果您使用的是 Jest，这应该在您的 Jest 配置的 setupFiles 或 setupFilesAfterEnv 文件中。

一些插件在导入时会自动调用 config.plugins.VueWrapper.install()。如果它们同时扩展多个接口，这很常见。请遵循您要安装的插件的说明。

查看 Vue 社区指南 或 awesome-vue 以获取社区贡献的插件和库的集合。

编写插件

Vue 测试工具插件只是一个接收已挂载的 VueWrapper 或 DOMWrapper 实例并可以修改它的函数。

基本插件

下面是一个简单的插件，用于添加一个方便的别名，将 wrapper.element 映射到 wrapper.$el

// setup.js
import { config } from '@vue/test-utils'

const myAliasPlugin = (wrapper) => {
  return {
    $el: wrapper.element // simple aliases
  }
}

// Call install on the type you want to extend
// You can write a plugin for any value inside of config.plugins
config.plugins.VueWrapper.install(myAliasPlugin)

在您的规范中，您将在 mount 之后能够使用您的插件。

// component.spec.js
const wrapper = mount({ template: `<h1>🔌 Plugin</h1>` })
console.log(wrapper.$el.innerHTML) // 🔌 Plugin

数据测试 ID 插件

下面的插件将 findByTestId 方法添加到 VueWrapper 实例中。这鼓励使用依赖于 Vue 组件上仅用于测试的属性的选择器策略。

用法

MyComponent.vue:

<template>
  <MyForm class="form-container" data-testid="form">
    <MyInput data-testid="name-input" v-model="name" />
  </MyForm>
</template>

MyComponent.spec.js:

const wrapper = mount(MyComponent)
wrapper.findByTestId('name-input') // returns a VueWrapper or DOMWrapper

插件的实现

import { config } from '@vue/test-utils'

const DataTestIdPlugin = (wrapper) => {
  function findByTestId(selector) {
    const dataSelector = `[data-testid='${selector}']`
    const element = wrapper.element.querySelector(dataSelector)
    return new DOMWrapper(element)
  }

  return {
    findByTestId
  }
}

config.plugins.VueWrapper.install(DataTestIdPlugin)

存根插件

config.plugins.createStubs 允许覆盖 VTU 提供的默认存根创建。

一些用例是

• 您想在存根中添加更多逻辑（例如命名插槽）
• 您想为多个组件使用不同的存根（例如来自库的存根组件）

用法

config.plugins.createStubs = ({ name, component }) => {
  return defineComponent({
    render: () => h(`custom-${name}-stub`)
  })
}

每次 VTU 从以下位置生成存根时，都会调用此函数

const wrapper = mount(Component, {
  global: {
    stubs: {
      ChildComponent: true
    }
  }
})

或

const wrapper = shallowMount(Component)

但当您显式设置存根时，不会调用它

const wrapper = mount(Component, {
  global: {
    stubs: {
      ChildComponent: { template: '<child-stub/>' }
    }
  }
})

使用 TypeScript 的插件

要将您的自定义包装器插件与 TypeScript 一起使用，您必须声明您的自定义包装器函数。因此，添加一个名为 vue-test-utils.d.ts 的文件，其中包含以下内容

import { DOMWrapper } from '@vue/test-utils';

declare module '@vue/test-utils' {
  export class VueWrapper {
    findByTestId(testId: string): DOMWrapper[];
  }
}

推荐您的插件

如果您缺少功能，请考虑编写一个插件来扩展 Vue 测试工具，并将其提交到 Vue 社区指南 或 awesome-vue 中推荐。