User:Saul/testing

jest/vue-test-utils

This setup was done using Vue 3 so if you are still using Vue 2 commands may differ.

First ensure that Vue is at least version 3.0.6 on your project vue@3.0.6;

Then install the dependancies:

# At the time of writing vue-jest@next resolves to alpha.7 which requires typescript so alpha.8 is specified directly.
npm i -D @vue/test-utils@next jest vue-jest@5.0.0-alpha.8 babel-jest babel-core@bridge

Example test: test/unit/ListItem.spec.js

import { mount } from "@vue/test-utils";
import ListItem from "../../src/components/ListItem.vue";

const wrapperSlots = mount(ListItem, {
	slots: {
		default: "Title",
		icon: "Icon"
	}
});

const wrapper = mount(ListItem);

it("Matches the snapshot.", () => {
	expect(wrapperSlots.html()).toMatchSnapshot();
})

it("Renders the title and icon.", () => {
	expect(wrapperSlots.html()).toContain("Title");
	expect(wrapperSlots.html()).toContain("Icon");
});

it("Renders the icon only when one is present.", () => {
	expect(wrapper.find(".icon").exists()).toBe(false)
	expect(wrapperSlots.find(".icon").exists()).toBe(true)
});

And to run it:

jest tests/unit --coverage # Parameter can be omitted to run it quicker.

Nightwatch

Install

vue add e2e-nightwatch

And to run the tests:

vue-cli-service test:e2e --env firefox # Parameter can be omitted to use chrome.