Vue测试: shallowMount和localVue在第二次运行相同的测试时产生错误。它们不是纯函数吗？
Vue测试: shallowMount和localVue在第二次运行相同的测试时产生错误。它们不是纯函数吗？
提问于 2019-06-13 16:53:06
因此，我正在尝试为我的应用程序设置一些单元测试，我遇到了以下问题。第二次运行完全相同的测试会在shallowMount中产生错误。我可以从堆栈跟踪中看出它与v-intro自定义指令相关(参见：https://github.com/alex-oleshkevich/vue-introjs)。从我的组件模板中删除它可以解决这个错误，但我想首先了解它为什么会发生。
<template>
<div class="container" v-intro="'Hello world'" v-intro-step="1">
...
</div>
</template>
<script>
export default {
mounted() {
this.$intro().start()
}
//etc
}
</script>x import Campaign from '../campaigns';
import {createLocalVue, shallowMount} from '@vue/test-utils';
import notifyCustom from '../../objects/notifier';
import VueIntro from 'vue-introjs';
import dataProvider from '../../dataProvider';
const localVue = createLocalVue();
localVue.use(notifyCustom);
localVue.use(VueIntro);
describe('TESTING THE CAMPAIGNS CONTAINER', () => {
test('it displays campaigns', () => {
let wrapper1 = shallowMount(Campaign, {
localVue,
});
//fine
let wrapper2 = shallowMount(Campaign, {
localVue,
});
//fine
let wrapper3 = shallowMount(Campaign, {
localVue,
});
//fine
let wrapper4 = shallowMount(Campaign, {
localVue,
});
//fine
expect(wrapper1.text()).toContain('Campaign');
//test passes
});
test('renders campaigns', () => {
let wrapper5 = shallowMount(Campaign, {
localVue,
});
//error
expect(wrapper5.text()).toContain('Campaign');
});
}); 堆栈跟踪：
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in directive intro bind hook: "TypeError: Cannot read property 'tagName' of undefined"
found in
---> <Anonymous>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
TypeError: Cannot read property 'tagName' of undefined
at Array.updateDOMProps (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6970:32)
at patchVnode (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6288:62)
at updateChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6167:9)
at patchVnode (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6293:29)
at updateChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6167:9)
at patchVnode (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6293:29)
at updateChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6167:9)
at patchVnode (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6293:29)
at updateChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6167:9)
at patchVnode (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6293:29)
at updateChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6167:9)
at patchVnode (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6293:29)
at updateChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6167:9)
at patchVnode (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6293:29)
at VueComponent.patch [as __patch__] (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6454:9)
at VueComponent.Vue._update (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:3930:19)
at VueComponent.updateComponent (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4048:10)
at Watcher.get (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
at Watcher.run (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4534:22)
at flushSchedulerQueue (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4292:13)
at queueWatcher (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4381:9)
at Watcher.update (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4524:5)
at Dep.notify (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:732:13)
at Object.reactiveSetter [as timer] (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:1057:11)
at VueComponent.proxySetter [as timer] (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4611:26)
at VueComponent.ready (/home/andreas/work/proteus/node_modules/vue-introjs/dist/webpack:/default/src/timer.js:16:22)
at VueComponent.restartTimer (/home/andreas/work/proteus/node_modules/vue-introjs/dist/webpack:/default/src/timer.js:21:18)
at ping (/home/andreas/work/proteus/node_modules/vue-introjs/dist/webpack:/default/src/directives/intro.js:4:35)
at callHook$1 (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6652:7)
at _update (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6573:7)
at Array.updateDirectives (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6554:5)
at invokeCreateHooks (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6043:22)
at createElm (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5930:11)
at createChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6027:9)
at createElm (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5928:9)
at VueComponent.proxySetter [as timer] (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4611:26)
at VueComponent.ready (/home/andreas/work/proteus/node_modules/vue-introjs/dist/webpack:/default/src/timer.js:16:22)
at VueComponent.restartTimer (/home/andreas/work/proteus/node_modules/vue-introjs/dist/webpack:/default/src/timer.js:21:18)
at ping (/home/andreas/work/proteus/node_modules/vue-introjs/dist/webpack:/default/src/directives/intro.js:4:35)
at callHook$1 (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6652:7)
at _update (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6573:7)
at Array.updateDirectives (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6554:5)
at invokeCreateHooks (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6043:22)
at createElm (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5930:11)
at createChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6027:9)
at createElm (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5928:9)
at createChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6027:9)
at createElm (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5928:9)
at createChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6027:9)
at createElm (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5928:9)
at createChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6027:9)
at createElm (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5928:9)
at createChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6027:9)
at createElm (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5928:9)
at createChildren (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6027:9)
at createElm (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5928:9)
at VueComponent.patch [as __patch__] (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6449:7)
at VueComponent.Vue._update (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:3927:19)
at VueComponent.updateComponent (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4048:10)
at Watcher.get (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
at new Watcher (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4448:12)
at mountComponent (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4055:3)
at VueComponent.Object.<anonymous>.Vue.$mount (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:8386:10)
at init (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
at createComponent (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5952:9)
at createElm (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:5899:9)
at VueComponent.patch [as __patch__] (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:6449:7)
at VueComponent.Vue._update (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:3927:19)
at VueComponent.updateComponent (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4048:10)
at Watcher.get (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
at new Watcher (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4448:12)
at mountComponent (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:4055:3)
at VueComponent.Object.<anonymous>.Vue.$mount (/home/andreas/work/proteus/node_modules/vue/dist/vue.runtime.common.dev.js:8386:10)
at mount (/home/andreas/work/proteus/node_modules/@vue/test-utils/dist/vue-test-utils.js:8649:21)
at shallowMount (/home/andreas/work/proteus/node_modules/@vue/test-utils/dist/vue-test-utils.js:8677:10)
at Object.<anonymous> (/home/andreas/work/proteus/app/javascript/packs/containers/__tests__/campaigns.spec.js:49:20)
at Object.asyncJestTest (/home/andreas/work/proteus/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
at resolve (/home/andreas/work/proteus/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
at new Promise (<anonymous>)
at mapper (/home/andreas/work/proteus/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
at promise.then (/home/andreas/work/proteus/node_modules/jest-jasmine2/build/queueRunner.js:73:41)
at process._tickCallback (internal/process/next_tick.js:68:7)
Test Suites: 1 failed, 1 total
Tests: 2 failed, 2 total
Snapshots: 0 total
Time: 1.294s
Ran all test suites matching /campaign/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 回答 1
Stack Overflow用户
发布于 2019-06-14 16:33:12
这个问题让我非常恼火，但我设法隔离了这个问题，并找到了两种截然不同的解决方法。第一个是为每个测试引入一个beforeEach钩子，并使用require来加载intro插件：
let wrapper;
beforeEach(() => {
const notifyCustom = require('../../objects/notifier');
const VueIntro = require('vue-introjs');
const localVue = createLocalVue();
localVue.use(VueIntro);
localVue.use(notifyCustom);
wrapper = shallowMount(Campaign, {localVue})
});显然，关于VueIntro插件有一些状态信息。在这一点上，这到底是什么，我无法理解。尽管这个解决方案解决了这个错误，但它给我留下了一堆混乱的测试输出警告。最后，我意识到我可以简单地将component和de v-intro/v-intro step指令存根，并享受测试在快乐的沉默中变成绿色的景象。
// see: https://vue-test-utils.vuejs.org/api/config.html config.stubs['notifications'] = '<div />';
const localVue = createLocalVue();
//see https://github.com/vuejs/vue-test-utils/issues/450
// jsfiddle @ https://jsfiddle.net/smsjfz5r/4/
// solves [Vue warn]: Failed to resolve directive: intro-step
localVue.directive('intro', {
inserted: function(el) {
return;
},
});
localVue.directive('intro-step', {
inserted: function(el) {
return;
},
});
const getWrapper = () => {
return shallowMount(Campaign, {localVue});
}; 无论如何，这不是一个理想的解决方案，但至少现在我可以继续前进了。如果有人能对这些Vue插件的有状态特性有所了解，我将不胜感激……
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56576837
复制相关文章
相似问题
腾讯云开发者
