使用 vue-test-utils 配置过滤器

Question

我们如何使用全局应用的过滤器配置组件安装？我假设它是传递给 createLocalVue 的一些选项，但我没有在文档中看到它。

在使用全局过滤器的情况下，当运行一个套件时，我在控制台中收到以下警告：

[Vue warn]: Failed to resolve filter: filterName

wrapper.html() 处的字符串包含预先计算的值，未应用过滤器，例如

{{ 'a string' | throughFilter }}

仍然是

'a string'

过滤器在浏览器中工作，它作为一个函数自行测试，但我不想发布带有警告的代码。

Answer 1

createLocalVue returns一个Vue构造函数，其中包含filter注册过滤器的方法：

import { createLocalVue, mount } from '@vue/test-utils'

const localVue = createLocalVue()

localVue.filter('myFilter', myFilter)

mount(TestComponent, {
  localVue
})

或者，您可以在安装组件之前在 Vue 构造函数上全局安装过滤器：

import Vue from 'vue'

Vue.filter('myFilter', myFilter)

mount(TestComponent)

Answer 2

如果您像 Nuxt 那样使用它，您也可以导入您的过滤器脚本。

import "@/plugins/filters";

...your test

使用 vue-test-utils 配置过滤器

Configuring filters with vue-test-utils

vue.js

vue-component

vue-test-utils