Juan Pablo Pérez lantes
Posted on December 30, 2022
Apunte para configuración rapida de Jest en proyectos React creado con Vite
En proyectos de React + Vite
1.- Instalaciones
yarn add --dev jest babel-jest \
@bale/core @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.cjs
module.exports = {
presets: [
[ '@babel/preset-env', { targets: { esmodules: true } } ],
[ '@babel/preset-react', { runtime: 'automatic' } ],
],
};
5.- Crear Jest config y setup:
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';
💖 💪 🙅 🚩
Juan Pablo Pérez lantes
Posted on December 30, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
