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 el error de la configuración de jest, le solucione cambiando el babel.config.js a "babel.config.json", me quedó de la siguiente manera: { "presets": [ [ "@babel/preset-env", { "targets": { "esmodules": true } } ], [ "@babel/preset-react", { "runtime": "automatic" } ] ] } Al hacer este cambio, y cambiar en el jest.config.js a: export default { testEnvironment: 'jest-environment-jsdom', setupFiles: ['./jest.setup.js'] } Ya funciona normalmente, con las configuraciones que Fernando establece al inicio

Gracias me funcionó

si les tira error, solo tienen quye renommbrar el archivo jest.config.js a jest.config.cjs, solo cambiando la extension lo arregla.

aplique todas las intalaciones siguiendo los pasos y no se porque no me funciona, El profesor deberia de usar otra libreria de test como vites.

Creo que en la lista de instalaciones hay que agregar @babel/core

si les aparece un error como este "ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' ", tiene que ambiar el archivo yest.config.js a yest.config.cjs

Gracias!!

SOLUCIÖN

Thanks! :)

A algunos nos aparece un error de este tipo

hay que re nombrar los tres archivos con terminacion .cjs

y todo andara bien después:

export default { testEnvironment: 'jest-environment-jsdom', setupFiles: ['./jest.setup.js'] }

Esto me funciono gracias

Gracias... esto faltaba para permitir utilizar esta expresión

import { renderHook } from "@testing-library/react";

En ves de utilizar require("@testing-library/react")

Realice la configuración

for all those whom has issues setting the enviroment along jest and react testing library, you should not use the "commonjs" : "module" at the package.json if the files created has the .js file type assigned, once you check that, you should match the dependencies on the original package.json file made by Fernando H. attached at the end of the lesson seccion 5, and run the next commnads on yarn , yarn install --inmmutable , yarn clean cache , yarn bin , yarn test this willl works. cause if you wants to use the common js the solution for all those errors is to switch npm and manage the babel configs} for a better set experience.

Hola comunidad les comparto que tambien tuve los mismos errores que la mayoria de ustedes, les compartire cada unos de mis archivos por si alguien lo necesita. Estos son mis settings segun cada archivo solo tuve que cambiar una extension y fue en babel js a cjs y en el "eslintrc.js" agregue node=true (segun internet) "env: { browser: true, node: true, es2020: true}" y en los plugins agregue " plugins: ['react-refresh', 'jest'],
"

Realice la configuración como lo indicas pero me arrojo el siguiente error,

Hola hay una solución sobre eso. cambia el nombre del archivo bablel.config.js a babel.config.cjs y haz lo mismo con el archivo de jes.config.js; cambialo a jest.config.cjs. Es lo que soluciono -> Fernando que esta en las sección de preguntas. Seria bueno que actualice esto en el readme. @Klerith Es solo una sugerencia. jejeje

Yo tambien lo pude solucionar en el package.json donde "name": "journal-app", "private": true, "version": "0.0.0", debajo de esta linea aparece algo de module y eso lo borre, dejandolo asi { "name": "journal-app", "private": true, "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "test": "jest --watchAll" },

Solo nececitas cambiar la extencion "jest.config.js" a "jest.config.cjs

Funciona, gracias

Hola!! Quería comentar que tuve un problema con el testing a la hora de hacer los test a componentes, me aparecían los problemas antes mencionados por algunos de ustedes como el de los ".cjs" pero además me lanzaba un error: ReferenceError: React is not defined

y encontré este post en StackOverflow
y agregando unas lineas de código en el archivo jest.setup.js me funcionó:

jest.setup.js :

import 'whatwg-fetch';
import React from 'react';
global.React = React;

Además del instructivo para que me funcionara tuve que cambiarle la extensión al jest.config.js a jest.config.cjs, también el babel.config.js a babel.config.cjs y ejecutar el comando yarn add -D jest-environment-jsdom

cjs

Genial! Me ha funcionado con solo ese cambio

Si aun tienes problemas incluso despues de cambiar la extencion a cjs, puede que estes usando una version mas actual y debes agregar "module:true" en el archivo .eslint.cjs
module.exports = {
root: true,
env: { browser: true, es2020: true, module: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react/prop-types': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

No me autocompleta absolutamente nada de JEST, alguna solución ? Librerías instaladas, y todo corriendo, TEST pasan, pero por ejemplo, en los expect(). -> No me da absolutamente ninguna ayuda al método que quiero utilizar y tengo que escribirlo a mano .

Demasiado complicado utilizar JEST con todas las configuraciones que tiene. Estoy seguro de que tienen que existir alternativas. Con esto solo se consigue que no quiera hacer absolutamente ninguna prueba.

Conseguido. Investigando por StackOverFlow. A nivel root del proyecto o de la carpeta test, hay que crear un archivo, llamado jsconfig.js.
Dentro de este, añadir

{ "typeAcquisition": { "include": [ "jest" ] } }

Dejo esto para los que tienen memoria de pajarito, son vagos para escribir como yo, y tiene que estar buscando constantemente el equivalente en npm:
Instalaciones:
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
Opcional:
Si usamos Fetch API en el proyecto:
npm install whatwg-fetch --save-dev

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!

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!

Me Resulto bien las configuraciones, tuve que hacer alguna modificaciones con typescript pero se pudo

No me autocompleta absolutamente nada de JEST, alguna solución ? Librerías instaladas, y todo corriendo, TEST pasan, pero por ejemplo, en los expect(). -> No me da absolutamente ninguna ayuda al método que quiero utilizar y tengo que escribirlo a mano .

Demasiado complicado utilizar JEST con todas las configuraciones que tiene. Estoy seguro de que tienen que existir alternativas. Con esto solo se consigue que no quiera hacer absolutamente ninguna prueba.

Conseguido. Investigando por StackOverFlow. A nivel root del proyecto o de la carpeta test, hay que crear un archivo, llamado jsconfig.js. Dentro de este, añadir

{ "typeAcquisition": { "include": [ "jest" ] } }

Yo agregue eso que indicas y si funciono, PEROOOOO, encontre algo mas, haciendo la accion de guardar nuevamente al 'babel.config' empezo a funcionar el autocompletado de JEST, jajaja muy raro-.

Para que funcione en react 18.3.1 , tuve que remover el "type":"module" y hacer cambios extras en los archivos de configuracion de jest y de babel.
Asi quedaron mis archivos.

package.json

{
  "name": "gift-expert-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "test": "jest --watchAll"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.26.3",
    "@eslint/js": "^9.17.0",
    "@testing-library/react": "^16.2.0",
    "@types/jest": "^29.5.14",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "babel-jest": "^29.7.0",
    "eslint": "^9.17.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "vite": "^6.0.5",
    "whatwg-fetch": "^3.6.20"
  }
} 

jest.setup.js

import 'whatwg-fetch';

jest.config.js

/** @type {import('jest').Config} */
module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.js'],
    moduleNameMapper: {
        "^.+\\.(css|less|scss)$": "identity-obj-proxy"
    }
}

babel.config.js

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

Y despues hacer lo siguiente:

rm -rf node_modules
rm package-lock.json
npm install
npm test

Hola saludos para todos me podrian ayudar con la actualizacion de la guia para la version de React 19, Jest 29.7 y Testing Library muchas gracias, agradezco su colaboracion.

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!