Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
jest-matcher-vue-test-utils
Advanced tools
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 all matchers have type definition and doc 💇♂️
Get from npm:
$ npm 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 });
toShow
// error-message.vue
<template>
<div>
<p v-if="isError" class="error">message</p>
</div>
</template>
...
data: function () {
return {
isError: false
}
},
methods: {
showError () {
this.isError = true;
}
}
import Component from "./error-message.vue";
it("show error by showError", async () => {
return expect(async () => {
wrapper.vm.showError();
await wrapper.vm.$nextTick();
}).toShow(wrapper, "p.error"); // Passes
});
toHide
// error-message.vue
<template>
<div>
<p v-if="isError" class="error">message</p>
</div>
</template>
...
data: function () {
return {
isError: true
}
},
methods: {
hideError () {
this.isError = false;
}
}
import Component from "./error-message.vue";
it("show error by showError", async () => {
return expect(async () => {
wrapper.vm.hideError();
await wrapper.vm.$nextTick();
}).toHide(wrapper, "p.error"); // Passes
});
toEmit
// event.vue
<template>
<div @click="emitEvent('clicked')">
Click Me
</div>
</template>
<script>
module.exports = {
methods: {
emitEvent (e) {
this.$emit("special", e);
}
}
}
</script>
import Component from "./event.vue";
it("emits special event by click", () => {
const wrapper = shallowMount(Component);
expect(() => wrapper.trigger("click")).toEmit(wrapper, "special"); // Passes
expect(() => wrapper.trigger("click")).toEmit(wrapper, "special", "clicked"); // Passes
});
Async function is supported as well.
it("emits special event by click", async () => {
const wrapper = shallowMount(Component);
return expect(async () => triggersEventAsynchronously()).toEmit(wrapper, "special", "clicked"); // Passes
});
toHaveEmitted
// event.vue
<template>
<div @click="emitEvent('clicked')">
Click Me
</div>
</template>
<script>
module.exports = {
methods: {
emitEvent (e) {
this.$emit("special", e);
}
}
}
</script>
import Component from "./event.vue";
it("emits special event by click", () => {
const wrapper = shallowMount(Component);
wrapper.trigger("click");
expect(wrapper).toHaveEmitted("special"); // Passes
expect(wrapper).toHaveEmitted("special", "clicked"); // Passes
});
toDispatch
// click-store.vue
<template>
<div @click="dispatchStore('click')">
Click Me
</div>
</template>
<script>
module.exports = {
methods: {
dispatchStore (e) {
this.$store.dispatch('awesomeAction', e);
}
}
}
</script>
import Component from "./click-store.vue";
it("Dispatches the action on store by click", () => {
const wrapper = shallowMount(Component);
expect(() => {
wrapper.trigger("click");
}).toDispatch(wrapper, "awesomeAction"); // Passes
expect(() => {
wrapper.trigger("click");
}).toDispatch(wrapper, "awesomeAction", 'click'); // Passes
});
Async function is supported as well.
it("dispatches the action on store by click", async () => {
return expect(async () => {
dispatchEventAsynchronosly();
}).toDispatch(wrapper, "awesomeAction", 'click'); // Passes
});
toCommit
(TBD)// click-store.vue
<template>
<div @click="commitStore('click')">
Click Me
</div>
</template>
<script>
module.exports = {
methods: {
commitStore (e) {
this.$store.commit('importantMutation', e);
}
}
}
</script>
import Component from "./click-store.vue";
it("Commits the mutation on store by click", () => {
const wrapper = shallowMount(Component);
expect(() => {
wrapper.trigger("click");
}).toCommit(wrapper, "importantMutation"); // Passes
expect(() => {
wrapper.trigger("click");
}).toCommit(wrapper, "importantMutation", 'click'); // Passes
});
toHaveDispatched
// click-store.vue
<template>
<div @click="dispatchStore('click')">
Click Me
</div>
</template>
<script>
module.exports = {
methods: {
dispatchStore (e) {
this.$store.dispatch('awesomeAction', e);
}
}
}
</script>
import Component from "./click-store.vue";
import { vuexPlugin } from "jest-matcher-vue-test-utils";
it("Dispatches the action on store by click", () => {
const store = new Vuex.Store({
actions: dispatchStore() {},
plugins: [vuexPlugin()] // Requires adding plugin to use `toHaveDispatched` matcher
});
const wrapper = shallowMount(Component, { store })
wrapper.trigger("click");
expect(wrapper).toHaveDispatched("awesomeAction"); // Passes
expect(wrapper).toHaveDispatched("awesomeAction", "click"); // Passes
});
toBeValidProps
// name-require-and-fullname-is-validated-component.vue
props: {
name: {
type: String,
required: true
}
fullname: {
validator: function (val) {
return !!val && val.match(/.+\s.+/);
}
}
}
import Component from "./name-require-and-fullname-is-validated-component.vue";
it("component validates props", () => {
expect(Component).toBeValidProps({ name: "required name", fullName: "Kengo Hamasaki" }); // Passes
expect(Component).toBeValidProps({ fullName: "Kengo Hamasaki" }); // Fails
expect(Component).toBeValidProps({ name: "required name", fullName: "Kengo" }); // Fails
});
toBeValidProp
// name-require-component.vue
props: {
name: {
type: String,
required: true
}
}
import Component from "./name-require-component.vue";
it("component validates props", () => {
expect(Component).toBeValidProp("name", "Required Name"); // Passes
expect(Component).toBeValidProp("name", null); // Fails as required
expect(Component).toBeValidProp("name", 123}); // Fails as typecheck
});
toRequireProp
// name-require-component.vue
props: {
name: {
type: String,
required: true
}
}
import Component from "./name-require-component.vue";
it("component requires name prop", () => {
expect(Component).toRequireProp("name"); // Passes
expect(Component).toRequireProp("birthday"); // Fails
});
toHaveDefaultProp
// default-address-component.vue
props: {
address: {
type: String,
default: "Kitakyushu, Japan"
}
}
import Component from "./default-address-component.vue";
it("component gives default value for address prop", () => {
expect(Component).toHaveDefaultProp("address", "Kitakyushu, Japan"); // Passes
expect(Component).toHaveDefaultProp("address", "San Francisco, US"); // Fails
});
toBeValidPropWithTypeCheck
// takes-zipcode-component.vue
props: {
zipcode: {
type: String
}
}
import Component from "./takes-zipcode-component.vue";
it("component validates zipcode prop", () => {
expect(Component).toBeValidPropWithTypeCheck("zipcode", "94103"); // Passes
expect(Component).toBeValidPropWithTypeCheck("zipcode", 94103); // Fails
});
toBeValidPropWithCustomValidator
// fullname-is-validated-component.vue
props: {
fullname: {
validator: function (val) {
return !!val && val.match(/.+\s.+/);
}
}
}
import Component from "./fullname-is-validated-component.vue";
it("component validates fullname prop", () => {
expect(Component).toBeValidPropWithCustomValidator("fullname", "Kengo Hamasaki"); // Passes
expect(Component).toBeValidPropWithCustomValidator("fullname", "Kengo"); // Fails
});
We can configure the matchers. Currently accepting mountOptions property to give options for shallowMount
which is running in inside of matchers.
import vueTestUtilMatchers, { config } from "jest-matcher-vue-test-utils";
import { createLocalVue } from "@vue/test-utils";
config({
mountOptions: { localVue: createLocalVue() }
});
MIT, Copyright (c) 2018- Kengo Hamasaki
FAQs
Jest matchers to test Vue components easily
The npm package jest-matcher-vue-test-utils receives a total of 59 weekly downloads. As such, jest-matcher-vue-test-utils popularity was classified as not popular.
We found that jest-matcher-vue-test-utils demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.