¿Cómo configurar Jest para las pruebas de React?

A medida que más y más desarrolladores adoptan React como su framework front-end preferido, se vuelve cada vez más importante garantizar que el código que escribimos sea de la más alta calidad. Un aspecto importante de la garantía de calidad son las pruebas, y Jest es un marco de prueba popular que se usa a menudo con React.

Jest es un marco de prueba de código abierto creado por Facebook y está diseñado para hacer que probar su código JavaScript sea lo más fácil y eficiente posible. Es rápido, tiene una API fácil de usar y viene con una serie de funciones integradas que hacen que las pruebas sean muy sencillas.

En este artículo, lo guiaremos a través del proceso de configuración de pruebas de Jest para React. Cubriremos todo lo que necesita saber para comenzar, desde instalar Jest hasta escribir su primer caso de prueba.

Broma para las pruebas de reacción

Jest es un marco de prueba popular que se utiliza para probar aplicaciones React. Es creado por Facebook y es conocido por su facilidad de uso y rápido tiempo de configuración. Jest está diseñado para funcionar con React desde el primer momento y proporciona muchas funciones para facilitar las pruebas.

Estas son algunas de las características que hacen de Jest una opción popular para probar aplicaciones React:

i) Prueba de instantáneas: Jest proporciona una función de prueba de instantáneas que le permite comparar la salida actual de un componente con una instantánea almacenada previamente. Esto facilita comprobar si se han realizado cambios no deseados en la salida del componente.

ii) Simulación: Jest proporciona capacidades de simulación integradas que le permiten crear funciones y módulos simulados. Esto es útil cuando necesita simular el comportamiento de una función o módulo que no está disponible o es difícil de probar.

iii) Cobertura de código: Jest proporciona un informe de cobertura de código que muestra el porcentaje de código cubierto por sus pruebas. Esto es útil para identificar áreas de su código que no se prueban y pueden necesitar atención adicional.

iv) Pruebas asíncronas: Jest facilita la prueba de código asíncrono al proporcionar utilidades para administrar el código asíncrono. Esto le permite escribir pruebas que esperan que se resuelvan las promesas u otro código asíncrono antes de hacer afirmaciones.

v) Configuración sencilla: Jest es fácil de instalar y configurar para su aplicación React. Viene con una configuración predeterminada que funciona de inmediato, pero se puede personalizar para satisfacer sus necesidades específicas.

En general, Jest es un marco de prueba potente y flexible que facilita la prueba de aplicaciones React. Sus muchas funciones y su fácil configuración lo convierten en una opción popular para los desarrolladores que desean escribir pruebas confiables para sus componentes React.

Configuración de Jest para pruebas de reacción

Hay ciertos pasos que debe seguir para configurar Jest para las pruebas de React en 2023.

1) Instalar broma

Jest se puede instalar en su proyecto usando npm o yarn. Estos son los pasos para instalar Jest usando npm:

i) Abra su terminal o símbolo del sistema y navegue hasta el directorio de su proyecto.

ii) Ejecute el siguiente comando para instalar Jest como una dependencia de desarrollo en su proyecto:

npm install –save-dev broma

Este comando instalará Jest y lo agregará al archivo package.json de su proyecto en la sección devDependencies.

Una vez que se complete la instalación, puede comenzar a escribir sus pruebas usando Jest. Puede ejecutar sus pruebas con el comando de prueba npm. De forma predeterminada, Jest busca archivos de prueba que tengan la extensión .test.js o .spec.js . Sin embargo, puede configurar Jest para buscar pruebas con otras extensiones modificando la propiedad testMatch en su archivo de configuración de Jest.

¡Eso es todo! Ahora tiene Jest instalado en su proyecto y puede comenzar a escribir pruebas para su aplicación.

2) Crear un archivo de configuración

Para crear un archivo de configuración para Jest, puede crear un archivo llamado jest.config.js en el directorio raíz de su proyecto. Este archivo contendrá las opciones de configuración que Jest debe usar al ejecutar pruebas.

Aquí hay un archivo de configuración de ejemplo:

módulo.exportaciones = {

// Indica qué tipos de archivos deben considerarse como archivos de prueba.

coincidencia de prueba: [

'**/__pruebas__/**/*.js?(x)',

'**/?(*.)+(especificación|prueba).js?(x)'

],

// Una lista de rutas a directorios que Jest debería usar para buscar archivos.

raíces: ['<rootDir>/src'],

// Un mapa de expresiones regulares a caminos a transformadores.

transformar: {

'^.+\\.(js|jsx|ts|tsx)$': 'babel-broma'

},

// Los patrones globales que Jest usa para detectar archivos de prueba.

testPathIgnorePatterns: [

'<dirección_raíz>/node_modules/',

'<dirección raíz>/compilación/'

],

// Una lista de nombres de reporteros que Jest usa cuando escribe reportajes de cobertura.

reporteros de cobertura: ['json', 'texto', 'html'],

// Una matriz de extensiones de archivo que usan sus módulos.

extensiones de archivo de módulo: ['js', 'json', 'jsx']

};

Este archivo de configuración de ejemplo especifica las siguientes opciones:

a) testMatch: especifica el patrón utilizado para identificar los archivos de prueba.

b) raíces: especifica los directorios en los que Jest debe buscar archivos.

c) transform: especifica las transformaciones que Jest debe aplicar a los archivos antes de ejecutar las pruebas.

d) testPathIgnorePatterns: Especifica los patrones a ignorar al buscar archivos de prueba.

e) reporteros de cobertura: especifica los reporteros que Jest debe usar para generar informes de cobertura.

f) moduleFileExtensions: especifica las extensiones de archivo que Jest debe buscar al buscar archivos.

Puede modificar este archivo de configuración para adaptarlo a las necesidades de su proyecto. Una vez que haya creado su archivo de configuración, Jest lo usará automáticamente cuando ejecute pruebas en su proyecto.

3) Escribe tus pruebas

Una vez que haya instalado Jest y configurado su archivo de configuración, puede comenzar a escribir pruebas para su aplicación React. Estos son los pasos para crear un archivo de prueba y escribir una prueba:

i) Cree un nuevo archivo con la extensión .test.js o .spec.js . Este será su archivo de prueba.

ii) En el archivo de prueba, importe el componente o función que desea probar:

importar {sum} desde './myFunctions';

iii) Escribe tu prueba. Una prueba es una función que utiliza la API de Jest para comprobar que el componente o función se comporta como se esperaba:

describir('suma', () => {

test('suma 1 + 2 para igualar 3', () => {

esperar(suma(1, 2)).toBe(3);

});

});

En este ejemplo, estamos probando una función de suma simple que suma dos números. La función de descripción agrupa las pruebas relacionadas, mientras que la función de prueba especifica un solo caso de prueba. La función expect comprueba que la función sum devuelve el valor esperado.

iv) Ejecute sus pruebas ejecutando el comando de prueba npm en el directorio de su proyecto. Jest buscará archivos de prueba en su proyecto y ejecutará cualquier prueba que encuentre.

Puede agregar tantas pruebas como necesite para cubrir toda la funcionalidad de su componente o función. Jest proporciona una amplia gama de coincidencias y otras utilidades que puede usar para crear pruebas más complejas.

Al escribir pruebas para su aplicación React, puede asegurarse de que su código funcione como se espera y evitar la introducción de regresiones a medida que realiza cambios en su base de código.

4) Ejecute sus pruebas

Para ejecutar sus pruebas usando Jest, puede usar el comando de prueba npm en el directorio de su proyecto. Jest detectará y ejecutará automáticamente cualquier archivo de prueba en su proyecto que coincida con el patrón especificado en su archivo de configuración de Jest.

Cuando ejecuta la prueba npm, Jest generará los resultados de sus pruebas en la consola. Si todas las pruebas pasan, Jest mostrará un resumen de los resultados de la prueba:

APROBAR src/components/Ejemplo.test.js

✓ renderiza sin fallar (21ms)

Conjuntos de pruebas: 1 aprobado, 1 en total

Pruebas: 1 aprobada, 1 total

Instantáneas: 0 en total

Tiempo: 3.204s, estimado 4s

Ejecutó todas las suites de prueba.

Si alguna prueba falla, Jest mostrará un mensaje de error que describe la falla y la ubicación de la prueba fallida:

FALLA src/components/Example.test.js

• Componente de ejemplo › renderiza sin fallar

TypeError: no se puede leer la propiedad 'mapa' de indefinido

10 | prestar() {

11 | const {elementos} = this.props;

> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);

| ^

13 | }

14 | }

15 |

en Ejemplo.render (src/components/Ejemplo.js:12:17)

en ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)

en Objeto.<anónimo> (src/components/Example.test.js:9:16)

Conjuntos de pruebas: 1 fallido, 1 en total

Pruebas: 1 fallida, 1 en total

Instantáneas: 0 en total

Tiempo: 3.537s, estimado 4s

Ejecutó todas las suites de prueba.

Jest también proporciona una variedad de opciones que puede usar para personalizar el comportamiento de sus pruebas, como ejecutar pruebas en modo de observación, generar informes de cobertura de código y más. Puede encontrar más información sobre estas opciones en la documentación de Jest.

Terminando

LambdaTest es una poderosa plataforma de prueba basada en la nube que se puede usar junto con Jest para probar aplicaciones React. Al aprovechar la escalabilidad de la infraestructura basada en la nube de LambdaTest, puede ejecutar sus pruebas Jest de manera rápida y eficiente en una amplia gama de navegadores y dispositivos, lo que garantiza que su aplicación funcione como se espera en diferentes entornos.

En este blog, cubrimos los pasos necesarios para configurar Jest para probar aplicaciones React. También aprendimos cómo configurar Jest para usar LambdaTest como entorno de prueba, escribir pruebas usando Jest y ejecutar pruebas en la infraestructura basada en la nube de LambdaTest.

El uso conjunto de LambdaTest y Jest proporciona una solución de prueba sólida para los desarrolladores de React que puede ayudarlos a detectar regresiones y errores al principio del ciclo de desarrollo, mejorando la calidad general de sus aplicaciones.

Por lo tanto, si está buscando optimizar su flujo de trabajo de prueba de React, considere usar LambdaTest y Jest juntos para lograr pruebas integrales, escalables y eficientes para sus aplicaciones de React.