Cute matchers for vue-test-utils and Jest

Released jest-matcher-vue-test-utils

Recently, I released jest-matcher-vue-test-utils as an npm module.

I’m so happy if you put a star to the repository btw :)

Through working on many testings (I’ve written over 1k cases in this half a year apparently), found some repeating patterns and decided to consolidate as matchers.

Prop validations

The original idea is by Joseph Won who is my co-worker at Indiegogo. When we work on building Vue component, starting from thinking about interfaces (props/events).

The prop validations of Vue component doesn’t work (won’t block unintentional props) on a production build. That just puts warnings on development build, so we may miss the problem on props interfaces rather than general validators. Then I intended to have enough tests for prop validations during I’m building Vue components before many engineers work on. But that requires annoying mock for the warnings.

If you do that with Jest and vue-test-utils straightly,

console.error = jest.fn();
mount(Component, { propsData });
expect(console.error).toHaveBeenCalled();
console.error = original; // Restore with some ways

so the module provides the matcher to write above lines with a single line like:

expect(Component).toBeValidProps({ name: "required name", fullName: "Kengo Hamasaki" });`

toBeValidProps asserts that validation error happens.

Also having other handy matchers:

  • toBeValidProp : Check a single prop
  • toRequireProp : Check a prop is required
  • toHaveDefaultProp : Check a prop gives a default value
  • toBeValidPropWithTypeCheck : Check a prop passes type check
  • toBeValidPropWithCustomValidator : Check a prop passes custom validation

As mentioned above, testing prop validations can’t guarantee the component works with only expected props as Vue’s behavior. So we may need some other ways (exists npm module perhaps?) to halt component strictly by failing prop validations essentially.

Changing an existence

Here’s another repeating pattern:

const wrapper = shallowMount(Component);
expect(wrapper.contains('#that')).toBe(true);
clickSomething();
expect(wrapper.contains('#that')).toBe(false);

As a childhood friend of RSpec, I craved the way like:

expect { do_something }.to change { object.attribute }

So, created a similar matcher for Jest + vue-test-utils:

const wrapper = shallowMount(Component);
expect(clickSomething).toHide('#that');

You can pass “the action for making changes” and assert “hiding the exact content on the mounted Vue component”. Also, there’s toShow for checking “hiding -> showing” too :)

I wondered if Jest provides the general interface to check before/after of function/promise runs though.

Will add more

Recently, I face the implementation works again and seeing some other repeatings (Especially around mocking Vuex), so will update continuously.

And happy to hear other cases you’re seeing and supporting on the module ✨

Hai-iro

A Japanese duo by a product designer and a software…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store