babel-plugin-component icon indicating copy to clipboard operation
babel-plugin-component copied to clipboard

在使用babel-plugin-component做按需引入element-ui,jest单元测试在引入element-ui组件的时候报错

Open yujie0707 opened this issue 6 years ago • 2 comments

import { shallowMount, createLocalVue } from '@vue/test-utils';

import Vue from 'vue';
import { Button } from 'element-ui'; // 执行到这一行的时候出错
import Country from '@/components/a.vue';


const localVue = createLocalVue();


localVue.use(Button);

Vue.prototype.$ELEMENT = { size: 'small' };


const wrapper = shallowMount(Country, {
  localVue,
  propsData: {
    visible: true,
  },
});

describe('选人组件', () => {
  const { vm } = wrapper;
  it('currentLeaf', () => {
    expect(vm.currentLeaf).toBe(undefined);
  });
});

报错内容如下

image

// babel.config.js
// 当注释掉plugins配置,上述内容才不报错
module.exports = {
  presets: [
    '@vue/app',
  ],
  // plugins: [
  //   [
  //     'component',
  //     {
  //       libraryName: 'element-ui',
  //       styleLibraryName: 'theme-chalk',
  //     },
  //   ],
  // ],
};

yujie0707 avatar Nov 14 '19 08:11 yujie0707

大佬,问题解决没?

tangtao007 avatar Feb 19 '20 02:02 tangtao007

Try mock .css file by jest-transform-stub:

module.exports = {
  ...
  moduleNameMapper: {
    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    ...  
  }
}

peterhpchen avatar Jan 16 '21 17:01 peterhpchen