Guía de Instalación y Configuración de Jest + React Testing Library 

Instalaciones

npm

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev @testing-library/react @types/jest jest-environment-jsdom

yarn

yarn add --dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react
yarn add --dev @testing-library/react @types/jest jest-environment-jsdom

Opcional (Si usamos Fetch API en el proyecto)

Nota: a partir de Node.js v18, la API Fetch está disponible de forma nativa, por lo que "whatwg-fetch" no sería necesario, sin embargo, cabe la posibilidad de recibir el mensaje 'ReferenceError: fetch is not defined' a lo cual esta instalación es una solución.

npm

npm install --save-dev whatwg-fetch

yarn

yarn add --dev whatwg-fetch

Actualizar los scripts del package.json

--watchAll permite que Jest observe los cambios en los archivos y vuelva a ejecutar las pruebas automáticamente cada vez que detecta un cambio.

"scripts: {
...
"test": "jest --watchAll"

Crear la configuración de babel

El preajuste @babel/preset-env se configura para que genere código compatible con módulos ES (ECMAScript) y permita características de módulos nativos del navegador.

El preajuste @babel/preset-react habilita el soporte de JSX y configura el runtime automático para reducir la cantidad de código duplicado en los componentes React.

Nota: Este archivo se crea en la raíz de tu proyecto.

babel.config.cjs

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

Opcional, pero eventualmente necesario, crear jest config y jest setup

Esto configura Jest para utilizar el entorno de prueba jest-environment-jsdom, que simula un entorno de navegador en Node.js. Además, se especifica un archivo de configuración adicional llamado jest.setup.js que se ejecutará antes de las pruebas. Esto permite establecer configuraciones personalizadas.

Nota: Estos archivos se crean en la raíz de tu proyecto.

jest.config.cjs

module.exports = {
testEnvironment: 'jest-environment-jsdom',
setupFiles: ['./jest.setup.js']
}

jest.setup.js

// En caso de necesitar la implementación del FetchAPI
import 'whatwg-fetch'; // <-- yarn add whatwg-fetch

Descripción de comandos y enlaces a la documentación

🔗 npm install --save-dev jest

Instala Jest, herramienta con la cual, puedes crear y ejecutar pruebas unitarias.

🔗 npm install --save-dev babel-jest @babel/core @babel/preset-env

Instala las herramientas necesarias para transpilar y compilar tu código JavaScript durante las pruebas con Jest. Esto asegura que las pruebas sean compatibles con diversos entornos y versiones de navegadores, y te permite utilizar características modernas de JavaScript.

🔗 npm install --save-dev @babel/preset-react

Instala el preajuste @babel/preset-react, que permite a Babel comprender y convertir la sintaxis JSX utilizada en los componentes React en código JavaScript comprensible por los navegadores. Además, con la opción runtime: 'automatic', este preajuste optimiza el rendimiento de los componentes al importar de manera automática el módulo react/jsx-runtime para reducir la redundancia de código en los bundles finales.

🔗 npm install --save-dev @testing-library/react

Agrega la biblioteca @testing-library/react para facilitar la realización de pruebas de componentes React. Esta herramienta permite simular interacciones y realizar pruebas basadas en el comportamiento del usuario de manera más realista.

🔗 npm install --save-dev @types/jest

Al instalar @types/jest, se habilita el autocompletado y la detección de errores en el editor de código al escribir pruebas en Jest. Esta dependencia proporciona tipos y definiciones TypeScript para Jest, lo que mejora la experiencia de desarrollo al mostrar sugerencias y advertencias contextuales al escribir las pruebas.

🔗 npm install --save-dev jest-environment-jsdom

Añade el entorno de prueba jsdom a Jest, permitiéndote simular un DOM virtual en Node.js. Esto es crucial para las pruebas que implican interacciones con componentes React, como clics en botones y cambios de estado.

🔗 npm install --save-dev whatwg-fetch

Instala la dependencia whatwg-fetch, que agrega una implementación de la API Fetch en entornos como Node.js.