ScaleRocket/Web

Testing

How to write and run tests using Vitest in the ScaleRocket monorepo.

Overview

ScaleRocket uses Vitest for unit and integration testing. Vitest is already configured in the monorepo and works out of the box with TypeScript, JSX, and path aliases.

Running Tests

# Run all tests once
pnpm test

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

You can also run tests for a specific app or package:

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

Test File Location

Test files live in the src/test/ directory of each app or package:

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

Test files should use the .test.ts or .test.tsx extension.

Example 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");
  });
});

Testing Utilities

The src/test/setup.ts file runs before all tests and provides shared mocks and 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 }),
    },
  },
}));

This setup file is referenced in your Vitest config:

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

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

Done reading? Mark this page as complete.

On this page