@jmruthers/pace-core 0.2.4

package/docs/testing/README.md

@@ -0,0 +1,874 @@
+# Testing Guide
+
+This guide covers testing strategies, patterns, and best practices for applications built with PACE Core.
+
+## Overview
+
+PACE Core provides comprehensive testing support with:
+
+- **Unit testing** utilities for components and hooks
+- **Integration testing** patterns for complex workflows
+- **Accessibility testing** with jest-axe integration
+- **Visual regression testing** for UI components
+- **Performance testing** for optimization
+- **Mock utilities** for authentication and RBAC
+
+## Testing Setup
+
+### 1. Basic Testing Configuration
+
+```tsx
+// vitest.setup.ts
+import '@testing-library/jest-dom/vitest';
+import { vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  ChevronDown: vi.fn(() => <svg data-testid="mock-chevron-down" />),
+  ChevronUp: vi.fn(() => <svg data-testid="mock-chevron-up" />),
+  // Add other icons as needed
+}));
+
+// Mock Supabase client
+const createChainableMock = () => ({
+  select: vi.fn().mockReturnThis(),
+  eq: vi.fn().mockReturnThis(),
+  in: vi.fn().mockReturnThis(),
+  order: vi.fn().mockReturnThis(),
+  limit: vi.fn().mockReturnThis(),
+  single: vi.fn().mockResolvedValue({ data: null, error: null }),
+  maybeSingle: vi.fn().mockResolvedValue({ data: null, error: null }),
+  insert: vi.fn().mockResolvedValue({ data: [], error: null }),
+  update: vi.fn().mockResolvedValue({ data: [], error: null }),
+  delete: vi.fn().mockResolvedValue({ data: [], error: null }),
+});
+
+vi.mock('@supabase/supabase-js', () => ({
+  createClient: vi.fn().mockReturnValue({
+    from: vi.fn().mockImplementation(createChainableMock),
+    auth: {
+      getUser: vi.fn().mockResolvedValue({ data: { user: mockUser }, error: null }),
+      getSession: vi.fn().mockResolvedValue({ data: { session: mockSession }, error: null }),
+      onAuthStateChange: vi.fn().mockReturnValue({ data: { subscription: { unsubscribe: vi.fn() } } }),
+      signInWithPassword: vi.fn().mockResolvedValue({ data: { user: mockUser, session: mockSession }, error: null }),
+      signUp: vi.fn().mockResolvedValue({ data: { user: mockUser, session: mockSession }, error: null }),
+      signOut: vi.fn().mockResolvedValue({ error: null }),
+      resetPasswordForEmail: vi.fn().mockResolvedValue({ error: null }),
+      updateUser: vi.fn().mockResolvedValue({ data: { user: mockUser }, error: null }),
+    },
+    rpc: vi.fn().mockResolvedValue({ data: [], error: null }),
+  }),
+}));
+
+// Runs cleanup after each test case
+afterEach(() => {
+  cleanup();
+});
+```
+
+### 2. Test Utilities
+
+```tsx
+// test-utils.tsx
+import { render, RenderOptions } from '@testing-library/react';
+import { ReactElement } from 'react';
+import { UnifiedAuthProvider } from '@jmruthers/pace-core';
+
+const mockUser = {
+  id: 'user-123',
+  email: 'test@example.com',
+  user_metadata: {
+    global_role: 'user'
+  }
+};
+
+const mockSession = {
+  user: mockUser,
+  access_token: 'mock-token',
+  refresh_token: 'mock-refresh-token'
+};
+
+const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <UnifiedAuthProvider
+      supabaseClient={mockSupabaseClient}
+      initialUser={mockUser}
+      initialSession={mockSession}
+    >
+      {children}
+    </UnifiedAuthProvider>
+  );
+};
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+) => render(ui, { wrapper: AllTheProviders, ...options });
+
+export * from '@testing-library/react';
+export { customRender as render };
+```
+
+## Component Testing
+
+### 1. Basic Component Tests
+
+```tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from '@jmruthers/pace-core';
+
+describe('Button Component', () => {
+  test('renders with correct text', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  test('calls onClick when clicked', () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    
+    fireEvent.click(screen.getByText('Click me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('applies correct variant classes', () => {
+    render(<Button variant="destructive">Delete</Button>);
+    const button = screen.getByText('Delete');
+    expect(button).toHaveClass('bg-destructive');
+  });
+
+  test('is disabled when disabled prop is true', () => {
+    render(<Button disabled>Disabled</Button>);
+    const button = screen.getByText('Disabled');
+    expect(button).toBeDisabled();
+  });
+});
+```
+
+### 2. Form Component Tests
+
+```tsx
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Form, FormField, Button } from '@jmruthers/pace-core';
+import { z } from 'zod';
+
+const userSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Invalid email address')
+});
+
+describe('Form Component', () => {
+  test('submits form with valid data', async () => {
+    const user = userEvent.setup();
+    const handleSubmit = jest.fn();
+
+    render(
+      <Form schema={userSchema} onSubmit={handleSubmit}>
+        <FormField name="name" label="Name" />
+        <FormField name="email" label="Email" type="email" />
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+
+    await user.type(screen.getByLabelText('Name'), 'John Doe');
+    await user.type(screen.getByLabelText('Email'), 'john@example.com');
+    await user.click(screen.getByText('Submit'));
+
+    await waitFor(() => {
+      expect(handleSubmit).toHaveBeenCalledWith({
+        name: 'John Doe',
+        email: 'john@example.com'
+      });
+    });
+  });
+
+  test('shows validation errors for invalid data', async () => {
+    const user = userEvent.setup();
+    const handleSubmit = jest.fn();
+
+    render(
+      <Form schema={userSchema} onSubmit={handleSubmit}>
+        <FormField name="name" label="Name" />
+        <FormField name="email" label="Email" type="email" />
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+
+    await user.type(screen.getByLabelText('Name'), 'J');
+    await user.type(screen.getByLabelText('Email'), 'invalid-email');
+    await user.click(screen.getByText('Submit'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Name must be at least 2 characters')).toBeInTheDocument();
+      expect(screen.getByText('Invalid email address')).toBeInTheDocument();
+    });
+
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+});
+```
+
+### 3. DataTable Component Tests
+
+```tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DataTable } from '@jmruthers/pace-core';
+
+const mockData = [
+  { id: '1', name: 'John Doe', email: 'john@example.com' },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com' }
+];
+
+const mockColumns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' }
+];
+
+describe('DataTable Component', () => {
+  test('renders data correctly', () => {
+    render(
+      <DataTable
+        data={mockData}
+        columns={mockColumns}
+        features={{ search: true, pagination: true }}
+      />
+    );
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+    expect(screen.getByText('john@example.com')).toBeInTheDocument();
+    expect(screen.getByText('jane@example.com')).toBeInTheDocument();
+  });
+
+  test('filters data when searching', async () => {
+    const user = userEvent.setup();
+    
+    render(
+      <DataTable
+        data={mockData}
+        columns={mockColumns}
+        features={{ search: true, pagination: true }}
+      />
+    );
+
+    const searchInput = screen.getByPlaceholderText('Search...');
+    await user.type(searchInput, 'John');
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.queryByText('Jane Smith')).not.toBeInTheDocument();
+  });
+
+  test('calls onEditRow when edit button is clicked', async () => {
+    const user = userEvent.setup();
+    const handleEdit = jest.fn();
+
+    render(
+      <DataTable
+        data={mockData}
+        columns={mockColumns}
+        features={{ search: true, pagination: true, editing: true }}
+        onEditRow={handleEdit}
+      />
+    );
+
+    const editButton = screen.getByLabelText('Edit John Doe');
+    await user.click(editButton);
+
+    expect(handleEdit).toHaveBeenCalledWith(mockData[0], expect.any(Object));
+  });
+});
+```
+
+## Hook Testing
+
+### 1. Authentication Hook Tests
+
+```tsx
+import { renderHook, act } from '@testing-library/react';
+import { useUnifiedAuth } from '@jmruthers/pace-core';
+
+describe('useUnifiedAuth Hook', () => {
+  test('returns user and session when authenticated', () => {
+    const { result } = renderHook(() => useUnifiedAuth(), {
+      wrapper: AllTheProviders
+    });
+
+    expect(result.current.user).toEqual(mockUser);
+    expect(result.current.session).toEqual(mockSession);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  test('handles login correctly', async () => {
+    const { result } = renderHook(() => useUnifiedAuth(), {
+      wrapper: AllTheProviders
+    });
+
+    await act(async () => {
+      await result.current.login('test@example.com', 'password');
+    });
+
+    expect(result.current.user).toBeDefined();
+    expect(result.current.session).toBeDefined();
+  });
+
+  test('handles logout correctly', async () => {
+    const { result } = renderHook(() => useUnifiedAuth(), {
+      wrapper: AllTheProviders
+    });
+
+    await act(async () => {
+      await result.current.logout();
+    });
+
+    expect(result.current.user).toBeNull();
+    expect(result.current.session).toBeNull();
+  });
+});
+```
+
+### 2. RBAC Hook Tests
+
+```tsx
+import { renderHook } from '@testing-library/react';
+import { useCan, useRBAC } from '@jmruthers/pace-core';
+
+// Mock the RBAC hooks
+jest.mock('@jmruthers/pace-core', () => ({
+  ...jest.requireActual('@jmruthers/pace-core'),
+  useCan: jest.fn(),
+  useRBAC: jest.fn()
+}));
+
+describe('RBAC Hooks', () => {
+  test('useCan returns permission checking function', () => {
+    const mockHasPermission = jest.fn().mockReturnValue(true);
+    (useCan as jest.Mock).mockReturnValue({ hasPermission: mockHasPermission });
+
+    const { result } = renderHook(() => useCan());
+
+    expect(result.current.hasPermission('read', 'users')).toBe(true);
+    expect(mockHasPermission).toHaveBeenCalledWith('read', 'users');
+  });
+
+  test('useRBAC returns user roles and permissions', () => {
+    const mockRBAC = {
+      globalRole: 'admin',
+      organisationRole: 'owner',
+      eventAppRole: 'manager',
+      isSuperAdmin: false,
+      hasPermission: jest.fn().mockReturnValue(true)
+    };
+    (useRBAC as jest.Mock).mockReturnValue(mockRBAC);
+
+    const { result } = renderHook(() => useRBAC());
+
+    expect(result.current.globalRole).toBe('admin');
+    expect(result.current.organisationRole).toBe('owner');
+    expect(result.current.eventAppRole).toBe('manager');
+    expect(result.current.isSuperAdmin).toBe(false);
+  });
+});
+```
+
+## Integration Testing
+
+### 1. Authentication Flow Tests
+
+```tsx
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { App } from './App';
+
+describe('Authentication Flow', () => {
+  test('redirects to login when not authenticated', () => {
+    // Mock unauthenticated state
+    jest.mock('@jmruthers/pace-core', () => ({
+      useUnifiedAuth: () => ({ user: null, isLoading: false })
+    }));
+
+    render(<App />);
+
+    expect(screen.getByText('Please log in')).toBeInTheDocument();
+  });
+
+  test('shows dashboard when authenticated', () => {
+    // Mock authenticated state
+    jest.mock('@jmruthers/pace-core', () => ({
+      useUnifiedAuth: () => ({ user: mockUser, isLoading: false })
+    }));
+
+    render(<App />);
+
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+  });
+
+  test('handles login flow correctly', async () => {
+    const user = userEvent.setup();
+    
+    render(<App />);
+
+    // Fill in login form
+    await user.type(screen.getByLabelText('Email'), 'test@example.com');
+    await user.type(screen.getByLabelText('Password'), 'password');
+    
+    // Submit form
+    await user.click(screen.getByText('Log In'));
+
+    // Wait for redirect
+    await waitFor(() => {
+      expect(screen.getByText('Dashboard')).toBeInTheDocument();
+    });
+  });
+});
+```
+
+### 2. Permission Flow Tests
+
+```tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import { App } from './App';
+
+describe('Permission Flow', () => {
+  test('shows admin panel for admin users', () => {
+    // Mock admin user
+    jest.mock('@jmruthers/pace-core', () => ({
+      useRBAC: () => ({ globalRole: 'admin', isSuperAdmin: false }),
+      useCan: () => ({ hasPermission: (op: string, res: string) => res === 'admin_panel' })
+    }));
+
+    render(<App />);
+
+    expect(screen.getByText('Admin Panel')).toBeInTheDocument();
+  });
+
+  test('hides admin panel for non-admin users', () => {
+    // Mock regular user
+    jest.mock('@jmruthers/pace-core', () => ({
+      useRBAC: () => ({ globalRole: 'user', isSuperAdmin: false }),
+      useCan: () => ({ hasPermission: () => false })
+    }));
+
+    render(<App />);
+
+    expect(screen.queryByText('Admin Panel')).not.toBeInTheDocument();
+  });
+
+  test('shows appropriate content based on permissions', () => {
+    // Mock user with specific permissions
+    jest.mock('@jmruthers/pace-core', () => ({
+      useCan: () => ({ 
+        hasPermission: (op: string, res: string) => 
+          res === 'users' && op === 'read'
+      })
+    }));
+
+    render(<App />);
+
+    expect(screen.getByText('User List')).toBeInTheDocument();
+    expect(screen.queryByText('User Management')).not.toBeInTheDocument();
+  });
+});
+```
+
+## Accessibility Testing
+
+### 1. Basic Accessibility Tests
+
+```tsx
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { Button, Card, Form } from '@jmruthers/pace-core';
+
+expect.extend(toHaveNoViolations);
+
+describe('Accessibility Tests', () => {
+  test('Button has no accessibility violations', async () => {
+    const { container } = render(<Button>Click me</Button>);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test('Card has no accessibility violations', async () => {
+    const { container } = render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Test Card</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>Test content</p>
+        </CardContent>
+      </Card>
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test('Form has no accessibility violations', async () => {
+    const { container } = render(
+      <Form schema={z.object({ name: z.string() })} onSubmit={jest.fn()}>
+        <FormField name="name" label="Name" />
+      </Form>
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+```
+
+### 2. Keyboard Navigation Tests
+
+```tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Select, Dialog, Button } from '@jmruthers/pace-core';
+
+describe('Keyboard Navigation', () => {
+  test('Select component supports keyboard navigation', async () => {
+    const user = userEvent.setup();
+    
+    render(
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await user.click(trigger);
+
+    // Test arrow key navigation
+    await user.keyboard('{ArrowDown}');
+    expect(screen.getByText('Option 1')).toHaveFocus();
+
+    await user.keyboard('{ArrowDown}');
+    expect(screen.getByText('Option 2')).toHaveFocus();
+
+    // Test selection with Enter
+    await user.keyboard('{Enter}');
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
+  });
+
+  test('Dialog supports keyboard navigation', async () => {
+    const user = userEvent.setup();
+    
+    render(
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button>Open Dialog</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Test Dialog</DialogTitle>
+          <DialogDescription>Test description</DialogDescription>
+        </DialogContent>
+      </Dialog>
+    );
+
+    // Open dialog
+    await user.click(screen.getByText('Open Dialog'));
+
+    // Test Escape key closes dialog
+    await user.keyboard('{Escape}');
+    expect(screen.queryByText('Test Dialog')).not.toBeInTheDocument();
+  });
+});
+```
+
+## Visual Regression Testing
+
+### 1. Component Snapshots
+
+```tsx
+import { render } from '@testing-library/react';
+import { Button, Card, Alert } from '@jmruthers/pace-core';
+
+describe('Visual Regression Tests', () => {
+  test('Button renders correctly', () => {
+    const { container } = render(<Button>Click me</Button>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('Card renders correctly', () => {
+    const { container } = render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Test Card</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>Test content</p>
+        </CardContent>
+      </Card>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('Alert renders correctly', () => {
+    const { container } = render(
+      <Alert variant="destructive">
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>Something went wrong</AlertDescription>
+      </Alert>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+```
+
+### 2. Theme Testing
+
+```tsx
+import { render } from '@testing-library/react';
+import { Button } from '@jmruthers/pace-core';
+
+describe('Component Tests', () => {
+  test('Button renders correctly', () => {
+    const { container } = render(
+      <Button>Test Button</Button>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('Button renders correctly', () => {
+    const { container } = render(
+      <Button>Test Button</Button>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+```
+
+## Performance Testing
+
+### 1. Component Performance Tests
+
+```tsx
+import { render } from '@testing-library/react';
+import { DataTable } from '@jmruthers/pace-core';
+
+describe('Performance Tests', () => {
+  test('DataTable renders large dataset efficiently', () => {
+    const largeDataset = Array.from({ length: 1000 }, (_, i) => ({
+      id: i.toString(),
+      name: `User ${i}`,
+      email: `user${i}@example.com`
+    }));
+
+    const startTime = performance.now();
+    render(
+      <DataTable
+        data={largeDataset}
+        columns={[
+          { accessorKey: 'name', header: 'Name' },
+          { accessorKey: 'email', header: 'Email' }
+        ]}
+        features={{ search: true, pagination: true }}
+      />
+    );
+    const endTime = performance.now();
+
+    // Should render within 100ms
+    expect(endTime - startTime).toBeLessThan(100);
+  });
+
+  test('DataTable handles rapid updates efficiently', () => {
+    const { rerender } = render(
+      <DataTable
+        data={[]}
+        columns={[]}
+        features={{ search: true, pagination: true }}
+      />
+    );
+
+    const startTime = performance.now();
+    
+    // Simulate rapid updates
+    for (let i = 0; i < 100; i++) {
+      rerender(
+        <DataTable
+          data={Array.from({ length: i * 10 }, (_, j) => ({
+            id: j.toString(),
+            name: `User ${j}`
+          }))}
+          columns={[{ accessorKey: 'name', header: 'Name' }]}
+          features={{ search: true, pagination: true }}
+        />
+      );
+    }
+    
+    const endTime = performance.now();
+
+    // Should handle 100 updates within 500ms
+    expect(endTime - startTime).toBeLessThan(500);
+  });
+});
+```
+
+## Mock Utilities
+
+### 1. Authentication Mocks
+
+```tsx
+// mocks/auth.ts
+export const mockUser = {
+  id: 'user-123',
+  email: 'test@example.com',
+  user_metadata: {
+    global_role: 'user'
+  }
+};
+
+export const mockSession = {
+  user: mockUser,
+  access_token: 'mock-token',
+  refresh_token: 'mock-refresh-token'
+};
+
+export const mockAuthState = {
+  user: mockUser,
+  session: mockSession,
+  isLoading: false,
+  login: jest.fn(),
+  logout: jest.fn(),
+  signUp: jest.fn(),
+  resetPassword: jest.fn()
+};
+```
+
+### 2. RBAC Mocks
+
+```tsx
+// mocks/rbac.ts
+export const mockRBACState = {
+  globalRole: 'user',
+  organisationRole: 'member',
+  eventAppRole: 'participant',
+  isSuperAdmin: false,
+  hasPermission: jest.fn().mockReturnValue(true),
+  hasAccessLevel: jest.fn().mockReturnValue(true),
+  isLoading: false,
+  error: null
+};
+
+export const mockPermissionState = {
+  hasPermission: jest.fn().mockReturnValue(true),
+  hasAnyPermission: jest.fn().mockReturnValue(true),
+  hasAllPermissions: jest.fn().mockReturnValue(true),
+  isLoading: false,
+  error: null
+};
+```
+
+### 3. API Mocks
+
+```tsx
+// mocks/api.ts
+export const mockSupabaseClient = {
+  from: jest.fn().mockReturnValue({
+    select: jest.fn().mockReturnThis(),
+    eq: jest.fn().mockReturnThis(),
+    insert: jest.fn().mockResolvedValue({ data: [], error: null }),
+    update: jest.fn().mockResolvedValue({ data: [], error: null }),
+    delete: jest.fn().mockResolvedValue({ data: [], error: null })
+  }),
+  auth: {
+    getUser: jest.fn().mockResolvedValue({ data: { user: mockUser }, error: null }),
+    getSession: jest.fn().mockResolvedValue({ data: { session: mockSession }, error: null }),
+    onAuthStateChange: jest.fn().mockReturnValue({ data: { subscription: { unsubscribe: jest.fn() } } })
+  },
+  rpc: jest.fn().mockResolvedValue({ data: [], error: null })
+};
+```
+
+## Test Configuration
+
+### 1. Vitest Configuration
+
+```typescript
+// vitest.config.ts
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'dist/',
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/test-utils/**'
+      ]
+    }
+  }
+});
+```
+
+### 2. Jest Configuration
+
+```javascript
+// jest.config.js
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapping: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx,ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/*.stories.{js,jsx,ts,tsx}'
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 80,
+      functions: 80,
+      lines: 80,
+      statements: 80
+    }
+  }
+};
+```
+
+## Best Practices
+
+### 1. Test Organization
+
+- **Group related tests** in describe blocks
+- **Use descriptive test names** that explain what is being tested
+- **Keep tests focused** on a single behavior
+- **Use consistent naming conventions**
+
+### 2. Test Data
+
+- **Use realistic test data** that matches production data
+- **Create reusable test fixtures** for common data
+- **Use factories** for generating test data
+- **Keep test data minimal** and focused
+
+### 3. Test Maintenance
+
+- **Update tests when requirements change**
+- **Remove obsolete tests** that no longer apply
+- **Refactor tests** to improve readability
+- **Monitor test performance** and optimize slow tests
+
+### 4. Test Coverage
+
+- **Aim for high coverage** but focus on meaningful tests
+- **Test edge cases** and error conditions
+- **Test user interactions** and workflows
+- **Test accessibility** and performance
+
+This testing guide provides comprehensive coverage of testing strategies for PACE Core applications. Follow these patterns and best practices to ensure your applications are well-tested and maintainable.