How to avoid [Vue warn] for custom directive?

Question

I created a custom directive and it's working good, but when I run the mocha test for the component where I use this custom directive I receive this warning message [Vue warn]: Failed to resolve directive: scroll-text , tell me please how to fix that

test file:

 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

Try registering your custom directive on a local vue instance and then mounting to that local vue instance.

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

Using a local vue instance instead of the global in test cases will also prevent polluting the global vue instance and help to prevent side effects in other test cases.