Testing Patterns

1---
2name: testing-patterns
3description: 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.
4---
5 
6# Testing Patterns and Utilities
7 
8## Testing Philosophy
9 
10**Test-Driven Development (TDD):**
11- Write failing test FIRST
12- Implement minimal code to pass
13- Refactor after green
14- Never write production code without a failing test
15 
16**Behavior-Driven Testing:**
17- Test behavior, not implementation
18- Focus on public APIs and business requirements
19- Avoid testing implementation details
20- Use descriptive test names that describe behavior
21 
22**Factory Pattern:**
23- Create `getMockX(overrides?: Partial<X>)` functions
24- Provide sensible defaults
25- Allow overriding specific properties
26- Keep tests DRY and maintainable
27 
28## Test Utilities
29 
30### Custom Render Function
31 
32Create a custom render that wraps components with required providers:
33 
34```typescript
35// src/utils/testUtils.tsx
36import { render } from '@testing-library/react-native';
37import { ThemeProvider } from './theme';
38 
39export const renderWithTheme = (ui: React.ReactElement) => {
40  return render(
41    <ThemeProvider>{ui}</ThemeProvider>
42  );
43};
44```
45 
46**Usage:**
47```typescript
48import { renderWithTheme } from 'utils/testUtils';
49import { screen } from '@testing-library/react-native';
50 
51it('should render component', () => {
52  renderWithTheme(<MyComponent />);
53  expect(screen.getByText('Hello')).toBeTruthy();
54});
55```
56 
57## Factory Pattern
58 
59### Component Props Factory
60 
61```typescript
62import { ComponentProps } from 'react';
63 
64const getMockMyComponentProps = (
65  overrides?: Partial<ComponentProps<typeof MyComponent>>
66) => {
67  return {
68    title: 'Default Title',
69    count: 0,
70    onPress: jest.fn(),
71    isLoading: false,
72    ...overrides,
73  };
74};
75 
76// Usage in tests
77it('should render with custom title', () => {
78  const props = getMockMyComponentProps({ title: 'Custom Title' });
79  renderWithTheme(<MyComponent {...props} />);
80  expect(screen.getByText('Custom Title')).toBeTruthy();
81});
82```
83 
84### Data Factory
85 
86```typescript
87interface User {
88  id: string;
89  name: string;
90  email: string;
91  role: 'admin' | 'user';
92}
93 
94const getMockUser = (overrides?: Partial<User>): User => {
95  return {
96    id: '123',
97    name: 'John Doe',
98    email: 'john@example.com',
99    role: 'user',
100    ...overrides,
101  };
102};
103 
104// Usage
105it('should display admin badge for admin users', () => {
106  const user = getMockUser({ role: 'admin' });
107  renderWithTheme(<UserCard user={user} />);
108  expect(screen.getByText('Admin')).toBeTruthy();
109});
110```
111 
112## Mocking Patterns
113 
114### Mocking Modules
115 
116```typescript
117// Mock entire module
118jest.mock('utils/analytics');
119 
120// Mock with factory function
121jest.mock('utils/analytics', () => ({
122  Analytics: {
123    logEvent: jest.fn(),
124  },
125}));
126 
127// Access mock in test
128const mockLogEvent = jest.requireMock('utils/analytics').Analytics.logEvent;
129```
130 
131### Mocking GraphQL Hooks
132 
133```typescript
134jest.mock('./GetItems.generated', () => ({
135  useGetItemsQuery: jest.fn(),
136}));
137 
138const mockUseGetItemsQuery = jest.requireMock(
139  './GetItems.generated'
140).useGetItemsQuery as jest.Mock;
141 
142// In test
143mockUseGetItemsQuery.mockReturnValue({
144  data: { items: [] },
145  loading: false,
146  error: undefined,
147});
148```
149 
150## Test Structure
151 
152```typescript
153describe('ComponentName', () => {
154  beforeEach(() => {
155    jest.clearAllMocks();
156  });
157 
158  describe('Rendering', () => {
159    it('should render component with default props', () => {});
160    it('should render loading state when loading', () => {});
161  });
162 
163  describe('User interactions', () => {
164    it('should call onPress when button is clicked', async () => {});
165  });
166 
167  describe('Edge cases', () => {
168    it('should handle empty data gracefully', () => {});
169  });
170});
171```
172 
173## Query Patterns
174 
175```typescript
176// Element must exist
177expect(screen.getByText('Hello')).toBeTruthy();
178 
179// Element should not exist
180expect(screen.queryByText('Goodbye')).toBeNull();
181 
182// Element appears asynchronously
183await waitFor(() => {
184  expect(screen.findByText('Loaded')).toBeTruthy();
185});
186```
187 
188## User Interaction Patterns
189 
190```typescript
191import { fireEvent, screen } from '@testing-library/react-native';
192 
193it('should submit form on button click', async () => {
194  const onSubmit = jest.fn();
195  renderWithTheme(<LoginForm onSubmit={onSubmit} />);
196 
197  fireEvent.changeText(screen.getByLabelText('Email'), 'user@example.com');
198  fireEvent.changeText(screen.getByLabelText('Password'), 'password123');
199  fireEvent.press(screen.getByTestId('login-button'));
200 
201  await waitFor(() => {
202    expect(onSubmit).toHaveBeenCalled();
203  });
204});
205```
206 
207## Anti-Patterns to Avoid
208 
209### Testing Mock Behavior Instead of Real Behavior
210 
211```typescript
212// Bad - testing the mock
213expect(mockFetchData).toHaveBeenCalled();
214 
215// Good - testing actual behavior
216expect(screen.getByText('John Doe')).toBeTruthy();
217```
218 
219### Not Using Factories
220 
221```typescript
222// Bad - duplicated, inconsistent test data
223it('test 1', () => {
224  const user = { id: '1', name: 'John', email: 'john@test.com', role: 'user' };
225});
226it('test 2', () => {
227  const user = { id: '2', name: 'Jane', email: 'jane@test.com' }; // Missing role!
228});
229 
230// Good - reusable factory
231const user = getMockUser({ name: 'Custom Name' });
232```
233 
234## Best Practices
235 
2361. **Always use factory functions** for props and data
2372. **Test behavior, not implementation**
2383. **Use descriptive test names**
2394. **Organize with describe blocks**
2405. **Clear mocks between tests**
2416. **Keep tests focused** - one behavior per test
242 
243## Running Tests
244 
245```bash
246# Run all tests
247npm test
248 
249# Run with coverage
250npm run test:coverage
251 
252# Run specific file
253npm test ComponentName.test.tsx
254```
255 
256## Integration with Other Skills
257 
258- **react-ui-patterns**: Test all UI states (loading, error, empty, success)
259- **systematic-debugging**: Write test that reproduces bug before fixing
260