How to test Vue components with Cypress?

Testing Vue components with Cypress gives way to the creation of user-focused and reliable tests at a faster rate.

Learn why and how to execute vue component screen with Cypress with this comprehensive guide.

How to test Vue constituent with Cypress?

Vue.js is a javascript model for building Single Page Applications. Vue.js provides Declarative and Component based programming poser which helps developer to develop effective user interfaces.

What is Vue Component?

Vue component refers to a reusable and standalone piece of UI in a Vue.js application. These components are essential features of Vue.js, enabling developers to interrupt down complex UI into achievable parts.

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

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

• Javascript for component ’ s logic
• Template (HTML)
• Styles (CSS)

& lt; script setup & gt; defineProps ({msg: {character: String, required: true}}) & lt; /script & gt; & lt; template & gt; & lt; div & gt; & lt; h1 & gt; {{msg}} & lt; /h1 & gt; & lt; h3 & gt; You 've successfully created a project with // We will be using below anchor tag later in our component test to swear the anchor // text & lt; a href= '' https: //vitejs.dev/ '' target= '' _blank '' rel= '' noopener '' & gt; Vite & lt; /a & gt; + & lt; a href= '' https: //vuejs.org/ '' target= '' _blank '' rel= '' noopener '' & gt; Vue 3 & lt; /a & gt;. & lt; /h3 & gt; & lt; /div & gt; & lt; /template & gt; & lt; style scoped & gt; h1 {font-weight: 500; font-size: 2.6rem; top: -10px;} h3 {font-size: 1.2rem;} .greetings h1, .greetings h3 {text-align: middle;} @ media (min-width: 1024px) {.greetings h1, .greetings h3 {text-align: left;}} & lt; /style & gt;

The above is one such component in ourmodel repositoryand below is our labor structure

Now, if you will start your Vue.js application by accomplish the command, guarantee to establish addiction by runningnpm install command

npm run vite

Our application will look like above which will be running at default addresshttp: //localhost:5173.

Why Perform Vue Component Testing with Cypress

Here & # 8217; s why behave vue component testing with Cypress is beneficial:

• User-focused testing: Verifies if the vue components render and function correctly via synergistic tests.
• Flying Execution: Offers existent time feedback along with reflex trial reloading.
• Seamless Integration: Integrates swimmingly with Vue Test Utils and plugins.
• Extended Coverage: Facilitates integration testing, unit examination, and end-to-end testing.
• Live Debugging: Leverage interactive GUI and inspect component state.
• CI/CD Integration: Integrates with CI/CD pipeline seamlessly for continuous testing.
• Cross-browser examination: Ensures consistent serve across different browser.

Vue Component Testing Setup

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

Here is a step-by-step tutorial to help you realize how vue factor testing is performed with Cypress:

Step 1:Before starting to write our Component test, you need to in ourVue.jsProject. To install cypress, execute below command

npm install cypress

Step 2:Once installation is completed, Open test runner by action command

npx cypress exposed

Step 3:In the examination runner window chink on to proceed with configuration.

Step 4:Cypress will automobile find the Front-end fabric (In our case it is Vue.js) and the Bunder for our setup is Vite. Once choice is made clink on Next step

Step 5: Cypress will add all required contour. Click on Continue

Step 6: The browser selection window will open. Since you have not written any component test, let & # 8217; s close the Cypress Test contrabandist and start with writing our first component test.

Writing Component Test

Navigate tosrc & gt; ingredientand create a new file namedhelloWorld.cy.js.Writing your component test for the componentHelloWorld.vue

Mounting Component

Firstly load the part to the browser and insure how the component looks like. And to do that let ’ s write a Cypress tryout which seem like below

// Import the Component to mount import HelloWorld from `` ./HelloWorld.vue ''; depict (`` Vue Component trial '', () = & gt; {it (`` HelloWorld vue component test '', () = & gt; {// mount the Component by passing required properties to the component cy.mount (HelloWorld, {prop: {msg: `` Hello Vitest ''}});});});

In the above trial, utilisecy.mountto Mount the Vue part and also passing the required belongings so that it lade in the browser.

Adjacent step is to fulfill the below cypress bidding to validate the mounting of components.

npx cypress exposed -- component

Select the browser and pawl on Start Component Testing in Chrome

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

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

Querying and Assertion

In the Vue component test, you can query for the linchpin component in the loaded component and verify if the href attribute of the ingredient has urlhttps: //vitejs.dev/and has inner text “Vite”

import HelloWorld from `` ./HelloWorld.vue ''; describe (`` Vue Component test '', () = & gt; {it (`` HelloWorld vue factor test '', () = & gt; {cy.mount (HelloWorld, {props: {msg: `` Hello Vitest ''}}); cy.get (`` a [href='https: //vitejs.dev/ '] '') .invoke (`` textbook '') .should (`` eq '', `` Vite '');});});

And if you rebroadcast this test, you can see the test querying and asserting for the connectedness text

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 will help. Components Testing conduct less time, as you are merely mounting a individual element than convey up complete covering, this makes debug faster, specially in cases where bug in a exceptional component is suspected.

Whenever running Cypress tests, it is urge to test on so that the can be taken into account for better truth of tryout results. Tools like help QAs by providing entree to 3500+ device browser combinations for a comprehensive automated testing.

Useful Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Related Guides