CarmeloRicarte

// this is how to mock partial library for mock a method, in this case, useNavigate
const mockedUseNavigate = vi.fn();
vi.mock("react-router-dom", async () => {
  const mod = await vi.importActual<typeof import("react-router-dom")>(
    "react-router-dom"
  );
  return {
    ...mod,
    useNavigate: () => mockedUseNavigate,
  };

CarmeloRicarte

1. Instalaciones
   yarn add -D vitest jsdom @vitest/ui @testing-library/react @testing-library/jest-dom @vitest/coverage-c8
2. Configuraciones
   2.1 Crear el archivo setupTests.ts en el root con lo siguiente:
   import "@testing-library/jest-dom";
import matchers from "@testing-library/jest-dom/matchers";
import { expect } from "vitest";
expect.extend(matchers);
   2.2 En el tsconfig.json, insertar lo siguiente dentro de compilerOptions: "types": ["vitest/globals"]\

CarmeloRicarte

1. Instalaciones
   yarn add -D vitest jsdom @vitest/ui @testing-library/react @vitest/coverage-c8
2. Configuraciones
   2.1 En vite.config.js, añadir lo siguiente al defineConfig:
   test: { environment: 'jsdom', globals: true }
   2.2 En package.json, añadir lo siguiente dentro de scripts:
   "test": "vitest",
   "test:ui": "vitest --ui",\

CarmeloRicarte

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:

CarmeloRicarte

function parseJwt (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace('-', '+').replace('_', '/');
    return JSON.parse(window.atob(base64));
};