无法在测试中安装Element UI子组件

时间:2018-09-12 23:51:17

标签: testing vue.js mocha vue-cli element-ui

我有一个vue-cli生成的应用,其中包含vue v2.5.17和element-ui v2.4.6。我正在尝试测试el-select元素UI元素,但是在尝试安装要测试的Vue组件时,ElSelectDropdown内部有一个el-select元素正在破坏我的测试。将其存根也不起作用。

要复制:

  1. vue create hello-world并设置摩卡单元测试
  2. yarn add element-ui
  3. 在HelloWorld.vue中,将以下内容插入template

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

  4. 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

0 个答案:

没有答案