Skip to content

Frontend Test Infrastructure Setup - Complete

Date: 5 February 2026 Status: ✅ Complete and Working

Summary

Comprehensive test infrastructure has been set up for the Quill Medical frontend to support writing unit and integration tests for React components, hooks, and utilities.

What Was Created

Configuration Files

  1. frontend/vitest.config.ts - Vitest test runner configuration
  2. Enables jsdom environment for DOM testing
  3. Configures test setup file
  4. Sets up coverage reporting (v8 provider)

  5. Excludes appropriate files from coverage

  6. frontend/src/test/setup.ts - Global test setup

  7. Imports jest-dom matchers for Vitest
  8. Configures automatic cleanup after each test
  9. Mocks browser APIs (matchMedia, IntersectionObserver, ResizeObserver)

  10. Ensures consistent test environment

  11. frontend/src/test/test-utils.tsx - Custom testing utilities

  12. renderWithMantine() - Render components with Mantine provider
  13. renderWithRouter() - Render components with Router and Mantine
  14. createMockResponse() - Helper for mocking fetch responses

  15. waitForCondition() - Flexible async waiting utility

  16. frontend/src/test/infrastructure.test.tsx - Verification tests

  17. 9 tests that verify the infrastructure works correctly
  18. Tests jest-dom matchers, render utilities, user-event, and mock helpers

  19. Serves as examples for writing new tests

  20. frontend/src/test/README.md - Comprehensive testing guide

  21. Documentation on how to write tests
  22. Examples for common testing scenarios
  23. Best practices and troubleshooting

  24. Coverage configuration

  25. frontend/package.json - Added coverage script

  26. yarn unit-test:coverage command for coverage reports

Test Results

✓ .storybook/utils/useBreakPoint.test.tsx (5 tests)
✓ src/test/infrastructure.test.tsx (9 tests)

Test Files: 2 passed (2)
Tests: 14 passed (14)
Duration: ~2s

Features Enabled

Jest-DOM Matchers

All matchers from @testing-library/jest-dom are now available:

expect(element).toBeInTheDocument();
expect(element).toBeVisible();
expect(element).toBeDisabled();
expect(element).toHaveTextContent("text");
// ... and many more

User Event Testing

User interactions can be tested realistically:

const user = userEvent.setup();
await user.click(button);
await user.type(input, "text");

Custom Render Functions

Components can be rendered with required providers:

// For Mantine components
renderWithMantine(<MyComponent />);

// For components using routing
renderWithRouter(<LoginPage />);

Mock Helpers

Easy creation of mock responses:

global.fetch = vi.fn().mockResolvedValue(createMockResponse({ data: "test" }));

Dependencies Already Installed

All necessary testing libraries were already in package.json:

  • ✅ vitest - Test runner
  • ✅ @testing-library/react - React testing utilities
  • ✅ @testing-library/jest-dom - DOM matchers
  • ✅ @testing-library/user-event - User interaction simulation
  • ✅ jsdom - Browser environment simulation

No additional packages needed to be installed.

Usage

Run Tests

# Interactive watch mode
yarn unit-test

# CI mode (run once)
yarn unit-test:run

# With coverage
yarn unit-test:coverage

# Via Justfile (in Docker)
just unit-tests-frontend

Write a Test

import { describe, it, expect } from "vitest";
import { screen } from "@testing-library/react";
import { renderWithMantine } from "@/test/test-utils";
import MyComponent from "./MyComponent";

describe("MyComponent", () => {
  it("renders correctly", () => {
    renderWithMantine(<MyComponent />);
    expect(screen.getByText("Hello")).toBeInTheDocument();
  });
});

Next Steps

Now that the test infrastructure is complete, you can:

  1. Write tests for critical components:
  2. API client (src/lib/api.ts)
  3. Auth context (src/auth/AuthContext.tsx)
  4. Login page (src/pages/LoginPage.tsx)

  5. Patient management components

  6. Run tests regularly:

  7. During development: yarn unit-test (watch mode)
  8. Before commits: just unit-tests-frontend

  9. Check coverage: yarn unit-test:coverage

  10. Follow the testing guide:

  11. See frontend/src/test/README.md for examples
  12. Look at infrastructure.test.tsx for patterns
  13. Use semantic queries (getByRole, getByLabelText)

Files Modified

  • ✅ Created: frontend/vitest.config.ts
  • ✅ Created: frontend/src/test/setup.ts
  • ✅ Created: frontend/src/test/test-utils.tsx
  • ✅ Created: frontend/src/test/infrastructure.test.tsx
  • ✅ Created: frontend/src/test/README.md
  • ✅ Modified: frontend/package.json (added coverage script)

Verification

All tests passing:

  • ✅ 5 existing tests (useBreakPoint)
  • ✅ 9 new infrastructure tests
  • ✅ Total: 14 tests passing

The test infrastructure is now ready for comprehensive test coverage development.