插件

¥Plugins

插件向 Vue Test Utils 的 API 添加全局级功能。这是使用自定义逻辑、方法或功能扩展 Vue Test Utils 的 API 的官方方法。

¥Plugins add global-level functionality to Vue Test Utils' API. This is the official way to extend Vue Test Utils' API with custom logic, methods, or functionality.

插件的一些用例：

¥Some use cases for plugins:

1. 为现有公共方法别名

   ¥Aliasing existing public methods

2. 将匹配器附加到 Wrapper 实例

   ¥Attaching matchers to the Wrapper instance

3. 将功能附加到封装器

   ¥Attaching functionality to the Wrapper

封装插件

¥Wrapper Plugin

使用插件

¥Using a Plugin

通过调用 config.plugins.VueWrapper.install() 方法挂载插件。 这必须在你致电 mount 之前完成。

¥Install plugins by calling the config.plugins.VueWrapper.install() method . This has to be done before you call mount.

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

¥The install() method will receive an instance of WrapperAPI containing both public and private properties of the instance.

// 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)

你可以选择传递一些选项：

¥You can optionally pass in some options:

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

你的插件应该挂载一次。如果你使用 Jest，这应该位于 Jest 配置的 setupFiles 或 setupFilesAfterEnv 文件中。

¥Your plugin should be installed once. If you are using Jest, this should be in your Jest config's setupFiles or setupFilesAfterEnv file.

有些插件在导入时会自动调用 config.plugins.VueWrapper.install()。如果他们同时扩展多个接口，这种情况很常见。按照你正在挂载的插件的说明进行操作。

¥Some plugins automatically call config.plugins.VueWrapper.install() when they're imported. This is common if they're extending multiple interfaces at once. Follow the instructions of the plugin you're installing.

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

¥Check out the Vue Community Guide or awesome-vue for a collection of community-contributed plugins and libraries.

编写插件

¥Writing a Plugin

Vue Test Utils 插件只是一个接收已挂载的 VueWrapper 或 DOMWrapper 实例并可以对其进行修改的函数。

¥A Vue Test Utils plugin is simply a function that receives the mounted VueWrapper or DOMWrapper instance and can modify it.

基本插件

¥Basic Plugin

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

¥Below is a simple plugin to add a convenient alias to map wrapper.element to 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 之后使用你的插件。

¥And in your spec, you'll be able to use your plugin after mount.

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

数据测试 ID 插件

¥Data Test ID Plugin

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

¥The below plugin adds a method findByTestId to the VueWrapper instance. This encourages using a selector strategy relying on test-only attributes on your Vue Components.

用法：

¥Usage:

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

插件的实现：

¥Implementation of the plugin:

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)

存根插件

¥Stubs Plugin

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

¥The config.plugins.createStubs allows to overwrite the default stub creation provided by VTU.

一些用例是：

¥Some use cases are:

• 你想要在存根中添加更多逻辑（例如命名槽）

  ¥You want to add more logic into the stubs (for example named slots)

• 你想要对多个组件使用不同的存根（例如库中的存根组件）

  ¥You want to use different stubs for multiple components (for example stub components from a library)

用法

¥Usage

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

每次 VTU 生成存根时都会调用此函数

¥This function will be called everytime VTU generates a stub either from

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

or

const wrapper = shallowMount(Component)

但当你显式设置存根时，不会被调用

¥But will not be called, when you explicit set a stub

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

将插件与 TypeScript 一起使用

¥Using the plugin with TypeScript

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

¥To use your custom wrapper plugin with TypeScript you have to declare your custom wrapper function. Therefore, add a file named vue-test-utils.d.ts with the following content:

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

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

展示你的插件

¥Featuring Your Plugin

如果你缺少功能，请考虑编写一个插件来扩展 Vue Test Utils 并将其提交到 Vue 社区指南 或 awesome-vue 上进行展示。

¥If you're missing functionality, consider writing a plugin to extend Vue Test Utils and submit it to be featured at Vue Community Guide or awesome-vue.