2.4.1
linux chrome
2.5.2
https://github.com/valterbarros/trackthings
run yarn and yarn test
I'm trying to import element-ui inside my test to compile the template from my newlist component
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)
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 extendedVue
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();
});
});
Most helpful comment
Element-UI requires
theme-chalk/index.css
and babel can't compile CSS files. Create a new file calledmockStyle.js
and editjest.conf.js
as follows:FYI http://jestjs.io/docs/en/webpack#handling-static-assets