Element: [Bug Report] Erro to import element-ui on vuejs jest test

Created on 1 Jul 2018  ·  5Comments  ·  Source: ElemeFE/element

Element UI version

2.4.1

OS/Browsers version

linux chrome

Vue version

2.5.2

Reproduction Link

https://github.com/valterbarros/trackthings

Steps to reproduce

run yarn and yarn test

What is Expected?

I'm trying to import element-ui inside my test to compile the template from my newlist component

What is actually happening?

SyntaxError: Invalid or unexpected token

> 1 | import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
  2 | import Vue from 'vue'
  3 | import NewList from '@/components/NewList'
  4 | import ElementUI from 'element-ui'; 

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
  at Object.<anonymous> (test/unit/specs/NewLists.spec.js:1:116)

Most helpful comment

Element-UI requires theme-chalk/index.css and babel can't compile CSS files. Create a new file called mockStyle.js and edit jest.conf.js as follows:

{
  moduleNameMapper: {
    // ...
    '\\.css$': '<rootDir>/__mocks__/styleMock.js'
  }
}

FYI http://jestjs.io/docs/en/webpack#handling-static-assets

All 5 comments

Element-UI requires theme-chalk/index.css and babel can't compile CSS files. Create a new file called mockStyle.js and edit jest.conf.js as follows:

{
  moduleNameMapper: {
    // ...
    '\\.css$': '<rootDir>/__mocks__/styleMock.js'
  }
}

FYI http://jestjs.io/docs/en/webpack#handling-static-assets

Maybe you need to call createLocalVue to create an extended Vue constructor then install Element-UI .

const localVue = createLocalVue()
localVue.use(ElementUI)

// ...
mount(Component, {
  localVue
})

Thank's a lot!

helped me a lot thanks !

Maybe you need to call createLocalVue to create an extended Vue constructor then install Element-UI .

const localVue = createLocalVue()
localVue.use(ElementUI)

// ...
mount(Component, {
  localVue
})

@ziyoung
I have tried your solution but still im facing click event not working, what i missed it do you have any idea?

import Vue from 'vue';
import { shallowMount, mount, createLocalVue, config } from '@vue/test-utils';
import ElementUI from 'element-ui';

import XXX from '@/components/account/signup/XXX.vue';

const localVue = createLocalVue();
localVue.use(ElementUI);

describe("XXX.vue", ()=> {
    let build!: any;

    beforeEach(()=> {
        build = () => {
            const options = { 
                mocks: {
                    $t: (key: any) => key
                }
            };
            const wrapper = shallowMount(XXX, { ...options });
            const wrapperMounted = mount(XXX, { localVue });
            return {
                wrapper,
                wrapperMounted,
                inputMounted: () => wrapperMounted.find('.el-input__inner'),
                button: () => wrapperMounted.find('el-button'),
                buttonextra: () => wrapperMounted.find('.snc_button'),
            }
        };
    });
    it("Starts on 22222222 XXX", ()=> {
        const { wrapperMounted, button, buttonextra, inputMounted } = build();
        const handleSubmit = jest.fn();
        wrapperMounted.setMethods({ handleSubmit });
        buttonextra().trigger('click');
        expect(handleSubmit).toHaveBeenCalled();
    });

});
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Leopoldthecoder picture Leopoldthecoder  ·  52Comments

Leopoldthecoder picture Leopoldthecoder  ·  101Comments

hooray picture hooray  ·  26Comments

Laipt picture Laipt  ·  32Comments

Leopoldthecoder picture Leopoldthecoder  ·  38Comments