mercredi 12 septembre 2018

Unable to mount Element UI child component in test

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:

  1. vue create hello-world and set up with mocha unit testing
  2. yarn add element-ui
  3. In HelloWorld.vue insert the following somewhere in the template

    <el-select value="foo" placeholder="Select"> </el-select>

  4. Set example.spec.js to

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