React Testing Library - Instalación del entorno
Para poder testear una aplicación en React, podemos utilizar la librería de React Testing Library (@testing-library/react
).
Si hemos creado la aplicación mediante la línea de comandos create-react-app
, ya estará configurado para poder empezar a testear. De lo contrario, si quisiéramos añadir test a una aplicación React que no está create con create-react-app
, debemos seguir los siguientes pasos:
- Instalamos las siguientes dependencias:
npm install --save-dev @testing-library/react @testing-library/jest-dom jest @babel/preset-env @babel/preset-react
-
@testing-library/react: librería de React Testing Library
-
@testing-library/jest-dom: librería de Testing Library que provee métodos para testear elementos HTML en el DOM.
-
jest: Librería Jest
En el caso de que nuestra aplicación sea en Typescript
, también necesitaremos las siguientes dependencias:
npm install --save-dev @types/jest ts-jest @babel/preset-typescript
- Si no está creado, creamos el fichero
babel.config.js
en la carpeta del proyecto y añadimos el siguiente contenido:
babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
],
'@babel/preset-react',
'@babel/preset-typescript' // Si utilizamos Typescript
]
}
- Creamos el fichero
jest-setup.js
:
jest-setup.js
import '@testing-library/jest-dom'
- Por último, creamos el archivo de configuración de jest:
jest.config.js
module.exports = {
transform: { // En el caso de utilizar Typescript
'^.+\\.tsx?$': 'ts-jest'
},
testRegex: '(/.*\\.(test|spec))\\.(ts|tsx|js)$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['<rootDir>/jest-setup.ts']
}
- Añadimos un script test al
package.json
y ya estará listo para crear los test.
package.json
{
....
"scripts": {
"test": "jest",
...
}
}