1// error-message.vue
2<template>
3  <div>
4    <p v-if="isError" class="error">message</p>
5  </div>
6</template>
7
8...
9
10data: function () {
11  return {
12    isError: false
13  }
14},
15methods: {
16  showError () {
17    this.isError = true;
18  }
19}

1import Component from "./error-message.vue";
2
3it("show error by showError", async () => {
4  return expect(async () => {
5    wrapper.vm.showError();
6    await wrapper.vm.$nextTick();
7  }).toShow(wrapper, "p.error"); // Passes
8});

1// error-message.vue
2<template>
3  <div>
4    <p v-if="isError" class="error">message</p>
5  </div>
6</template>
7
8...
9
10data: function () {
11  return {
12    isError: true
13  }
14},
15methods: {
16  hideError () {
17    this.isError = false;
18  }
19}

1import Component from "./error-message.vue";
2
3it("show error by showError", async () => {
4  return expect(async () => {
5    wrapper.vm.hideError();
6    await wrapper.vm.$nextTick();
7  }).toHide(wrapper, "p.error"); // Passes
8});

1// event.vue
2<template>
3  <div @click="emitEvent('clicked')">
4    Click Me
5  </div>
6</template>
7
8<script>
9module.exports = {
10  methods: {
11    emitEvent (e) {
12      this.$emit("special", e);
13    }
14  }
15}
16</script>

1import Component from "./event.vue";
2
3it("emits special event by click", () => {
4  const wrapper = shallowMount(Component);
5  expect(() => wrapper.trigger("click")).toEmit(wrapper, "special"); // Passes
6  expect(() => wrapper.trigger("click")).toEmit(wrapper, "special", "clicked"); // Passes
7});

Async function is supported as well.

1it("emits special event by click", async () => {
2  const wrapper = shallowMount(Component);
3  return expect(async () => triggersEventAsynchronously()).toEmit(wrapper, "special", "clicked"); // Passes
4});

toEmitOnRoot inspects whether the event is emitted on $root of Vue instance.

1// event.vue
2<template>
3  <div @click="emitEvent('clicked')">
4    Click Me
5  </div>
6</template>
7
8<script>
9module.exports = {
10  methods: {
11    emitEvent (e) {
12      this.$emit("special", e);
13    }
14  }
15}
16</script>

1import Component from "./event.vue";
2
3it("emits special event by click", () => {
4  const wrapper = shallowMount(Component);
5  wrapper.trigger("click");
6  expect(wrapper).toHaveEmitted("special"); // Passes
7  expect(wrapper).toHaveEmitted("special", "clicked"); // Passes
8});

toHaveEmittedOnRoot inspects whether the event is emitted on $root of Vue instance.

1// click-store.vue
2<template>
3  <div @click="dispatchStore('click')">
4    Click Me
5  </div>
6</template>
7
8<script>
9module.exports = {
10  methods: {
11    dispatchStore (e) {
12      this.$store.dispatch('awesomeAction', e);
13    }
14  }
15}
16</script>

1import Component from "./click-store.vue";
2
3it("Dispatches the action on store by click", () => {
4  const wrapper = shallowMount(Component);
5  expect(() => {
6    wrapper.trigger("click");
7  }).toDispatch(wrapper, "awesomeAction"); // Passes
8
9  expect(() => {
10    wrapper.trigger("click");
11  }).toDispatch(wrapper, "awesomeAction", 'click'); // Passes
12});

Async function is supported as well.

1it("dispatches the action on store by click", async () => {
2  return expect(async () => {
3    dispatchEventAsynchronosly();
4  }).toDispatch(wrapper, "awesomeAction", 'click'); // Passes
5});

1// click-store.vue
2<template>
3  <div @click="commitStore('click')">
4    Click Me
5  </div>
6</template>
7
8<script>
9module.exports = {
10  methods: {
11    commitStore (e) {
12      this.$store.commit('importantMutation', e);
13    }
14  }
15}
16</script>

1import Component from "./click-store.vue";
2
3it("Commits the mutation on store by click", () => {
4  const wrapper = shallowMount(Component);
5  expect(() => {
6    wrapper.trigger("click");
7  }).toCommit(wrapper, "importantMutation"); // Passes
8
9  expect(() => {
10    wrapper.trigger("click");
11  }).toCommit(wrapper, "importantMutation", 'click'); // Passes
12});

1// click-store.vue
2<template>
3  <div @click="dispatchStore('click')">
4    Click Me
5  </div>
6</template>
7
8<script>
9module.exports = {
10  methods: {
11    dispatchStore (e) {
12      this.$store.dispatch('awesomeAction', e);
13    }
14  }
15}
16</script>

1import Component from "./click-store.vue";
2import { vuexPlugin } from "jest-matcher-vue-test-utils";
3
4it("Dispatches the action on store by click", () => {
5  const store = new Vuex.Store({
6    actions: dispatchStore() {},
7    plugins: [vuexPlugin()] // Requires adding plugin to use `toHaveDispatched` matcher
8  });
9
10  const wrapper = shallowMount(Component, { store })
11  wrapper.trigger("click");
12  expect(wrapper).toHaveDispatched("awesomeAction"); // Passes
13  expect(wrapper).toHaveDispatched("awesomeAction", "click"); // Passes
14});

1// name-require-and-fullname-is-validated-component.vue
2props: {
3  name: {
4    type: String,
5    required: true
6  }
7  fullname: {
8    validator: function (val) {
9      return !!val && val.match(/.+\s.+/);
10    }
11  }
12}

1import Component from "./name-require-and-fullname-is-validated-component.vue";
2
3it("component validates props", () => {
4  expect(Component).toBeValidProps({ name: "required name", fullName: "Kengo Hamasaki" }); // Passes
5  expect(Component).toBeValidProps({ fullName: "Kengo Hamasaki" }); // Fails
6  expect(Component).toBeValidProps({ name: "required name", fullName: "Kengo" }); // Fails
7});

1// name-require-component.vue
2props: {
3  name: {
4    type: String,
5    required: true
6  }
7}

1import Component from "./name-require-component.vue";
2
3it("component validates props", () => {
4  expect(Component).toBeValidProp("name", "Required Name"); // Passes
5  expect(Component).toBeValidProp("name", null); // Fails as required
6  expect(Component).toBeValidProp("name", 123}); // Fails as typecheck
7});

1// name-require-component.vue
2props: {
3  name: {
4    type: String,
5    required: true
6  }
7}

1import Component from "./name-require-component.vue";
2
3it("component requires name prop", () => {
4  expect(Component).toRequireProp("name"); // Passes
5  expect(Component).toRequireProp("birthday"); // Fails
6});

1// default-address-component.vue
2props: {
3  address: {
4    type: String,
5    default: "Kitakyushu, Japan"
6  }
7}

1import Component from "./default-address-component.vue";
2
3it("component gives default value for address prop", () => {
4  expect(Component).toHaveDefaultProp("address", "Kitakyushu, Japan"); // Passes
5  expect(Component).toHaveDefaultProp("address", "San Francisco, US"); // Fails
6});

1// takes-zipcode-component.vue
2props: {
3  zipcode: {
4    type: String
5  }
6}

1import Component from "./takes-zipcode-component.vue";
2
3it("component validates zipcode prop", () => {
4  expect(Component).toBeValidPropWithTypeCheck("zipcode", "94103"); // Passes
5  expect(Component).toBeValidPropWithTypeCheck("zipcode", 94103); // Fails
6});

1// fullname-is-validated-component.vue
2props: {
3  fullname: {
4    validator: function (val) {
5      return !!val && val.match(/.+\s.+/);
6    }
7  }
8}

1import Component from "./fullname-is-validated-component.vue";
2
3it("component validates fullname prop", () => {
4  expect(Component).toBeValidPropWithCustomValidator("fullname", "Kengo Hamasaki"); // Passes
5  expect(Component).toBeValidPropWithCustomValidator("fullname", "Kengo"); // Fails
6});