[Vue 警告]：无法挂载组件：未定义模板或渲染函数？
Posted
技术标签:
【中文标题】[Vue 警告]：无法挂载组件：未定义模板或渲染函数？【英文标题】：[Vue warn]: Failed to mount component: template or render function not defined? 【发布时间】：2018-12-20 13:38:50 【问题描述】：我无法弄清楚这个问题。 vue-utils-test
安装时的问题
让 wrapper = mount(cmp, 本地Vue， 店铺， 路由器 );
我用于测试的代码
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)
【问题讨论】：
我有同样的问题，我无法解决这个问题。想知道你是否找到了这个的解决方案。 【参考方案1】：localVue 和 Vue 是 Vue 的独立实例，彼此不通信。
您需要为您的测试选择一个或另一个。
Vue.use(XXX) 和 localVue.use(YYY) 不会将 XXX 和 YYY 导入到同一个 Vue 实例中，因此 htey 不会相互了解，您的测试组件/应用也不能同时使用两者。
【讨论】：
以上是关于[Vue 警告]：无法挂载组件：未定义模板或渲染函数？的主要内容，如果未能解决你的问题，请参考以下文章
[Vue 警告]：无法挂载组件：Vue CLI 4 中未定义模板或渲染函数
[Vue 警告]：无法挂载组件：未定义模板或渲染函数。 -vue-simple-uploader
构建 Vue 项目时出现错误“无法安装组件：未定义模板或渲染函数”