El desarrollo frontend implica la creación de aplicaciones funcionales y visualmente atractivas orientadas al cliente. Pero hay un problema; estas aplicaciones deben garantizar que los usuarios tengan una experiencia perfecta.

Si bien las pruebas unitarias y de integración son esenciales para verificar la funcionalidad de una aplicación, es posible que no capturen por completo las interacciones típicas del usuario. Para simular verdaderamente el recorrido de un usuario, es necesario ejecutar pruebas de un extremo a otro que repliquen las interacciones reales del usuario. Esto garantizará que su aplicación funcione como desea de principio a fin.

Comenzando con las pruebas de un extremo a otro usando Cypress

El objetivo principal de las pruebas de un extremo a otro en aplicaciones front-end es verificar los resultados en lugar de los detalles de implementación de la lógica empresarial.

Tome un formulario de inicio de sesión como ejemplo. Lo ideal sería probar si la pantalla de inicio de sesión aparece como se supone que debe hacerlo y si hace lo que debe hacer. Básicamente, los detalles técnicos subyacentes no son importantes. El objetivo final es simplemente ponerse en el lugar del usuario y evaluar toda su experiencia.

Ciprés es un excelente marco de pruebas de automatización que es compatible con algunos de los marcos de JavaScript más populares. Su capacidad para ejecutar pruebas directamente en el navegador y su conjunto completo de funciones de prueba hacen que las pruebas sean fluidas y eficientes. También admite varios enfoques de prueba que incluyen:

• Pruebas unitarias
• Pruebas de un extremo a otro
• Pruebas de integración

Para escribir pruebas de un extremo a otro para una aplicación React, considere estas historias de usuarios:

• Un usuario puede ver un campo de entrada con el botón de envío correspondiente.
• Un usuario puede ingresar una consulta de búsqueda en el campo de entrada.
• Después de hacer clic en el botón Enviar, el usuario debería ver una lista de elementos que se muestran justo debajo del campo de entrada.

Siguiendo estas historias de usuarios, puede crear una aplicación React simple que permita al usuario buscar productos. La aplicación obtendrá datos del producto del API ficticia de JSON y renderizarlo en la página.

Puedes encontrar el código de este proyecto en su GitHub repositorio

Configurar un proyecto de reacción

Para empezar, crear un proyecto React usando Vite o utilizar el comando create-react-app para configurar una aplicación React básica. Una vez que se complete el proceso de instalación, continúe e instale el paquete Cypress como una dependencia de desarrollo en su proyecto:

npm install cypress --save-dev

Ahora actualiza tu paquete.json archivo agregando este script:

"test": "npx cypress open"

Crear un componente funcional

En el src directorio, cree una carpeta y asígnele un nombre componentes. Dentro de esta carpeta, agregue un nuevo productos.jsx archivo e incluya el siguiente código.

import React, { useState, useEffect } from'react';
import"./style.component.css"
exportdefaultfunctionProducts(prop) {
const [products, setProducts] = useState([]);
const [error, setError] = useState(null); 
const { searchInput } = prop;
return (
"product-catalogue">
 {error? (
Product not found</p>
 ): (

"product-list">
 {products.slice(0, 6).map((product) => (
"product" key={product.id}>
Title: {product.title}</h2>


Price: ${product.price}</p>
 </div>
 ))}
 </div>
 )}
 </div>
 );
}

Dentro del componente funcional, defina un usoEfecto gancho, que ejecuta una función asincrónica que recupera los datos del producto en función de la consulta de búsqueda proporcionada.

 useEffect(() => {
const fetchProducts = async () => {
if (searchInput) {
const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
thrownewError('Error fetching products');
 }
const json = await response.json();
 setProducts(json.products);
 setError(null); 
 } catch (error) {
 setError(error.message);
 }
 }
 };
 fetchProducts();
 }, [searchInput]);

Actualice el archivo App.jsx

Ahora, actualiza el aplicación.jsx archivo con el siguiente código:

import React, { useState, useRef } from'react'
import'./App.css'
import Products from'./components/Products'
functionApp() {
const [searchInput, setSearchInput] = useState('')
const searchInputRef = useRef('');
const handleSubmit = (e) => {
 setSearchInput(searchInputRef.current.value);
 }
return (



Cypress Testing Library tutorial</h1>
"input">Input</label>

 id="text"
 type="text"
 ref={searchInputRef}
 />


"btn" type="button" onClick={handleSubmit}>Submit</button>
"products-component" searchInput={searchInput} /> 
 </div>
 )
}
exportdefault App

Continúe e inicie el servidor de desarrollo.

npm run dev

¡Excelente! Debería poder obtener datos de productos específicos de la API JSON ficticia.

Configurar el entorno de prueba

Primero, ejecute el comando del script de prueba en su terminal:

npm run test

Este comando activará y abrirá el cliente Cypress. Continúe y haga clic en Pruebas E2E botón.

A continuación, haga clic Continuar para agregar archivos de configuración de Cypress.

Una vez que se complete este proceso, debería ver un nuevo directorio de pruebas de Cypress en su proyecto. Además, el cliente de Cypress agrega automáticamente el archivo cypress.config.js. Puede actualizar este archivo para personalizar aún más varios aspectos de su entorno de prueba, comportamiento y configuración.

Escriba pruebas de un extremo a otro con Cypress

Para escribir su primera prueba, debe seleccionar el navegador en el que se ejecutará la prueba. Seleccione su opción preferida entre las disponibles en el cliente Cypress.

Cypress iniciará una versión simplificada del navegador que haya elegido, creando un entorno controlado para ejecutar pruebas.

Selecciona el Crear nueva especificación opción para crear su archivo de prueba.

Dirígete a tu editor de código, abre el ciprés/e2e/App.spec.cy.js y actualice el contenido de ese archivo con el siguiente código.

describe('App Tests', () => {
 beforeEach(() => {
 cy.visit('http://127.0.0.1:5173/'); 
 });
 it('Renders input field and submit button', () => { 
 cy.get('#text').should('exist').should('be.visible');
 cy.get('#btn').should('exist').should('be.visible').contains('Submit');
 });
 it('Enters a search query', () => {
const searchQuery = 'laptops';
 cy.get('#text').type(searchQuery);
 });
});

Volviendo a las historias de usuarios destacadas anteriormente, este conjunto de pruebas específico verifica dos aspectos:

• Que el navegador muestre un campo de entrada y un botón de envío en la página.
• Que el uso pueda ingresar una consulta de búsqueda.

Al igual que otras herramientas de prueba de JavaScript, como Jest y Supertest, Cypress emplea una sintaxis y un lenguaje declarativos para definir casos de prueba.

Para ejecutar la prueba, regrese a la versión simplificada del navegador administrada por Cypress y elija el archivo de prueba específico que desea ejecutar.

Cypress ejecutará las pruebas y mostrará los resultados en el panel del lado izquierdo del área de pruebas.

Simulación de procesos de solicitud

Para asegurarse de revisar y probar todo el recorrido del usuario (en este caso de uso específico), debe verificar que la aplicación puede tomar la entrada del usuario, recuperar los datos requeridos y, por último, mostrar los datos en el navegador página.

Para mayor claridad, puede crear un nuevo archivo de prueba para acomodar un conjunto de pruebas diferente dentro del e2e carpeta. Alternativamente, también puede optar por incluir todos los conjuntos de pruebas que exploran un caso de prueba particular en un archivo de prueba.

Continúe y cree un nuevo Productos.spec.cy.js archivo en el e2e carpeta. Dentro de este archivo, incluya el siguiente código.

describe('Products Tests', () => {
 it(' fetches and displays the data', () => {
const searchQuery = 'laptops';
 cy.visit('http://127.0.0.1:5173'); 

 cy.get('#text').type(searchQuery);
 cy.get('#btn').contains('Submit').click();

 cy.get('.product').should('have.length.greaterThan', 0);

 cy.get('.product').first().should('contain', 'Title'); 
 cy.get('.product').first().should('contain', 'Price: $');
 });
 });

Este conjunto de pruebas comprueba que, una vez que un usuario envía un elemento de búsqueda particular, la aplicación recupera y muestra los datos en la página del navegador.

Lo hace simulando el proceso de ingresar la entrada de búsqueda, haciendo clic en el botón enviar, esperando el productos para cargar y luego verificar la presencia de artículos de producto, junto con detalles como título y precio. En esencia, captura y verifica toda la experiencia desde la perspectiva del usuario.

Simulación de errores y respuestas

También puede simular varios escenarios de error y respuestas dentro de sus pruebas de Cypress.

Crear un nuevo Error.spec.cy.js archivo en el e2e directorio e incluya el siguiente código.

describe('Error Handling Tests', () => {
 it('Displays error message for incorrect search query', () => {

 cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
 statusCode: 404, // Not Found
 body: 'Product not found'
 }).as('fetchProducts');
 cy.visit('http://127.0.0.1:5173');
const incorrectSearchQuery = 'rocket';
 cy.get('#text').type(incorrectSearchQuery);
 cy.get('#btn').click();
 cy.wait('@fetchProducts');
 cy.contains('Product not found').should('be.visible');
 });
 });

Este conjunto de pruebas comprueba que aparezca un mensaje de error cuando un usuario ingresa una consulta de búsqueda incorrecta.

Para que pase el caso de prueba, utiliza Cypress' interceptar Función para desconectar la red y simular un error de solicitud de red. Luego verifica que después de ingresar una consulta de búsqueda incorrecta en el campo de entrada e iniciar el proceso de búsqueda, se muestre visiblemente un mensaje de error (Producto no encontrado) en la página.

Este resultado indica que el mecanismo de manejo de errores está funcionando como se esperaba.

Uso de Cypress en desarrollo basado en pruebas

Las pruebas son un requisito de desarrollo fundamental, pero también pueden ser un proceso que requiere mucho tiempo. Sin embargo, incorporar Cypress puede brindarle la absoluta satisfacción de ver cómo se ejecutan sus casos de prueba juntos.

Cypress es una gran herramienta para implementar el desarrollo basado en pruebas en aplicaciones; no solo proporciona un conjunto completo de funciones de prueba, sino que también admite varias estrategias de prueba. Para aprovechar Cypress al máximo, continúe y explore su documentación oficial para descubrir muchas más capacidades de prueba.