如何避免自定义指令的 [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 也将防止污染全局 vue 实例并有助于防止在其他测试用例中产生副作用。