# Testing Patterns

Jest testing patterns, factory functions, mocking strategies, and TDD workflow.

- Repository: https://github.com/ChrisWiles/claude-code-showcase (6078 stars)
- Category: Testing
- License: see repository
- Last updated: 2026-01-06
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -a claude-code -y`
Codex: `npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -a codex -y`
Cursor: `npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -a cursor -y`
Gemini CLI: `npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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<X>)` 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(
    <ThemeProvider>{ui}</ThemeProvider>
  );
};
```

**Usage:**
```typescript
import { renderWithTheme } from 'utils/testUtils';
import { screen } from '@testing-library/react-native';

it('should render component', () => {
  renderWithTheme(<MyComponent />);
  expect(screen.getByText('Hello')).toBeTruthy();
});
```

## Factory Pattern

### Component Props Factory

```typescript
import { ComponentProps } from 'react';

const getMockMyComponentProps = (
  overrides?: Partial<ComponentProps<typeof MyComponent>>
) => {
  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(<MyComponent {...props} />);
  expect(screen.getByText('Custom Title')).toBeTruthy();
});
```

### Data Factory

```typescript
interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

The rest: https://github.com/ChrisWiles/claude-code-showcase/blob/HEAD/.claude/skills/testing-patterns/SKILL.md