App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Get Started free
Home Guide How to test Vue components with Cypress?

How to test Vue components with Cypress?

By Gurudatt S A, Community Contributor -

How to test Vue components with Cypress?

Vue.js is a javascript framework for building Single Page Applications. Vue.js provides Declarative and Component based programming models which helps developers to develop efficient user interfaces.

What is Vue Component ?

In Vue.js, you can create applications by creating individual Components Called Single-File Component.

Below is an example of a Single-File Component. As observed, the Single-File Component is made up of:

  • Javascript for component’s logic 
  • Template (HTML)
  • Styles (CSS)
<script setup>
defineProps({
msg: {
type: String,
required: true
}
})
</script>

<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You've successfully created a project with
// We will be using below anchor tag later in our component test to assert the anchor 
// text
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
</h3>
</div>
</template>

<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}

h3 {
font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
text-align: center;
}

@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>

The above is one such component in our example repository and below is our project structure

Folder Structure of Vue Components in Repository

Now, if you will start your Vue.js application by executing the command, ensure to install dependencies by running npm install command

npm run vite

Creating a new Vite and Vue ProjectOur application will look like above which will be running at default address http://localhost:5173

Vue Component Testing Setup

Step 1 Before starting to write our Component test, you need to install Cypress in our Vue.js Project. To install cypress, execute below command

npm install cypress

Step 2 Once installation is completed, Open Cypress test runner by executing command

npx cypress open

Starting with Cypress Vue Component Testing

Step 3 In the test runner window click on Component Testing in Cypress to proceed with configuration.

Setting up Cypress Vue Component Testing

Step 4 Cypress will auto detect the Front-end framework (In our case it is Vue.js) and the Bunder for our setup is Vite. Once selection is made click on Next step

Cypress Autodetects VueJS and downloads config files

Step 5 Cypress will add all required configuration. Click on Continue

Choose browser for Cypress vue testing

Step 6 The browser selection window will open. Since you have not written any component test, let’s close the Cypress Test runner and start with writing our first component test.

Writing Component Test

Let’s navigate to src > components and create a new file named helloWorld.cy.js. Writing your component test for the component HelloWorld.vue

Mounting Component

Firstly load the component to the browser and check how the component looks like. And to do that let’s write a Cypress test which looks like below

// Import the Component to mount
import HelloWorld from "./HelloWorld.vue";

describe("Vue Component test", () => {
it("HelloWorld vue component test", () => {
// mount the Component by passing required properties to the component
cy.mount(HelloWorld, { props: { msg: "Hello Vitest" } });
});
});

In the above test, using cy.mount to Mount the Vue component and also passing the required property so that it loads in the browser.

Next step is to execute the below cypress command to validate the mounting of components.

npx cypress open --component

Cypress adds all required configuration

Select the browser and click on Start Component Testing in Chrome

Start Component Testing in Chrome 1

Run Vue Component Test in Cypress

You can see your component test helloWorld.cy.js, let’s click on the test to run it.

Great, you can see that the Vue component is loaded in the browser using Cypress.

Querying and Assertion

In the Vue component test, you can query for the anchor element in the loaded component and verify if the href attribute of the element has url https://vitejs.dev/ and has inner text “Vite

import HelloWorld from "./HelloWorld.vue";

describe("Vue Component test", () => {
it("HelloWorld vue component test", () => {
cy.mount(HelloWorld, { props: { msg: "Hello Vitest" } });
cy.get("a[href='https://vitejs.dev/']").invoke("text").should("eq", "Vite");
});
});

And if you rerun this test, you can see the test querying and asserting for the link text

Rerun Vue Component Test in Cypress and see test querying

Conclusion

This article explored how easy it is to set up component testing with Cypress and write our first test for the Vue Component.

Writing more component tests in addition to the Cypress end-to-end tests will help improve the automation test coverage. Components Testing take less time, as you are just mounting a single component than bringing up complete application, this makes debugging faster, especially in cases where bug in a particular component is suspected.

Whenever running Cypress tests, it is recommended to test on real devices so that the real user conditions can be taken into account for better accuracy of test results. Tools like BrowserStack Automate help QAs by providing access to 3000+ device browser combinations for a comprehensive automated testing.

Run Cypress Tests on Real Devices

Tags
Cypress Website Testing

Featured Articles

How to perform Component Testing using Cypress

How to Perform Visual Testing for Components in Cypress

App & Browser Testing Made Easy

Seamlessly test across 20,000+ real devices with BrowserStack