Невозможно смонтировать дочерний компонент Element UI в тесте - PullRequest
Новая
       34

Невозможно смонтировать дочерний компонент Element UI в тесте

0 голосов
/ 13 сентября 2018

У меня есть сгенерированное приложение vue-cli с vue v2.5.17 и element-ui v2.4.6. Я пытаюсь протестировать элемент пользовательского интерфейса el-select Element, но есть элемент ElSelectDropdown, который является внутренним по отношению к el-select, который нарушает мой тест, когда я пытаюсь смонтировать компонент Vue, который тестирую. Заглушка тоже не работает.

Воспроизвести:

  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

...