DEV Community

Cover image for How to test Vue apps with the popular Cypress framework

How to test Vue apps with the popular Cypress framework

Nihar Raote on April 22, 2019

Introduction This article explains how you can use Cypress to test a Vuejs app. A simple todo app created with Vuejs is used as an examp...
Collapse
 
bahmutov profile image
Gleb Bahmutov

Nihar, good article but I don't think the statement "Cypress makes sure this test will not run if the first test doesn't pass." is correct. Cypress will not run the test if a "before" or "beforeEach" hook fails, but it will happily run the second test even if the first test fails. We advise to make your tests independent from each other - if you need a couple of todos for the second test to complete - just create them using a beforeEach and a custom command.

See our example tests for TodoMVC here github.com/cypress-io/cypress-exam... and in-depth TodoMVC tests for Vue.js specifically here cypress.io/blog/2017/11/28/testing...

Collapse
 
napoleon039 profile image
Nihar Raote

Thank you for correcting me. I started with Cypress recently so I didn't know it was like this. I think I saw an example with a test failing and subsequent tests not running in some specific situation and thought that meant a test failing means the tests following it will fail as well.

I will make sure to check out the GitHub example you linked to 🙂

Collapse
 
mirelspr profile image
Mirel Springer

"Here, we visit the app via localhost, find the input field using cy.get() and start typing something inside. To type something, we simply chain cy.click() to cy.get(). Then we get the button in the same way and click it by chaining cy.click(). Now what's left is to check whether the todo is actually added to the list or not."

Shouldn't this be "we simply chain cy.type()" ?

Collapse
 
napoleon039 profile image
Nihar Raote

Thank you for pointing it out. I should edit my posts more carefully.