[Vue warn]:未能装载组件:未定义模板或呈现函数

Question

我无法解决这个问题。vue-utils测试

安装时出现问题

let wrapper=mount(cmp{localVue，百货商店路由器})；

我用于测试的代码

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 = "[e-mail]..";
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/1678https://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:someappvuedistvue.common.js:6430:28)
at patchVnode (c:someappvuedistvue.common.js:5933:62)
at updateChildren (c:someappvuedistvue.common.js:5824:9)
at patchVnode (c:someappvuedistvue.common.js:5938:29)
at updateChildren (c:someappvuedistvue.common.js:5824:9)
at patchVnode (c:someappvuedistvue.common.js:5938:29)
at VueComponent.patch [as __patch__] (c:someappvuedistvue.common.js:6098:9)
at VueComponent.Vue._update (c:someappvuedistvue.common.js:2672:19)
at VueComponent.vm._update (c:[e-mail]:4326:12)
at VueComponent.updateComponent (c:someappvuedistvue.common.js:2790:10)
at Watcher.get (c:someappvuedistvue.common.js:3144:25)
at Watcher.run (c:someappvuedistvue.common.js:3221:22)
at Watcher.update (c:someappvuedistvue.common.js:3209:10)
at Dep.notify (c:someappvuedistvue.common.js:699:13)
at Object.reactiveSetter [as showValue] (c:someappvuedistvue.common.js:1016:11)
at Proxy.proxySetter (c:someappvuedistvue.common.js:3302:26)
at callback (c:someappsrccomponentsautocompleteautocomplete.vue:193:582)
at VueComponent.invoker (c:someappvuedistvue.common.js:2029:18)
at VueComponent.Vue.$emit (c:someappvuedistvue.common.js:2540:18)
at VueComponent.setValue (c:someappbootstrap-vuesrccomponentsform-inputform-input.js:140:12)
at VueComponent.value (c:someappbootstrap-vuesrccomponentsform-inputform-input.js:128:14)
at Watcher.run (c:someappvuedistvue.common.js:3235:19)
at Watcher.update (c:someappvuedistvue.common.js:3209:10)
at Dep.notify (c:someappvuedistvue.common.js:699:13)
at Object.reactiveSetter [as value] (c:someappvuedistvue.common.js:1016:11)
at updateChildComponent (c:someappvuedistvue.common.js:2851:18)
at prepatch (c:someappvuedistvue.common.js:4146:5)
at patchVnode (c:someappvuedistvue.common.js:5927:7)
at updateChildren (c:someappvuedistvue.common.js:5824:9)
at patchVnode (c:someappvuedistvue.common.js:5938:29)
at VueComponent.patch [as __patch__] (c:someappvuedistvue.common.js:6098:9)
at VueComponent.Vue._update (c:someappvuedistvue.common.js:2672:19)
at VueComponent.vm._update (c:[e-mail]:4326:12)
at VueComponent.updateComponent (c:someappvuedistvue.common.js:2790:10)
at Watcher.get (c:someappvuedistvue.common.js:3144:25)
at Watcher.run (c:someappvuedistvue.common.js:3221:22)
at Watcher.update (c:someappvuedistvue.common.js:3209:10)
at Dep.notify (c:someappvuedistvue.common.js:699:13)
at Object.reactiveSetter [as showValue] (c:someappvuedistvue.common.js:1016:11)
at VueComponent.proxySetter [as showValue] (c:someappvuedistvue.common.js:3302:26)
at VueComponent.<anonymous> (c:someappsrccomponentsautocompleteautocomplete.vue:161:1)
at Array.<anonymous> (c:someappvuedistvue.common.js:1839:12)
at flushCallbacks (c:someappvuedistvue.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实例中，因此htey不会相互了解，您的测试组件/应用程序也无法同时使用这两个组件。