I have a vue-cli generated app with vue v2.5.17 and element-ui v2.4.6. I am trying to test the el-select Element UI element but there's an ElSelectDropdown element that is internal to el-select that is breaking my test when I try to mount the Vue component I'm testing. Stubbing it out doesn't work either.
To reproduce:
vue create hello-worldand set up with mocha unit testingyarn add element-ui-
In HelloWorld.vue insert the following somewhere in the
template<el-select value="foo" placeholder="Select"> </el-select> -
Set
example.spec.jsto
this:
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);
});
});
Run with yarn test:unit and you will get the error:
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
Aucun commentaire:
Enregistrer un commentaire