Created
November 3, 2022 15:46
-
-
Save D3press3dd/1d26d9a1bb41b69878c853b217380975 to your computer and use it in GitHub Desktop.
Instalación y configuracion de Jest + React Testing Library en proyectos de React + Vite
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Instalación y configuracion de Jest + React Testing Library | |
## En proyectos de React + Vite | |
1. Instalaciones: | |
``` | |
yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react | |
yarn add --dev @testing-library/react @types/jest jest-environment-jsdom | |
``` | |
2. Opcional: Si usamos Fetch API en el proyecto: | |
``` | |
yarn add --dev whatwg-fetch | |
``` | |
3. Actualizar los scripts del __package.json__ | |
``` | |
"scripts: { | |
... | |
"test": "jest --watchAll" | |
``` | |
4. Crear la configuración de babel __babel.config.js__ | |
``` | |
module.exports = { | |
presets: [ | |
[ '@babel/preset-env', { targets: { esmodules: true } } ], | |
[ '@babel/preset-react', { runtime: 'automatic' } ], | |
], | |
}; | |
``` | |
5. Opcional, pero eventualmente necesario, crear Jest config y setup: | |
__jest.config.js__ | |
``` | |
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 | |
// En caso de tener problemas con la configuracion visitar la pàgina de https://www.eternaldev.com/blog/testing-a-react-application-with-vitest/ | |
//SI NO FUNCIONA ELIMINAR EL TYPE MODULE DEL PACKAGE.JSON || CAMBIAR LA EXTENSIÓN DEL ARCHIVO POR CJS |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment