Skip to content

Instantly share code, notes, and snippets.

@Klerith
Last active May 22, 2024 19:08
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
@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" ] } }

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