我无法弄清楚这个问题。 vue-utils-test
安装时出现问题
让包装器= 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 = "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)
答案 0 :(得分：0)
c.fill = GridBagConstraints.HORIZONTAL;和localVue是Vue的单独实例，并且彼此不通讯。
您需要选择一个进行测试。
执行Vue和Vue.use(XXX)不会将XXX和YYY导入相同的Vue实例，因此htey不会彼此了解，您的测试组件/应用也无法使用两者。 / p>