我有一个vue-cli
生成的应用,其中包含vue
v2.5.17和element-ui
v2.4.6。我正在尝试测试el-select
元素UI元素,但是在尝试安装要测试的Vue组件时,ElSelectDropdown
内部有一个el-select
元素正在破坏我的测试。将其存根也不起作用。
要复制:
vue create hello-world
并设置摩卡单元测试yarn add element-ui
在HelloWorld.vue中,将以下内容插入template
<el-select value="foo" placeholder="Select">
</el-select>
将example.spec.js
设置为
此:
import ElementUI from 'element-ui';
import { expect } from 'chai';
import { mount, createLocalVue } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';
const localVue = createLocalVue();
localVue.use(ElementUI);
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = mount(HelloWorld, {
localVue,
stubs: ['el-select-dropdown', 'ElSelectDropdown'],
propsData: { msg },
});
expect(wrapper.text()).to.include(msg);
});
});
使用yarn test:unit
运行,您将得到错误:
HelloWorld.vue
[Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property '$el' of undefined"
TypeError: Cannot read property '$el' of undefined
at VueComponent.mounted (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/element-ui/lib/element-ui.common.js:9131:1)
at callHook (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:2917:1)
at Object.insert (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4154:1)
at invokeInsertHook (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:5956:1)
at VueComponent.patch [as __patch__] (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6175:1)
at VueComponent.Vue._update (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:2656:1)
at VueComponent.updateComponent (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:2784:1)
at Watcher.get (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3138:1)
at new Watcher (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3127:1)
at mountComponent (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:2791:1)
at VueComponent../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:7995:1)
at mount (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:1)
at Context.<anonymous> (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/tests/unit/example.spec.js:13:1)
at callFn (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runnable.js:372:21)
at Test.Runnable.run (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runnable.js:364:7)
at Runner.runTest (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:455:10)
at /Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:573:12
at next (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:369:14)
at /Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:379:7
at next (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:303:14)
at Immediate.<anonymous> (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:347:5)
at runCallback (timers.js:794:20)
at tryOnImmediate (timers.js:752:5)
at processImmediate [as _immediateCallback] (timers.js:729:5)
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property '$el' of undefined"
found in
---> <ElSelectDropdown>
<Transition>
<ElSelect>
<HelloWorld> at src/components/HelloWorld.vue
<Root>
TypeError: Cannot read property '$el' of undefined
at VueComponent.mounted (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/element-ui/lib/element-ui.common.js:9131:1)
at callHook (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:2917:1)
at Object.insert (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4154:1)
at invokeInsertHook (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:5956:1)
at VueComponent.patch [as __patch__] (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6175:1)
at VueComponent.Vue._update (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:2656:1)
at VueComponent.updateComponent (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:2784:1)
at Watcher.get (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3138:1)
at new Watcher (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3127:1)
at mountComponent (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:2791:1)
at VueComponent../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:7995:1)
at mount (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:1)
at Context.<anonymous> (/Users/gabrielcheng/Desktop/hello-world2/dist/webpack:/tests/unit/example.spec.js:13:1)
at callFn (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runnable.js:372:21)
at Test.Runnable.run (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runnable.js:364:7)
at Runner.runTest (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:455:10)
at /Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:573:12
at next (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:369:14)
at /Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:379:7
at next (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:303:14)
at Immediate.<anonymous> (/Users/gabrielcheng/Desktop/hello-world2/node_modules/mocha/lib/runner.js:347:5)
at runCallback (timers.js:794:20)
at tryOnImmediate (timers.js:752:5)
at processImmediate [as _immediateCallback] (timers.js:729:5)
1) renders props.msg when passed
0 passing (328ms)
1 failing
1) HelloWorld.vue
renders props.msg when passed:
TypeError: Cannot read property '$el' of undefined
更新:看起来已经有一张票了,并且是Element-UI错误:https://github.com/ElemeFE/element/issues/12634