Published jest-matcher-vue-test-utils

Kengo Hamasaki — Wed, 03 Oct 2018 08:24:32 +0000

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…

View on GitHub

Get from npm:

$ npm install -D jest-matcher-vue-test-utils

$ 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 :)

DEV Community: Kengo Hamasaki

Published jest-matcher-vue-test-utils

The main thing;

hmsk / jest-matcher-vue-test-utils

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

jest-matcher-vue-test-utils