如何避免自定义指令的 [Vue 警告]？

Question

我创建了一个自定义指令，它运行良好，但是当我对使用此自定义指令的组件运行 mocha 测试时，我收到此警告消息[Vue warn]: Failed to resolve directive: scroll-text ，请告诉我如何解决这个问题

测试文件：

 import { shallowMount } from "@vue/test-utils" import { scrollText } from "z-common/services" import ZSourcesList from "./ZSourcesList" Vue.use(scrollText) const stubs = [ "z-text-field", "v-progress-circular", "v-icon", "z-btn" ] describe("ZSourcesList.vue", () => { const sources = [] for (let i = 0; i < 20; i++) { sources.push({ field: "source", // format numbers to get 2 diggit number with leading zero 1 -> 01 value: `cluster-${i.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}`, __typename: "SuggestV2Result" }) } it("displays 'No matching sources found' if there are no sources", () => { const wrapper = shallowMount(ZSourcesList, { mocks: { $apollo: { queries: { suggestions: { loading: false, }, }, }, }, stubs, sync: false, data() { return { suggestions: [], } }, }) expect(wrapper.find(".notification.z-note")).to.exist }) })

Answer 1

尝试在本地 vue 实例上注册您的自定义指令，然后安装到该本地 vue 实例。

 import { shallowMount, createLocalVue } from "@vue/test-utils" import { scrollText } from "z-common/services" import ZSourcesList from "./ZSourcesList" const localVue = createLocalVue() localVue.use(scrollText) // Register the plugin to local vue const stubs = [ "z-text-field", "v-progress-circular", "v-icon", "z-btn" ] describe("ZSourcesList.vue", () => { const sources = [] for (let i = 0; i < 20; i++) { sources.push({ field: "source", // format numbers to get 2 diggit number with leading zero 1 -> 01 value: `cluster-${i.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}`, __typename: "SuggestV2Result" }) } it("displays 'No matching sources found' if there are no sources", () => { const wrapper = shallowMount(ZSourcesList, { mocks: { $apollo: { queries: { suggestions: { loading: false, }, }, }, }, localVue, // Mount this component to localVue stubs, sync: false, data() { return { suggestions: [], } }, }) expect(wrapper.find(".notification.z-note")).to.exist }) })

在测试用例中使用本地 vue 实例而不是全局也将防止污染全局 vue 实例，并有助于防止在其他测试用例中产生副作用。