ScaleRocket/Web

Tests

Comment écrire et exécuter des tests avec Vitest dans le monorepo ScaleRocket.

Vue d'ensemble

ScaleRocket utilise Vitest pour les tests unitaires et d'intégration. Vitest est déjà configuré dans le monorepo et fonctionne directement avec TypeScript, JSX et les alias de chemins.

Exécuter les tests

# Run all tests once
pnpm test

# Run tests in watch mode (re-runs on file changes)
pnpm test:watch

Vous pouvez aussi exécuter les tests pour une application ou un package spécifique :

pnpm --filter app test
pnpm --filter config test

Emplacement des fichiers de test

Les fichiers de test se trouvent dans le répertoire src/test/ de chaque application ou package :

apps/app/
├── src/
│   ├── test/
│   │   ├── setup.ts          # Test setup and mocks
│   │   ├── example.test.ts   # Example test file
│   │   └── ...
│   └── ...
├── vitest.config.ts
└── ...

Les fichiers de test doivent utiliser l'extension .test.ts ou .test.tsx.

Exemple de test

// src/test/example.test.ts
import { describe, it, expect } from "vitest";

describe("example", () => {
  it("should add two numbers", () => {
    expect(1 + 2).toBe(3);
  });

  it("should handle string concatenation", () => {
    const greeting = `Hello, ${"World"}`;
    expect(greeting).toBe("Hello, World");
  });
});

Utilitaires de test

Le fichier src/test/setup.ts s'exécute avant tous les tests et fournit des mocks partagés et la configuration :

// src/test/setup.ts
import { vi } from "vitest";

// Mock Supabase client
vi.mock("@/lib/supabase", () => ({
  supabase: {
    auth: {
      getSession: vi.fn().mockResolvedValue({ data: { session: null } }),
      onAuthStateChange: vi.fn().mockReturnValue({
        data: { subscription: { unsubscribe: vi.fn() } },
      }),
    },
    from: vi.fn().mockReturnValue({
      select: vi.fn().mockReturnThis(),
      eq: vi.fn().mockReturnThis(),
      single: vi.fn().mockResolvedValue({ data: null, error: null }),
    }),
    functions: {
      invoke: vi.fn().mockResolvedValue({ data: null, error: null }),
    },
  },
}));

Ce fichier de configuration est référencé dans votre configuration Vitest :

// vitest.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    setupFiles: ["./src/test/setup.ts"],
  },
});

Fini ? Marquez cette page comme terminée.

On this page