Vite + Jest + React Testing Library - Configuraciones a seguir

vite-testing-config.md

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 mi caso me funcionó creando como babel.config.cjs, jest.config.cjs, jest.setep.js. Además, tuve unos problemas al hacer testing, pues no reconocía el css. Se solucionó al colocar en el jest.config.cjs
module.exports={
testEnvironment:'jest-environment-jsdom',
setupFiles:['./jest.setup.js']
,moduleNameMapper: {
'\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'/mocks/fileMock.js',
'\.(css|less)$': 'identity-obj-proxy',
}
}
Por todo lo demás, excelente Fernando!

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

Me funcionaron de maravilla.

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!

Mil gracias!

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!

Gracias!!