Skip to content

Instantly share code, notes, and snippets.

@Klerith
Last active December 4, 2024 16:14
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
@cquesadad
Copy link

cjs

Genial! Me ha funcionado con solo ese cambio

@AlanDev24
Copy link

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 },
],
},
}
imagen_2024-04-03_223854586

@DavidGRamiro
Copy link

DavidGRamiro commented May 11, 2024

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" ] } }

@Laura-Urb
Copy link

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

@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