Testing con Cypress en Vue.js
- Vue.js avanzado: Testing
En esta unidad vamos a aprender a testear nuestra aplicación Vue.js con Cypress con el objetivo de asegurar que nuestra aplicación funciona correctamente.
Una de las grandes ventajas de Vue.js es que nos permite testear de forma sencilla y rápida. Para ello podemos hacer uso de Vue Test Utils. Esta suite de herramientas nos permite testear de forma sencilla nuestros componentes y aplicaciones y todo lo relacionado con ellos:
- Propiedades
- Eventos
- Renderizado de componentes
- Router
- Stores
Para usarlo podemos hacer uso de Vitest o Jest.
El testing E2E es una de las partes más importantes de cualquier aplicación. Con ello nos centramos en testear la aplicación desde el punto de vista del usuario. Para ello, en Vue.js podemos hacer uso de Cypress para testear nuestra aplicación o componentes de forma sencilla y rápida.
Cypress es una suite de test E2E en base a historias de usuario. Además, ahora permite testear unitariamente componentes.
Puedes consultarlas aquí. Pero se basan principalmente en Chai y Sinon.
- visit: redirige a Chrome a la url que se le pasa por parámetro.
- get: obtiene un elemento por el identificador que le pasemos, para realizar acciones sobre él. Como hemos explicado en el apartado anterior, todos los identificadores que pasemos serán obtenidos del HTML y CSS.
- children: nos permite obtener un elemento que pasamos por parámetro, que desciende del elemento que hemos obtenido con la función get.
- click: realiza un click sobre el elemento que hayamos obtenido con la función get.
- type: escribe sobre el elemento obtenido un texto que pasamos por parámetro. Por ejemplo, usamos esta función para elementos input donde queremos introducir un texto.
- submit: permite enviar el contenido del formulario.
- contains: para indicar el contenido del elemento.
- have.attr: para indicar que el elemento tiene un atributo en concreto.
- include: para indicar que el atributo de un elemento incluye un texto.
A todas las funciones se les puede pasar un json con el elemento timeout. Este elemento nos permite incluir un tiempo que nos ayudará a esperar a que el elemento termine de cargar en la página.
Es importante que tengamos buenas prácticas para testear sin problemas. Entre ellas el manejo de selectores óptimos para nuestros elementos de la web, como pueden ser selectores de web del tipo id como son: data-testid (mi preferido para usarlo también con Vitest/jest) o data-cy (si quieres dejar claro que es para Cypress).
Escribimos nuestro test, montando nuestro componente con Cypress en el directorio tests de nuestro componente. Todos los test deben estar al menos dentro de un describe. Dentro de este describe podemos tener varios it, que serán los test que queramos realizar. Dentro de cada it podemos comprobar que el componente se renderiza correctamente, que los eventos se lanzan correctamente, que los props se pasan correctamente, etc.
import Contador from '../Contador.vue'
describe('Contador component tests', () => {
it('debería abrir renderizar con la propiedad correctamente', () => {
const valorInicial = 10
cy.mount(Contador, {
props: {
valorInicial: valorInicial,
},
})
// textoContador es visible
cy.get(textoContador).should('be.visible')
// Su valor es 10
cy.get(textoContador).should('have.text', 'Valor: 10')
// textoDoble es visible
cy.get(textoDoble).should('be.visible')
// Su valor es 20
cy.get(textoDoble).should('have.text', 'Doble: 20')
// O usando contains
cy.get(textoDoble).contains('20')
})
})Para llamar a los test unitarios, podemos hacerlo de dos formas:
- npm run test:unit, para ver los resultados en la terminal.
- npm run test:unit:dev, para ejecutarlos en el entorno de Cypress.
Además de los resultados en la terminal, podemos ver los vídeos de los test unitarios en ejecución en el directorio cypress/videos.
Puedes encontrar ejemplos de test unitarios sobre componentes usando Cypress en el siguiente repositorio.
Escribimos el test en el directorio cypress/e2e. De la misma manera, es recomendable que estén dentro de un describe. Dentro de este describe podemos tener varios it, que serán los test que queramos realizar. Dentro de cada it podemos comprobar que la aplicación se renderiza correctamente, que los eventos se lanzan correctamente, que los props se pasan correctamente, etc.
describe('Home Tests', () => {
it('debería visitar la página principal', () => {
cy.visit('/')
cy.contains('h1', 'Home')
})
it('debería renderizar el input', () => {
cy.visit('/')
cy.contains('h1', 'Home')
// El input es visible
cy.get(inputNombre).should('be.visible')
// el texto nombre no debe estar visible
cy.get(textoNombre).should('not.be.visible')
// Tecleamos pepe en el input
cy.get(inputNombre).type('pepe')
// El texto nombre debe estar visible
cy.get(textoNombre).should('be.visible')
// El texto nombre debe tener el valor pepe
cy.get(textoNombre).should('have.text', 'pepe')
// o usando contains
cy.get(textoNombre).contains('pepe')
})
})Antes de llamar a los test debemos hacer un build de nuestra aplicación. Para ello, ejecutamos el comando npm run build. ¿Por qué? Recuerda que estamos haciendo en este momento un test E2E, por lo que se testea la web, no el código. Por tanto, debemos tener la web compilada para poder testearla. Es decir, los ficheros html finales que forman nuestra web tal y como estaría desplegada o distribuida.
Una vez hecho el build, podemos ejecutar los test con el comando npm run test:e2e de dos formas:
- npm run test:e2e, para ver los resultados en la terminal.
- npm run test:e2e:dev, para ejecutarlos en el entorno de Cypress.
Además de los resultados en la terminal, podemos ver los vídeos de los test E2E en ejecución en el directorio cypress/videos.
Puedes encontrar ejemplos de test unitarios sobre componentes usando Cypress en el siguiente repositorio.
- https://example.cypress.io/
- https://www.tutorialspoint.com/cypress/index.htm
- https://www.browserstack.com/guide/cypress-automation-tutorial
- https://www.valentinog.com/blog/cypress/
Este tema tiene varios ejercicios, puedes realizarlos aquí
Codificado con 💖 por José Luis González Sánchez.
Cualquier cosa que necesites házmelo saber por si puedo ayudarte 💬.
Este repositorio y todo su contenido está licenciado bajo licencia Creative Commons, si desea saber más, vea la LICENSE. Por favor si compartes, usas o modificas este proyecto cita a su autor, y usa las mismas condiciones para su uso docente, formativo o educativo y no comercial.
JoseLuisGS by José Luis González Sánchez is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional License.
Creado a partir de la obra en https://github.com/joseluisgs.
