如何避免自定義指令的 [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 實例，並有助於防止在其他測試用例中產生副作用。