Configura Cypress y Vitest en tu proyecto Vite

Instalación de vitest

npm install -D vitest

En el archivo tsconfig.node.json, o cualquier archivo de configuración de TypeScript

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  },
  "include": ["vite.config.ts", "__tests__/**/*"]
}

Añade el siguiente código a vite.config.ts:

import { defineConfig } from "vitest/config";

export default defineConfig({
  // ... otras configuraciones de Vite
  test: {
    globals: true,
    // Aquí irán tus configuraciones de Vitest
  },
});

Añade el comando a tu package.json:

"scripts": {
  // Otros comandos...
  "test": "vitest",
},

Crea una nueva carpeta llamada __tests__ en la raíz de tu proyecto y dentro de ella crea el archivo sum.test.ts de pruebas con el siguiente contenido:

describe("Primer test", () => {
  test("debería pasar", () => {
    expect(1 + 1).toBe(2);
  });
});

Ejecuta los tests para saber si todo está funcionando correctamente:

npm run test

Si no hay errores, puedes continuar con la configuración de Cypress.

Instalación de Cypress

npm install -D cypress

Añade los siguientes comandos a tu package.json:

"scripts": {
  // Otros comandos...
  "cy:open": "cypress open",
  "cy:run": "cypress run",
},

Ejecuta el comando para abrir Cypress:

npm run cy:open

En la ventana emergente selecciona E2E Testing para crear la estructura de archivos de Cypress y haz click en continuar.

Puede que te aparezca un error como el siguiente:

En ese caso, elimina la siguiente línea de tu package.json y haz click en try again:

{
  "type": "module" // Elimina esta línea
}

Crea un nuevo archivo tsconfig.json dentro de la carpeta cypress con el siguiente contenido:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

Por último crea un archivo de ejemplo en cypress/e2e/ con el nombre example.cy.ts y agrega el siguiente contenido:

describe("template spec", () => {
  it("passes", () => {
    cy.visit("https://example.cypress.io");
  });
});

Ejecuta el comando para correr los tests de Cypress:

npm run cy:run

¡Y ya todo debería estar funcionando correctamente! 🎉🎉🎉

Si quieres ver el código completo haz click aquí