Skip to content

Instantly share code, notes, and snippets.

@Klerith
Last active July 22, 2024 19:01
Show Gist options
  • Save Klerith/ca7e57fae3c9ab92ad08baadc6c26177 to your computer and use it in GitHub Desktop.
Save Klerith/ca7e57fae3c9ab92ad08baadc6c26177 to your computer and use it in GitHub Desktop.
Vite + Jest + React Testing Library - Configuraciones a seguir

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
  1. Opcional: Si usamos Fetch API en el proyecto:
yarn add --dev whatwg-fetch
  1. Actualizar los scripts del package.json
"scripts: {
  ...
  "test": "jest --watchAll"
  1. Crear la configuración de babel babel.config.js
module.exports = {
    presets: [
        [ '@babel/preset-env', { targets: { esmodules: true } } ],
        [ '@babel/preset-react', { runtime: 'automatic' } ],
    ],
};
  1. 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
@eugeniopch
Copy link

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

Muchas gracias Laura-Urb!

@blaragdev
Copy link

hola, estoy haciendo el curso y pase por todos los errores que mencionan arribas + otros que fueron reflejados por otros compañeros en udemy. Dare mis configuraciones por si alguien las necesita.

1.- instalaciones (npm):


npm install jest babel-jest @babel/preset-env @babel/preset-react --save-dev

npm install @testing-library/react @types/jest jest-environment-jsdom --save-dev

npm install whatwg-fetch --save-dev

npm i --save-dev @types/whatwg-fetch"

npm i prop-types

2.- crear y cambiar extensiones:
babel.config.js a babel.config.cjs

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

jest.config.cjs (crear si no existe con las configuraciones)

module.exports = {
  testEnvironment: "jest-environment-jsdom",
  setupFiles: ["./jest.setup.cjs"],
};

jest.setup.cjs (crear si no existe con las configuraciones necesarias)

module.exports = require("whatwg-fetch");

Saludos!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment