Hello, dev.to!
I heard here's the best place to share what I made.
Usually, I'm writing the articles on Medium. But wondering if I move to dev.to.
The main thing;
Published cute matchers for Jest + Vue Test Utils as npm module. You can use nice matchers by installing this npm and setup.
hmsk / jest-matcher-vue-test-utils
β¨ Cute jest matchers to test Vue components with vue-test-utils
jest-matcher-vue-test-utils
Cute matchers for Jest to test Vue components with Vue Test Utils.
You can write tests for Vue component/store intuitively
it("Emits 'select' event by clicking PrimaryButton", () => {
const wrapper = shallowMount(Component);
expect(wrapper.emitted().select).toBeUndefined();
wrapper.find(PrimaryButton).vm.$emit("click");
expect(wrapper.emitted().select[0]).toBeTruthy();
});
becomes
it("Emits 'select' event by clicking PrimaryButton", () => {
const wrapper = shallowMount(Component);
expect(() => {
wrapper.find(PrimaryButton).vm.$emit("click");
}).toEmit(wrapper, "select");
});
Andβ¦
Get from npm:
$ npm install -D jest-matcher-vue-test-utils
or
$ yarn install -D jest-matcher-vue-test-utils
Then, register matchers on your jest process:
import vueTestUtilMatchers from "jest-matcher-vue-test-utils";
expect.extend({ ...vueTestUtilMatchers });
Now, you can use:
expect(() => wrapper.vm.showError()).toShow(wrapper, "p.error");
expect(() => wrapper.vm.hideError()).toHide(wrapper, "p.error");`
expect(Component).toBeValidProps({ name: "required name", fullName: "Kengo Hamasaki" });`
expect(Component).toBeValidProp("name", "Required Name");`
expect(Component).toRequireProp("name");`
expect(Component).toHaveDefaultProp("address", "Kitakyushu, Japan");`
expect(Component).toBeValidPropWithTypeCheck("zipcode", "94103");`
expect(Component).toBeValidPropWithCustomValidator("fullname", "Kengo Hamasaki");`
Currently there're only 8 matchers, but happy to hear your idea, annoying case for Jest + Vue Test Utils!
As my home is RSpec, so any feedback about matchers as English is totally helpful too :)
Top comments (0)