--- name: testing-patterns description: Jest testing patterns, factory functions, mocking strategies, and TDD workflow. Use when writing unit tests, creating test factories, or following TDD red-green-refactor cycle. --- # Testing Patterns and Utilities ## Testing Philosophy **Test-Driven Development (TDD):** - Write failing test FIRST - Implement minimal code to pass - Refactor after green - Never write production code without a failing test **Behavior-Driven Testing:** - Test behavior, not implementation - Focus on public APIs and business requirements - Avoid testing implementation details - Use descriptive test names that describe behavior **Factory Pattern:** - Create `getMockX(overrides?: Partial)` functions - Provide sensible defaults - Allow overriding specific properties - Keep tests DRY and maintainable ## Test Utilities ### Custom Render Function Create a custom render that wraps components with required providers: ```typescript \/\/ src\/utils\/testUtils.tsx import { render } from '@testing-library\/react-native'; import { ThemeProvider } from '.\/theme'; export const renderWithTheme = (ui: React.ReactElement) => { return render( {ui}<\/ThemeProvider> ); }; ``` **Usage:** ```typescript import { renderWithTheme } from 'utils\/testUtils'; import { screen } from '@testing-library\/react-native'; it('should render component', () => { renderWithTheme(); expect(screen.getByText('Hello')).toBeTruthy(); }); ``` ## Factory Pattern ### Component Props Factory ```typescript import { ComponentProps } from 'react'; const getMockMyComponentProps = ( overrides?: Partial> ) => { return { title: 'Default Title', count: 0, onPress: jest.fn(), isLoading: false, ...overrides, }; }; \/\/ Usage in tests it('should render with custom title', () => { const props = getMockMyComponentProps({ title: 'Custom Title' }); renderWithTheme(); expect(screen.getByText('Custom Title')).toBeTruthy(); }); ``` ### Data Factory ```typescript interface User { id: string; name: string; email: string; role: 'admin' | 'user'; } const getMockUser = (overrides?: Partial): User => { return { id: '123', name: 'John Doe', email: 'john@example.com', role: 'user', ...overrides, }; }; \/\/ Usage it('should display admin badge for admin users', () => { const user = getMockUser({ role: 'admin' }); renderWithTheme(); expect(screen.getByText('Admin')).toBeTruthy(); }); ``` ## Mocking Patterns ### Mocking Modules ```typescript \/\/ Mock entire module jest.mock('utils\/analytics'); \/\/ Mock with factory function jest.mock('utils\/analytics', () => ({ Analytics: { logEvent: jest.fn(), }, })); \/\/ Access mock in test const mockLogEvent = jest.requireMock('utils\/analytics').Analytics.logEvent; ``` ### Mocking GraphQL Hooks ```typescript jest.mock('.\/GetItems.generated', () => ({ useGetItemsQuery: jest.fn(), })); const mockUseGetItemsQuery = jest.requireMock( '.\/GetItems.generated' ).useGetItemsQuery as jest.Mock; \/\/ In test mockUseGetItemsQuery.mockReturnValue({ data: { items: [] }, loading: false, error: undefined, }); ``` ## Test Structure ```typescript describe('ComponentName', () => { beforeEach(() => { jest.clearAllMocks(); }); describe('Rendering', () => { it('should render component with default props', () => {}); it('should render loading state when loading', () => {}); }); describe('User interactions', () => { it('should call onPress when button is clicked', async () => {}); }); describe('Edge cases', () => { it('should handle empty data gracefully', () => {}); }); }); ``` ## Query Patterns ```typescript \/\/ Element must exist expect(screen.getByText('Hello')).toBeTruthy(); \/\/ Element should not exist expect(screen.queryByText('Goodbye')).toBeNull(); \/\/ Element appears asynchronously await waitFor(() => { expect(screen.findByText('Loaded')).toBeTruthy(); }); ``` ## User Interaction Patterns ```typescript import { fireEvent, screen } from '@testing-library\/react-native'; it('should submit form on button click', async () => { const onSubmit = jest.fn(); renderWithTheme(); fireEvent.changeText(screen.getByLabelText('Email'), 'user@example.com'); fireEvent.changeText(screen.getByLabelText('Password'), 'password123'); fireEvent.press(screen.getByTestId('login-button')); await waitFor(() => { expect(onSubmit).toHaveBeenCalled(); }); }); ``` ## Anti-Patterns to Avoid ### Testing Mock Behavior Instead of Real Behavior ```typescript \/\/ Bad - testing the mock expect(mockFetchData).toHaveBeenCalled(); \/\/ Good - testing actual behavior expect(screen.getByText('John Doe')).toBeTruthy(); ``` ### Not Using Factories ```typescript \/\/ Bad - duplicated, inconsistent test data it('test 1', () => { const user = { id: '1', name: 'John', email: 'john@test.com', role: 'user' }; }); it('test 2', () => { const user = { id: '2', name: 'Jane', email: 'jane@test.com' }; \/\/ Missing role! }); \/\/ Good - reusable factory const user = getMockUser({ name: 'Custom Name' }); ``` ## Best Practices 1. **Always use factory functions** for props and data 2. **Test behavior, not implementation** 3. **Use descriptive test names** 4. **Organize with describe blocks** 5. **Clear mocks between tests** 6. **Keep tests focused** - one behavior per test ## Running Tests ```bash # Run all tests npm test # Run with coverage npm run test:coverage # Run specific file npm test ComponentName.test.tsx ``` ## Integration with Other Skills - **react-ui-patterns**: Test all UI states (loading, error, empty, success) - **systematic-debugging**: Write test that reproduces bug before fixing