DEV Community

Kengo Hamasaki
Kengo Hamasaki

Posted on

Published jest-matcher-vue-test-utils

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.

GitHub logo hmsk / jest-matcher-vue-test-utils

✨ Cute jest matchers to test Vue components with vue-test-utils

jest-matcher-vue-test-utils

npm GitHub Workflow Status

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();
});
Enter fullscreen mode Exit fullscreen mode

becomes

it("Emits 'select' event by clicking PrimaryButton", () => {
  const wrapper = shallowMount(Component);
  expect(() => {
    wrapper.find(PrimaryButton).vm.$emit("click");
  }).toEmit(wrapper, "select");
});
Enter fullscreen mode Exit fullscreen mode

And…

Get from npm:

$ npm install -D jest-matcher-vue-test-utils
Enter fullscreen mode Exit fullscreen mode

or

$ yarn install -D jest-matcher-vue-test-utils
Enter fullscreen mode Exit fullscreen mode

Then, register matchers on your jest process:

import vueTestUtilMatchers from "jest-matcher-vue-test-utils";
expect.extend({ ...vueTestUtilMatchers });
Enter fullscreen mode Exit fullscreen mode

Now, you can use:

expect(() => wrapper.vm.showError()).toShow(wrapper, "p.error");
Enter fullscreen mode Exit fullscreen mode
expect(() => wrapper.vm.hideError()).toHide(wrapper, "p.error");`
Enter fullscreen mode Exit fullscreen mode
expect(Component).toBeValidProps({ name: "required name", fullName: "Kengo Hamasaki" });`
Enter fullscreen mode Exit fullscreen mode
expect(Component).toBeValidProp("name", "Required Name");`
Enter fullscreen mode Exit fullscreen mode
expect(Component).toRequireProp("name");`
Enter fullscreen mode Exit fullscreen mode
expect(Component).toHaveDefaultProp("address", "Kitakyushu, Japan");`
Enter fullscreen mode Exit fullscreen mode
expect(Component).toBeValidPropWithTypeCheck("zipcode", "94103");`
Enter fullscreen mode Exit fullscreen mode
expect(Component).toBeValidPropWithCustomValidator("fullname", "Kengo Hamasaki");`
Enter fullscreen mode Exit fullscreen mode

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)