aethex-studio/TEST_README.md

Testing Guide for AeThex Studio

Overview

AeThex Studio uses Vitest and React Testing Library for testing. This setup provides fast, modern testing with excellent TypeScript support.

Prerequisites

Install testing dependencies:

npm install -D vitest @vitest/ui @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom @vitejs/plugin-react

Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with UI
npm run test:ui

# Generate coverage report
npm run test:coverage

Test Structure

src/
├── components/
│   ├── __tests__/
│   │   └── ErrorBoundary.test.tsx
│   └── ui/
│       └── __tests__/
│           └── loading-spinner.test.tsx
├── hooks/
│   └── __tests__/
│       ├── use-keyboard-shortcuts.test.ts
│       └── use-mobile.test.ts
└── test/
    └── setup.ts

Writing Tests

Component Tests

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

describe('YourComponent', () => {
  it('should render correctly', () => {
    render(<YourComponent />);
    expect(screen.getByText('Expected Text')).toBeInTheDocument();
  });
});

Hook Tests

import { describe, it, expect } from 'vitest';
import { renderHook } from '@testing-library/react';
import { useYourHook } from '../useYourHook';

describe('useYourHook', () => {
  it('should return expected value', () => {
    const { result } = renderHook(() => useYourHook());
    expect(result.current).toBe(expectedValue);
  });
});

Test Coverage

Current coverage for tested components:

• ✅ ErrorBoundary: Full coverage
• ✅ LoadingSpinner: Full coverage
• ✅ useKeyboardShortcuts: Core functionality
• ✅ useIsMobile: Breakpoint logic

Coverage Goals

• Unit Tests: 80%+ coverage
• Integration Tests: Critical user flows
• E2E Tests: Main features (future)

Best Practices

1. Arrange-Act-Assert: Structure tests clearly
2. Test behavior, not implementation: Focus on what users see
3. Use data-testid sparingly: Prefer accessible queries
4. Mock external dependencies: Keep tests isolated
5. Keep tests simple: One concept per test

Mocking

Window APIs

Already mocked in src/test/setup.ts:

• window.matchMedia
• IntersectionObserver
• ResizeObserver

Custom Mocks

vi.mock('../yourModule', () => ({
  yourFunction: vi.fn(),
}));

CI/CD Integration

Add to your CI pipeline:

- name: Run Tests
  run: npm test

- name: Check Coverage
  run: npm run test:coverage

Debugging Tests

# Run specific test file
npm test -- ErrorBoundary.test.tsx

# Run tests matching pattern
npm test -- --grep "keyboard"

# Debug in VS Code
# Add breakpoint and use "Debug Test" in test file

Resources

• Vitest Documentation
• React Testing Library
• Testing Best Practices

Future Enhancements

• Add E2E tests with Playwright
• Set up visual regression testing
• Add performance testing
• Implement mutation testing
• Add integration tests for API calls