Vite + Testing + Jest - Completo

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. Para componentes que importen CSS, crear un archivo llamado: tests/mocks/styleMock.js

module.exports = {};

6. Opcional, pero eventualmente necesario, crear Jest config y setup:

jest.config.js

module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.js'],
    transformIgnorePatterns: [],
    
    // ModuleNameMapper sólo si ocupamos importar CSS en nuestros componentes para el testing
    moduleNameMapper: {
        '\\.(css|less)$': '<rootDir>/tests/mocks/styleMock.js',
    },
}

jest.setup.js

// En caso de necesitar la implementación del FetchAPI
// yarn add -D whatwg-fetch
// import 'whatwg-fetch'; 

// En caso de encontrar paquetes que lo requieran 
// yarn add -D setimmediate
// import 'setimmediate';

// En caso de tener variables de entorno y aún no soporta el import.meta.env
// yarn add -D dotenv
// require('dotenv').config({
//     path: '.env.test'
// });

// Realizar el mock completo de las variables de entorno
// jest.mock('./src/helpers/getEnvVariables', () => ({
//     getEnvVariables: () => ({ ...process.env })
// }));

Muchas Gracias Fernando, por tanto profesionalismo y tu increíble pedagogía durante el curso...!

Me arroja este error, alguien sabe cómo solucionarlo?:

tests/heroes/pages/SearchPage.test.jsx
● Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

.
.
.
SyntaxError: Cannot use import statement outside a module

  1 | import { useLocation, useNavigate } from 'react-router-dom';
  2 | // Primero se instalo en la consola con npm install query-string
> 3 | import queryString from 'query-string';
    | ^
  4 |
  5 | import { useForm } from '../../hooks/useForm';
  6 | import { HeroCard } from '../components';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
  at Object.require (src/heroes/pages/SearchPage.jsx:3:1)
  at Object.require (src/heroes/pages/index.js:5:1)
  at Object.require (src/heroes/index.js:3:1)
  at Object.require (tests/heroes/pages/SearchPage.test.jsx:4:1)