¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. React
  3. Probar una aplicación React
Extrait - React Desarrolle el Front End de sus aplicaciones web y móviles con JavaScript
Extractos del libro
React Desarrolle el Front End de sus aplicaciones web y móviles con JavaScript Volver a la página de compra del libro

Probar una aplicación React

Uso de Jest y React Testing Library

Las pruebas son una etapa esencial en el desarrollo de aplicaciones para garantizar que el código funciona correctamente, mantener la calidad del software y evitar regresiones. Jest y React Testing Library son dos herramientas populares y muy utilizadas para probar aplicaciones React. Por supuesto, existen otras soluciones como Cypress y Playwright, cada vez más populares en el mundo del desarrollo de aplicaciones web.

1. Introducción a Jest

Jest es un framework de pruebas desarrollado por Facebook para aplicaciones JavaScript, incluyendo React. Tiene la ventaja de funcionar de forma sencilla, con poca o sin ninguna configuración y con rapidez gracias a su capacidad para ejecutar pruebas en paralelo.

2. Instalación de Jest

 Para utilizar Jest en su proyecto React, necesitas instalarlo a través de npm o yarn :

npm install --save-dev jest @testing-library/react @testing- 
library/jest-dom jest-environment-jsdom 

 A continuación, cree un archivo de configuración babel.config.js para permitir que Jest entienda JSX :

module.exports = {  
  presets: [  
    '@babel/preset-env',  
    ['@babel/preset-react', {runtime: 'automatic'}],  
  ],  
}; 

3. Escribir pruebas con Jest y React Testing Library

 Cree un archivo...

Escribir su primera prueba

Cuando empiece a probar una aplicación React, debe empezar con pruebas sencillas para familiarizarse con el proceso.

1. Configuración básica

 Asegúrese de que tiene Jest y React Testing Library instalados en su proyecto, como se explica en la sección anterior.

También es posible crear una configuración automáticamente mediante el siguiente comando:

npx jest --init 

A continuación, tendrá la opción de configurar Jest en relación con su entorno y obtendrá un archivo de configuración. Usted puede elegir los valores por defecto propuestos, excepto para el medio ambiente, seleccione jsdom cuando usted está probando el front-end de una aplicación web.

2. Escribir su primera prueba

Supongamos que tiene un componente sencillo llamado HelloWorld que deseamos probar. He aquí cómo escribir su primera prueba para este componente.

HelloWorld.js:

import React from 'react';  
  
const HelloWorld = () => {  
  return <div>¡Hello, World!</div>;  
};  
  
export default HelloWorld; 

HelloWorld.test.js :

import React from 'react';  
import { render, screen } from '@testing-library/react';  
import '@testing-library/jest-dom';  
  
import HelloWorld...

Probar los componentes con Cypress

Cypress es una herramienta de pruebas utilizada a menudo para probar end-to-end (escenarios de extremo a extremo). Le permite probar sus aplicaciones web a través de diferentes escenarios e interacciones de usuario. A diferencia de Jest y React Testing Library, que se centran en pruebas unitarias, Cypress se centra más en pruebas de integración y de end-to-end.

1. Configuración básica

Asegúrase de que tienes Node.js instalado y su proyecto React listo para las pruebas. También debería haber creado e iniciado una aplicación React, ya que Cypress ejecuta las pruebas en un navegador real.

2. Instalación de Cypress

 Instale Cypress como dependencia de desarrollo en su proyecto:

npm install --save-dev cypress 

3. Escribir pruebas con Cypress

Cypress utiliza una sintaxis fluida para escribir pruebas.

 Cree una carpeta llamada cypress/integration en la raíz de su proyecto para almacenar sus archivos de prueba.

cypress/integration/MyComponent.spec.js :

describe('Test du composant MyComponent', () => {  
  it('affiche le texte "Hello, Cypress"', () => {  
    cy.visit('http://localhost:3000'); // Asegúrate de que la URL 
es correcta 
    cy.contains('Hello, Cypress').should('be.visible');  
  });  ...

Conclusión

Las pruebas desempeñan un papel crucial en el desarrollo de aplicaciones React de alta calidad. Garantizan que su código funcione como se espera, reducen los errores y facilitan el mantenimiento continuo.

1. La importancia de las pruebas

Las pruebas garantizan la estabilidad y fiabilidad de su aplicación, incluso cuando realiza cambios. Identifican posibles errores y fallos antes de que se conviertan en problemas graves. También sirven como documentación viva de su código, explicando cómo debería funcionar. A veces se dice que otro desarrollador debería ser capaz de entender su aplicación con sólo leer las pruebas. 

2. Elección del método de prueba

Las pruebas unitarias con Jest y React Testing Library son excelentes para validar el comportamiento individual de los componentes.

Las pruebas de aceptación con Cypress o Playwright le permiten probar las interacciones de los usuarios y los escenarios completos de su aplicación.

3. Buenas prácticas de prueba

  1. Escriba pruebas claras, concisas e independientes entre sí.

  2. Céntrese en los comportamientos y escenarios esenciales de su aplicación.

  3. Utilice nombres descriptivos para sus pruebas que le ayuden a comprender su finalidad.

  4. Asegúrese de que sus pruebas se pueden mantener y ampliar fácilmente.

4. Integración y despliegue continuos

La integración...