vue.js - [Vue 警告] : Failed to mount component: template or render function not defined?

Question

我无法弄清楚这个问题。 vue-utils-测试

安装时的问题

let wrapper = mount(cmp, { localVue, store, router });

我用来测试的代码

import Vue from "vue";
import Vuex from "vuex";
import Router from "vue-router";
import BootstrapVue from "bootstrap-vue";
import Loading from "vue-loading-overlay";
import {
    serviceURL
} from "../src/util/config";
import {
    shallowMount,
    mount,
    createLocalVue
} from '@vue/test-utils'
import axios from 'axios'

jest.mock('axios', () => ({
    post: jest.fn(() => Promise.resolve({
        data: [3]
    }))
}))
// add the 2 lines below
// const localVue = createLocalVue();
// localVue.use(Vuex);
Vue.use(Vuex);
Vue.use(Router);
Vue.use(Loading);

Vue.use(BootstrapVue);
import AddEditPerson from "../src/components/AddEditPerson/AddEditPerson.vue";
const localVue = createLocalVue();
localVue.use(Vuex);

describe("AddPerson.test.js", () => {
    let cmp, store, actions, router;
    beforeEach(() => {
        cmp = Vue.extend(AddEditPerson);
        store = new Vuex.Store({
            state: {},
            actions
        });
        router = new Router({
            routes: []
        });
    });


    it("submit the data of person without any data", () => {
        // I forgot to add localVue and store
        let wrapper = shallowMount(AddEditPerson, {
            localVue,
            store,
            router,
            stubs: {"b-tab": true}
        });
        let result = wrapper.vm.savePerson();
        // change expecting a result to expect the action to be called.
        expect(wrapper.vm.validateCompanyMsg).toEqual("Company is required");
        expect(wrapper.vm.validateEmailMsg).toEqual("Email is required");
        expect(wrapper.vm.hasFirstName).toEqual(false);
        expect(wrapper.vm.hasLastName).toEqual(false);
    });

    it("validated the email is incorrect", () => {
        // I forgot to add localVue and store
        let wrapper = shallowMount(AddEditPerson, {
            localVue,
            store,
            router,
            stubs: {"b-tab": true}
        });
        wrapper.vm.Person.Email = "himmsharma.99@gma.co..";
        let result = wrapper.vm.savePerson();
        // change expecting a result to expect the action to be called.
        expect(wrapper.vm.validateEmailMsg).toEqual("Enter a valid email address");

    });
    it("validated the email is not numeric", () => {
        // I forgot to add localVue and store
        let wrapper = mount(cmp, {
            localVue,
            store,
            router
        });
        const option = wrapper.find("input[type='checkbox']");
        option.setChecked(true);

        Vue.nextTick(() => {
            expect(wrapper.vm.Person.TextOnly).toEqual("Y");
            //  done();
        });
        console.log(option);
    });

    it("Check for membership is loaded", () => {
        let check = false;
        let wrapper = shallowMount(AddEditPerson, {
            localVue,
            store,
            router,
            stubs: {"b-tab": true}
        });
        if(wrapper.vm.memberships.length > 0){
            check = true;
        }
        expect(check).toEqual(true);
    });

    it("Clicking on membership will active that tab", () => {
        let check = false;
        let wrapper = shallowMount(AddEditPerson, {
            localVue,
            store,
            router,
            stubs: {"b-tab": true}
        });
        if(wrapper.vm.memberships.length > 0){
            check = true;
        }
        expect(check).toEqual(true);
    });

    it("Check for membership json", () => {
        let check = false;
        let wrapper = shallowMount(AddEditPerson, {
            localVue,
            store,
            router,
            stubs: {"b-tab": true}
        });
        if(wrapper.vm.memberships.length > 0){
            check = true;
        }
        expect(check).toEqual(true);
    });

    // it("has the expected html structure", () => {
    //     let wrapper = mount(AddEditPerson, {
    //         localVue,
    //         store,
    //         router,
    //         stubs:['b-formInput','b-tab']
    //     });
    //     expect(wrapper.vm.$el).toMatchSnapshot();
    // });
});

我看到很多链接对我不起作用。 https://github.com/bootstrap-vue/bootstrap-vue/issues/1678 https://github.com/vuejs/vue-test-utils/issues/450

console.error node_modules/vue/dist/vue.common.js:593
  [Vue warn]: Failed to mount component: template or render function not defined.

  found in

  ---> <Taxonomy>
         <BTab>
           <BTabs>
             <AddEditPerson>
               <Root>
console.log test/addEditPerson.test.js:109
  Wrapper { version: 2.5 }
console.error node_modules/vue/dist/vue.common.js:593
  [Vue warn]: Error in event handler for "input": "TypeError: Cannot read property '_transitionClasses' of undefined"

  found in

  ---> <BFormInput>
         <Autocomplete>
           <BTab>
             <BTabs>
               <AddEditPerson>
                 <Root>
console.error node_modules/vue/dist/vue.common.js:1743
  TypeError: Cannot read property '_transitionClasses' of undefined
      at Array.updateClass (c:\someapp\vue\dist\vue.common.js:6430:28)
      at patchVnode (c:\someapp\vue\dist\vue.common.js:5933:62)
      at updateChildren (c:\someapp\vue\dist\vue.common.js:5824:9)
      at patchVnode (c:\someapp\vue\dist\vue.common.js:5938:29)
      at updateChildren (c:\someapp\vue\dist\vue.common.js:5824:9)
      at patchVnode (c:\someapp\vue\dist\vue.common.js:5938:29)
      at VueComponent.patch [as __patch__] (c:\someapp\vue\dist\vue.common.js:6098:9)
      at VueComponent.Vue._update (c:\someapp\vue\dist\vue.common.js:2672:19)
      at VueComponent.vm._update (c:\someapp\@vue\test-utils\dist\vue-test-utils.js:4326:12)
      at VueComponent.updateComponent (c:\someapp\vue\dist\vue.common.js:2790:10)
      at Watcher.get (c:\someapp\vue\dist\vue.common.js:3144:25)
      at Watcher.run (c:\someapp\vue\dist\vue.common.js:3221:22)
      at Watcher.update (c:\someapp\vue\dist\vue.common.js:3209:10)
      at Dep.notify (c:\someapp\vue\dist\vue.common.js:699:13)
      at Object.reactiveSetter [as showValue] (c:\someapp\vue\dist\vue.common.js:1016:11)
      at Proxy.proxySetter (c:\someapp\vue\dist\vue.common.js:3302:26)
      at callback (c:\someapp\src\components\autocomplete\autocomplete.vue:193:582)
      at VueComponent.invoker (c:\someapp\vue\dist\vue.common.js:2029:18)
      at VueComponent.Vue.$emit (c:\someapp\vue\dist\vue.common.js:2540:18)
      at VueComponent.setValue (c:\someapp\bootstrap-vue\src\components\form-input\form-input.js:140:12)
      at VueComponent.value (c:\someapp\bootstrap-vue\src\components\form-input\form-input.js:128:14)
      at Watcher.run (c:\someapp\vue\dist\vue.common.js:3235:19)
      at Watcher.update (c:\someapp\vue\dist\vue.common.js:3209:10)
      at Dep.notify (c:\someapp\vue\dist\vue.common.js:699:13)
      at Object.reactiveSetter [as value] (c:\someapp\vue\dist\vue.common.js:1016:11)
      at updateChildComponent (c:\someapp\vue\dist\vue.common.js:2851:18)
      at prepatch (c:\someapp\vue\dist\vue.common.js:4146:5)
      at patchVnode (c:\someapp\vue\dist\vue.common.js:5927:7)
      at updateChildren (c:\someapp\vue\dist\vue.common.js:5824:9)
      at patchVnode (c:\someapp\vue\dist\vue.common.js:5938:29)
      at VueComponent.patch [as __patch__] (c:\someapp\vue\dist\vue.common.js:6098:9)
      at VueComponent.Vue._update (c:\someapp\vue\dist\vue.common.js:2672:19)
      at VueComponent.vm._update (c:\someapp\@vue\test-utils\dist\vue-test-utils.js:4326:12)
      at VueComponent.updateComponent (c:\someapp\vue\dist\vue.common.js:2790:10)
      at Watcher.get (c:\someapp\vue\dist\vue.common.js:3144:25)
      at Watcher.run (c:\someapp\vue\dist\vue.common.js:3221:22)
      at Watcher.update (c:\someapp\vue\dist\vue.common.js:3209:10)
      at Dep.notify (c:\someapp\vue\dist\vue.common.js:699:13)
      at Object.reactiveSetter [as showValue] (c:\someapp\vue\dist\vue.common.js:1016:11)
      at VueComponent.proxySetter [as showValue] (c:\someapp\vue\dist\vue.common.js:3302:26)
      at VueComponent.<anonymous> (c:\someapp\src\components\autocomplete\autocomplete.vue:161:1)
      at Array.<anonymous> (c:\someapp\vue\dist\vue.common.js:1839:12)
      at flushCallbacks (c:\someapp\vue\dist\vue.common.js:1760:14)
      at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Answer 1

localVue 和 Vue 是 Vue 的独立实例，彼此不通信。

您需要为测试选择一个或另一个。

执行 Vue.use(XXX) 和 localVue.use(YYY) 不会将 XXX 和 YYY 导入同一个 Vue 实例，因此他们不知道您的测试组件/应用程序也不能同时使用两者。