​

Frontend Testing (Vitest)

​

How it works

​

1) Vitest is configured in vite.config.ts

test: {
  globals: true,
  environment: "jsdom",
  setupFiles: "./src/test/setup.ts",
  css: true,
}

​

2) Test setup is run before each file

​

3) Follow the existing file + naming conventions

• @testing-library/react
• Vitest (describe, it, expect, vi)

​

Extending this system

1. Create a new spec file under __tests__/ next to the code under test.

2. Write assertions using Testing Library queries:

import { render, screen, fireEvent } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { TextInput } from "../textInput";

describe("TextInput", () => {
  it("should render a text input field", () => {
    render(<TextInput label="Username" />);
    const input = screen.getByLabelText("Username");
    expect(input).toBeInTheDocument();
  });
});

3. If you test server data, use Apollo mocks (via existing project patterns) rather than real network calls.
4. Verify:

make test module=portal

​

What not to do

​

File conventions

• one responsibility per test file
• descriptive describe / it strings that match user behavior

​

What’s next?

• Frontend Forms (React Hook Form)
• Frontend Error Handling