Как избежать [Vue warn] для пользовательской директивы?

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 и поможет предотвратить побочные эффекты в других тестовых случаях.