Skip to main content

Frontend Testing Guide

This guide covers how to test React components in Gofannon using Vitest.

Overview​

Frontend tests use Vitest with React Testing Library to test React components in isolation.

Running Frontend Tests​

cd webapp/packages/webui

# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Run tests in watch mode
pnpm test:watch

Test Location​

Frontend tests are co-located with components:

src/components/
  ActionCard.jsx
  ActionCard.test.jsx  # Test file next to component

Writing Component Tests​

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    render(<MyComponent title="Test" />);
    expect(screen.getByText('Test')).toBeInTheDocument();
  });
});

Configuration​

Vitest configuration is in webapp/packages/webui/vitest.config.ts.