Descubra el poder de React Unit Testing con nuestra guía completa. Garantice aplicaciones sólidas y detecte errores a tiempo. ¡Empiece a realizar pruebas como un profesional hoy!
Las pruebas unitarias son una parte fundamental de la creación de aplicaciones de software exitosas. Garantiza que el código que se escribe cumpla con requisitos específicos, funcione según lo esperado y pueda mantenerse en el tiempo. React, lanzada en mayo de 2013, es una de las bibliotecas de JavaScript más populares para crear interfaces de usuario en aplicaciones web. Jest es el marco de prueba más utilizado para pruebas unitarias de componentes de React.
Este artículo explorará Jest para escribir pruebas unitarias para componentes de React. Veremos qué constituye una prueba unitaria, cómo escribir pruebas utilizando las API de Jest y métodos de aserción, y algunas de las mejores prácticas para escribir pruebas unitarias efectivas.
Jest fue creado en 2011 por Facebook y ahora se ha convertido en el estándar de facto para escribir pruebas unitarias con React debido a su poderosa biblioteca de aserciones, capacidades integrales de burla y un proceso de configuración sencillo, entre otras características. Todas estas características le permiten escribir pruebas significativas rápidamente sin preocuparse por los detalles de configuración o tener que lidiar con procesos de configuración complejos para cada herramienta por separado.
Para utilizar Jest de forma eficaz para escribir pruebas unitarias en aplicaciones React, primero debe comprender cómo funcionan los diferentes tipos de afirmaciones, qué significa burlarse y las mejores prácticas para configurar su entorno. ¡Este artículo proporcionará una descripción general de todos estos temas para que los lectores puedan obtener el conocimiento suficiente para escribir rápidamente pruebas unitarias significativas pero fáciles de mantener!
¿Por qué son importantes las pruebas unitarias de React?
Las pruebas unitarias son esenciales por varias razones, algunas de las cuales se mencionan a continuación:
Tiempo de desarrollo reducido
Las pruebas unitarias pueden reducir el tiempo dedicado a la depuración, evitando que aparezcan errores más adelante en el ciclo de desarrollo. Al escribir pruebas unitarias antes de codificar, los desarrolladores de React pueden identificar rápidamente cualquier problema con su código antes de sumergirse en la implementación.
Esto les permite realizar ajustes o correcciones lo más rápido posible sin tener que empezar desde cero si algo sale mal. Además, una vez que se ha escrito un conjunto de pruebas unitarias para una aplicación, se puede ejecutar nuevamente después de realizar cambios importantes para garantizar que todo funcione como se espera.
Calidad de código mejorada
Al ejecutar pruebas unitarias automatizadas con regularidad durante el desarrollo, los desarrolladores pueden detectar errores e inconsistencias de manera temprana, antes de que se conviertan en problemas mucho mayores en el futuro. Escribir casos de prueba completos también fomenta mejores prácticas de codificación porque requiere que los programadores piensen de antemano qué entradas podrían conducir a resultados inesperados o errores más adelante en el proceso de desarrollo.
Como resultado, una prueba unitaria a menudo conduce a una mejor calidad general del código y a menos errores en comparación con los proyectos que no emplean este método de prueba o que solo lo implementan parcialmente durante su flujo de trabajo.
Mejor documentación
Os programadores que escrevem testes unitários ajudam a criar uma documentação clara para cada parte de uma aplicação porque cada passo que um programador dá deve ser completamente documentado para que outros programadores ou engenheiros que trabalham com o mesmo software entendam exatamente o que foi feito e por que se hizo. manera y no de otra manera.
Además, una buena documentación ayuda al futuro personal de mantenimiento a mantener las aplicaciones existentes más fácilmente, ya que sabrán exactamente qué funciones se utilizaron, dónde se declararon variables específicas, etc. Con la documentación adecuada, comprender piezas complejas de software resulta mucho más fácil.
Mayor confiabilidad y mantenibilidad
Las pruebas unitarias ayudan a garantizar la confiabilidad porque buscan errores en cada nivel a lo largo del ciclo de vida de una aplicación. Cuando estas comprobaciones fallan debido a la introducción de nuevos errores en una aplicación, los desarrolladores pueden resolverlas inmediatamente en lugar de esperar hasta más tarde para reparar los daños causados por errores inadvertidos.
Este mayor nivel de monitoreo también significa menos pérdida de tiempo tratando de rastrear las fuentes de diversos problemas, ya que la mayoría ya se han detectado tempranamente mediante rigurosos procedimientos de prueba unitaria de respuesta.
Además, la capacidad de mantenimiento aumenta significativamente cuando múltiples conjuntos de casos de prueba cubren diferentes aspectos de la funcionalidad dentro del área elegida (por ejemplo, la lógica de la interfaz de usuario), lo que significa que las actualizaciones/cambios futuros solo necesitan pasar criterios establecidos previamente; el pedido sigue siendo válido después de que se produzcan modificaciones.
¿Qué es una broma?
Jest es un marco de prueba de JavaScript creado por Facebook. Realiza pruebas unitarias y de integración en aplicaciones escritas en cualquier lenguaje que se transpile a JavaScript, incluidos React, Vue, Angular, Node.js y más. Jest proporciona una poderosa biblioteca de aserciones con informes de cobertura de código integrados y otras características que facilitan el comienzo de la escritura de pruebas para su aplicación.
¡Pasemos a implementar pruebas unitarias en React!
¿Cómo podemos implementar pruebas unitarias en React?
Veamos cómo podemos implementar pruebas unitarias en una aplicación React.
Requisitos previos
Para implementar las pruebas unitarias con éxito, debe tener lo siguiente:
- Node.js : la última versión de Node.js en su máquina.
- Un editor de código : cualquier IDE que admita React.
- Es broma : un marco de prueba de JavaScript que funciona bien con React.
- Biblioteca de pruebas de React : proporciona utilidades para probar componentes de React.
A partir de
Instalar y crear una nueva aplicación React
Ejecute el siguiente comando en su terminal para instalar la aplicación Create React . Es una herramienta que inicia una aplicación de reacción sin configuración de compilación.
$ npm instalar crear-reaccionar-aplicación
Una vez instalada la aplicación Create React, debe ejecutar el siguiente comando.
$ npx crear-reaccionar-aplicación mi-aplicación
Ahora navegue hasta el directorio my-app.
$ cd mi-aplicación
Ejecute el siguiente comando para iniciar la aplicación React que creó.
inicio de $ npm
Verá un resultado similar al siguiente en su terminal: ¡Compilado con éxito! Ahora puede ver la demostración en el navegador. Local: En su red: Tenga en cuenta que la compilación de desarrollo no está optimizada. Para crear una compilación de producción, utilice npm run build. paquete web compilado exitosamente
Cuando acceda a la URL /, verá una página predeterminada para su aplicación React.
Necesitamos instalar Jest y React Testing Library como dependencia de desarrollo.
Instalación de Jest usando Terminal
Ejecute el siguiente comando en su terminal para instalar Jest.
$ npm instalar --save-dev broma
Instalación de la biblioteca de pruebas de React usando la terminal
Ejecute el siguiente comando en su terminal para instalar la biblioteca de pruebas de React.
$ npm instalar --save-dev @testing-library/react
Una vez que todos los paquetes estén instalados, agregaremos un script en el archivo package.json para ejecutar automáticamente las pruebas cada vez que se llamen.
Así es como se ve package.json ahora.
Tenga en cuenta las versiones de los paquetes mencionados anteriormente tal como se utilizaron cuando se creó esta guía.
Una vez instalado Jest, podemos crear un archivo de prueba en nuestra aplicación React. Jest seleccionará automáticamente los archivos que terminen en .test.js o .spec.js en el directorio de su proyecto.
Escribir un caso de prueba unitario
Otra cosa importante que hay que saber es cómo escribir un caso de prueba unitario.
| Tipo de consulta | 0 coincidencias | 1 partido | > 1 coincidencias | Reintentar (asincrónico/en espera) |
| Elemento único | ||||
arreglárselas... |
error de lanzamiento | Elemento de retorno | error de lanzamiento | No |
consultaPor... |
Devolver nulo | Elemento de retorno | error de lanzamiento | No |
encontrar por... |
error de lanzamiento | Elemento de retorno | error de lanzamiento | Sí |
| Varios elementos | ||||
obtener todo por... |
error de lanzamiento | Matriz de retorno | Matriz de retorno | No |
consultaTodoPor... |
Volver | Matriz de retorno | Matriz de retorno | No |
encontrarTodoPor... |
error de lanzamiento | Matriz de retorno | Matriz de retorno | Sí |
Fuente: documentación de la biblioteca de pruebas
Para resumir:
- Debe utilizar getBy, findBy o queryBy al seleccionar un único elemento DOM.
- Debe utilizar getAllBy, findAllBy o queryAllBy al seleccionar varios elementos DOM.
- Cuando hay más de una coincidencia o ninguna, las consultas getBy y findBy devuelven un error.
- Cuando no hay coincidencia, se devuelve un valor nulo; de lo contrario, si hay más de una coincidencia, queryBy devuelve un error
- getBy y queryBy no funcionan bien con código asincrónico, mientras que findBy sí.
- Si hay coincidencias, se devolverá una serie de coincidencias; de lo contrario, la consulta getAllBy generará un error.
- Si hay coincidencias, se devolverá una serie de coincidencias; de lo contrario, la consulta findAllBy generará un error.
- Si hay coincidencias, se devuelve una serie de coincidencias; de lo contrario, la consulta getAllBy devolverá una matriz vacía.
Ahora que está familiarizado con los métodos de consulta, comencemos a escribir un caso de prueba unitario para el componente React.
Primero creemos un componente. Cree un nuevo archivo con el nombre del componente. En nuestro caso, crearemos MyComponent.js en src con lo siguiente:
exportar la función predeterminada MyComponent {
return <div>Hola mundo</div>;
}
Ahora agregue el componente en el archivo App.js para que
importar logotipo desde './logo.svg';
importar './App.css';
importar MiComponente desde './MiComponente';
aplicación de función {
devolver (
<div className="Aplicación">
<encabezado className="encabezado de aplicación">
<img src={logo} className="Logotipo de la aplicación" alt="logo" />
<p>
Demostración de la aplicación React.
</p>
<MiComponente/>
</encabezado>
</div>
);
}
exportar aplicación predeterminada;
Creemos un archivo de prueba simple para probar un componente de React:
// MiComponente.test.js
importar Reaccionar desde 'reaccionar';
importar {renderizar} desde '@testing-library/react';
importar MiComponente desde './MiComponente';
describir('MiComponente', => {
it('se representa correctamente', => {
const { getByText } = render(<MiComponente />);
const linkElement = getByText(/Hola mundo/i);
esperar(linkElement).toBeInTheDocument;
});
});
En el ejemplo que se muestra, importamos el recurso de renderizado de @testing-library/react para usarlo en un entorno de prueba.
A continuación, colocamos nuestro MyComponent en el alcance y le aplicamos la función de renderizado. Finalmente, con getByText, podemos recuperar el texto "Hello World" y verificar su presencia usando expect.
Para ejecutar esta prueba, escriba el siguiente comando en la ventana de terminal:
prueba $npm
El resultado debería ser el siguiente:
Si cambia el contenido del div y ejecuta la prueba. La salida en la terminal será:
La función describe se utiliza para agrupar nuestras pruebas y su función define una prueba específica. La función expect se utiliza para hacer afirmaciones sobre el resultado de nuestro código.
Prueba de accesorios y estado.
En React, los componentes pueden tener accesorios y estados. Es fundamental comprobar que estos valores se están configurando y actualizando correctamente. Actualicemos nuestro ejemplo MyComponent para probar una propiedad:
// MiComponente.test.js
importar Reaccionar desde 'reaccionar';
importar {renderizar} desde '@testing-library/react';
importar MiComponente desde './MiComponente';
describir('MiComponente', => {
it('se representa correctamente', => {
const { getByText } = render(<MiComponente />);
const linkElement = getByText(/Hola mundo/i);
esperar(linkElement).toBeInTheDocument;
});
it('representa el nombre correcto', => {
const { getByText } = render(<nombre de mi componente="Alice" />);
const linkElement = getByText(/Hola Alice/i);
esperar(linkElement).toBeInTheDocument;
});
});
En el ejemplo anterior, estamos probando si el componente representa el nombre correcto. Pasamos la propiedad al componente cuando lo renderizamos usando el método de renderizado. Luego usamos el método getByText para recuperar el texto “Hola Baires” y verificamos si está en el documento usando el método expect.
El estado de la prueba es similar a la prueba de accesorios. Podemos usar el método fireEvent de @testing-library/react para simular las interacciones del usuario con el componente:
// MiComponente.test.js
importar Reaccionar desde 'reaccionar';
importar {renderizar, fireEvent} desde '@testing-library/react';
importar MiComponente desde './MiComponente';
describir('MiComponente', => {
it('se representa correctamente', => {
const { getByText } = render(<MiComponente />);
const linkElement = getByText(/Hola mundo/i);
esperar(linkElement).toBeInTheDocument;
});
it('representa el nombre correcto', => {
const { getByText } = render(<nombre de mi componente="Alice" />);
const linkElement = getByText(/Hola Baires/i);
esperar(linkElement).toBeInTheDocument;
});
it('actualiza el estado del recuento al hacer clic en el botón', => {
const { getByText, getByTestId } = render(<MiComponente />);
const countElement = getByTestId('contar');
const buttonElement = getByText(/Haz clic en mí/i);
esperar(countElement).toHaveTextContent('0');
fireEvent.click(botónElemento);
esperar(countElement).toHaveTextContent('1');
});
});
En el ejemplo anterior, estamos probando si el estado del recuento se actualiza cuando el usuario hace clic en el botón "Haz clic en mí". Usamos el método getByTestId para recuperar el elemento de conteo y el método getByText para recuperar el elemento del botón.
Luego usamos el método expect para verificar si el elemento count tiene inicialmente el valor 0, simulamos un evento de clic usando el método fireEvent y verificamos si el elemento count tiene el valor 1.
¿Por qué Jest es una excelente opción para las pruebas unitarias en React?
A continuación se muestra una comparación de algunos marcos de prueba populares.
| Estructura | Tipo de prueba | Idioma | Prueba DOM | Cobertura de código | Prueba de instantánea | Comunidad activa |
| Broma | Unidad | javascript | Sí | Sí | Sí | Sí |
| Moca | Unidad e Integración | javascript | No | Sí | No | Sí |
| Jazmín | Unidad | javascript | No | Sí | No | Sí |
En resumen, Jest es un marco de prueba muy popular para React que brinda soporte listo para usar para pruebas instantáneas, informes de cobertura de código y pruebas DOM. Mocha y Jasmine también son marcos de prueba populares para JavaScript, pero carecen de algunas de las características y el soporte que Jest proporciona para React. Los tres marcos tienen comunidades activas y son adecuados para probar aplicaciones React.
Profundicemos en las características que hacen de Jest una excelente opción para las pruebas unitarias con React.
Simulación integrada
Jest facilita el aislamiento y la prueba de componentes al proporcionar capacidades de simulación integradas. Puede utilizar la función jest.mock de Jest para crear implementaciones simuladas de dependencias de las que dependen sus componentes, lo que permite probar sus componentes sin preocuparse por el comportamiento de sus dependencias.
Por ejemplo, digamos que tiene un componente llamado MyComponent que depende de una función API externa llamada getData. Para simular esta llamada API en Jest, puede crear un archivo llamado __mocks__/myApi.js con el siguiente código:
export const getData = jest.fn( => Promise.resolve('datos simulados'));
Luego, en su archivo de prueba, puede usar jest.mock para reemplazar el módulo myApi real con su implementación simulada:
importar {renderizar, pantalla} desde '@testing-library/react';
importar { getData } desde 'myApi';
importar MiComponente desde './MiComponente';
broma.mock('miApi');
test('renderiza datos de API', async => {
getData.mockResolvedValue('datos simulados');
render(<MiComponente />);
datos constantes = await screen.findByText('datos simulados');
esperar(datos).toBeInTheDocument;
});
Prueba de instantánea
La prueba de instantáneas con Jest le permite capturar el resultado de un componente y compararlo con una versión guardada del mismo resultado. Esto ayuda a detectar cualquier cambio no intencionado realizado en la salida del componente. Para crear una prueba de instantánea para un componente en Jest, puede agregar código a su archivo de prueba que represente el componente utilizando datos de accesorios dinámicos y guarde su salida como una instantánea.
Para crear una prueba instantánea para el componente MyComponent en Jest, puede agregar el siguiente código a su archivo de prueba que capturará cómo se representa con datos dinámicos de su titular llamado datos.
importar renderizador desde 'react-test-renderer';
importar MiComponente desde './MiComponente';
prueba('renderiza correctamente', => {
const tree = renderer.create(<MyComponent data="datos de prueba" />).toJSON;
esperar(árbol).toMatchSnapshot;
});
Esto creará una instantánea de la salida del componente cuando se represente con la propiedad data=”datos de prueba”. Si realiza algún cambio en la salida del componente, Jest le notificará que la instantánea ya no coincide, lo que le permitirá investigar los cambios y decidir si actualizar la instantánea o corregir el código.
Pruebas rápidas y paralelizadas
Jest está diseñado para optimizar la velocidad al permitir que las pruebas se ejecuten en paralelo, de modo que los proyectos grandes con numerosas pruebas no sufran tiempos de prueba lentos e impidan el progreso del desarrollo.
Con Jest, puede ejecutar todas las pruebas de su aplicación React en paralelo ejecutando el siguiente comando en su terminal.
prueba npm -- --maxWorkers = 4
Esto ejecutará sus pruebas con hasta 4 trabajadores, lo que permitirá a Jest ejecutar varias pruebas al mismo tiempo y acelerar el proceso de prueba general.
Informe de cobertura de código integrado
Jest le brinda la capacidad de evaluar rápida y fácilmente qué parte de su código base está cubierto por las pruebas con su informe de cobertura de código incorporado. Estos informes muestran con precisión qué partes de su código se están probando, por lo que puede estar seguro de que se han cubierto todas las áreas vitales. Al revisar estos informes, puede determinar dónde pueden ser necesarias pruebas adicionales para garantizar un conjunto de pruebas sólido y completo.
prueba npm -- --cobertura
Esto ejecutará sus pruebas y generará un informe de cobertura de código en el directorio de cobertura. Puede abrir el archivo index.html en su navegador web para ver el informe de cobertura del código.
Conclusión
El desarrollo basado en pruebas (tdd) con Jest en React es una herramienta poderosa para ayudar a las empresas de desarrollo de React y a los desarrolladores individuales a crear aplicaciones confiables y libres de errores. Con su fácil configuración, interfaces intuitivas y cobertura completa de la biblioteca React, no es de extrañar que tantos desarrolladores opten por utilizar Jest para sus pruebas unitarias.
No solo proporciona una manera eficiente de garantizar que el código funcione como se espera, sino que también le ayuda a encontrar cualquier problema de forma rápida y precisa. La combinación de Jest y React permite a los desarrolladores producir aplicaciones sólidas que se pueden implementar de forma segura en entornos de producción. ¡Con todos estos beneficios, no hay razón para no considerar las pruebas unitarias con Jest en React en su próximo proyecto!
Si te gustó este artículo sobre React, consulta estos temas;
- Reaccionar mejores prácticas
- Reaccionar bibliotecas de componentes de UI
- Los 6 mejores IDE y editores de React
- Reaccionar frente a Backbone JS
- ¿Por qué React es tan popular?
- Lo que necesitas saber sobre reaccionar
- Reaccionar WebSockets: Tutorial
Preguntas frecuentes (FAQ)
¿Cómo ejecuto pruebas unitarias en Reactjs?
Puede escribir sus pruebas en un archivo separado y ejecutarlas usando el comando npm test, que buscará y ejecutará automáticamente sus pruebas.
¿Qué biblioteca se utiliza para las pruebas unitarias en React?
Jest es una biblioteca popular que se utiliza para pruebas unitarias en React.
¿Por qué el juego es tan popular?
Jest es popular porque es fácil de configurar y usar, tiene una sintaxis simple e intuitiva y proporciona una variedad de funciones y herramientas para probar aplicaciones React.
¿Jest es bueno para las pruebas unitarias de React?
Sí, Jest es una buena opción para pruebas unitarias en React. Está diseñado específicamente para probar aplicaciones JavaScript y proporciona una variedad de funciones y herramientas para probar componentes de React, incluida la compatibilidad con pruebas instantáneas, simulación y análisis de cobertura de código. También es ampliamente utilizado y cuenta con el respaldo de la comunidad React.
Fuente: BairesDev
