Vue Testing Documentation

Table of contents

• Unit Testing
• Integration Testing

Unit Testing

Vue Test Utils (VTU) is a set of utility functions aimed to simplify testing Vue.js components. It provides some methods to mount and interact with Vue components in an isolated manner. Vitest is a blazing fast unit test framework powered by Vite.

Adding VTU & Vitest to your project

Follow this guide to add VTU to your project: Installation | Vue Test Utils Follow this guide to add Vitest to your project: Getting Started | Vitest

Example:

import { mount } from  '@vue/test-utils'  

// The component to test  
const MessageComponent = {  
	template: '<p>{{ msg }}</p>',  
	props: ['msg']  
}  
  
test('displays message', () => {  
	const wrapper = mount(MessageComponent, {  
	props: {  
	msg: 'Hello world'  
	}  
})  
  
// Assert the rendered text of the component  
expect(wrapper.text()).toContain('Hello world')  
})

To test a component it must be wrapped, to do this use mount(). When you use mount, a VueWrapper is returned with a number of useful methods for testing. A VueWrapper is a thin wrapper around your component instance.

Props can be included in the mount function:

const wrapper = mount(AddFavoriteButton, {  
	props: { isFavorite: isFavorite },  
});

Wrapper methods

All the methods are explained here: Wrapper methods | Vue Test Utils

it("should render", () => {  
	const wrapper = mount(SearchBar, { props: { isFavorite: false } });  
	// has form  
	expect(wrapper.find("form").exists()).toBeTruthy();  
	// has label  
	expect(wrapper.find("label").exists()).toBeTruthy();  
	// has input  
	expect(wrapper.find("input").exists()).toBeTruthy();  
});

I use find() here to know if a component is being rendered correctly with all elements.

it("should emit when button is clicked", async () => {  
	const wrapper = mount(AddFavoriteButton, {  
		props: { isFavorite: isFavorite },  
	});  
  
	await wrapper.find("button").trigger("click");  
  
	expect(wrapper.emitted().click).toHaveLength(1);  
	expect(wrapper.emitted()).toHaveProperty("click");  
});

I use trigger() and emitted() here. With trigger a DOM event is triggered, and with emitted I get back a list of all the events that are emitted.

WARNING You should use await when you call trigger() to ensure that Vue updates the DOM before you make an assertion.

Integration Testing

Cypress Component Testing provides a component workbench for you to quickly build and test components from multiple front-end UI libraries — no matter how simple or complex.

The differences between component and end-to-end testing in-depth: Choosing a Testing Type

TBC

End to End Testing

Cypress was originally designed to run end-to-end (E2E) tests on anything that runs in a browser. A typical E2E test visits the application in a browser and performs actions via the UI just like a real user would.

Adding Cypress to your project

Follow this guide to add Cypress to your project: Installation | Cypress

Opening Cypress

Follow this guide to open Cypress: Opening the app | Cypress

Run this command to open the Cypress App

npx cypress open

The frontend does also need to be running

npm run dev