Community skill · Free instruction package

testing-patterns

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.

Download skill ZIPRead the instructions

Community instruction package. Read the full workflow below, then choose your app in the setup guide. Package instructions and compatibility claims have not been individually verified; check dependencies and license before use.

CHOOSE YOUR AI APP

Use skills with the software you know

Choose your app below for setup instructions. Keep the complete downloaded folder together. Each package may need tools, dependencies or permissions that your app does not provide.

Claude

Chat app · Skill upload

In Claude, open Customize → Skills and use Create skill to upload the ZIP. Skill availability depends on your plan and workspace settings.

Official Claude setup →

ChatGPT

Chat app · Access varies

Where Skills is available, open Plugins → Skills → Create → Upload from your computer. Otherwise, copy the instructions into a chat and add your brief; this does not install a skill or include its supporting files.

Official ChatGPT setup →

Google Antigravity

Agent · Project skills

Extract the complete skill folder into your project’s .agents/skills directory. Ask the agent to use the skill for your task.

.agents/skills/testing-patterns/SKILL.mdOfficial Google Antigravity setup →

Cursor

Code editor · Project skills

Extract the complete folder into .cursor/skills. Check the editor’s skill settings and ask the agent to use it.

.cursor/skills/testing-patterns/SKILL.mdOfficial Cursor setup →

Claude Code

Coding agent · Project skills

Extract the complete folder into .claude/skills. Ask Claude to use the named skill, or use its slash command when available.

.claude/skills/testing-patterns/SKILL.mdOfficial Claude Code setup →

For text-only workflows, you can also paste the instructions into an AI conversation. Copying text does not enable scripts, connect accounts or grant tool access. App subscriptions may cost extra. Logos identify the products; KuchhBhi is independent and is not endorsed by these companies.

Full skill instructions

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:

// 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:

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

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

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

const getMockUser = (overrides?: Partial<User>): 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(<UserCard user={user} />);
  expect(screen.getByText('Admin')).toBeTruthy();
});

Mocking Patterns

Mocking Modules

// 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

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

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

// 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

import { fireEvent, screen } from '@testing-library/react-native';

it('should submit form on button click', async () => {
  const onSubmit = jest.fn();
  renderWithTheme(<LoginForm onSubmit={onSubmit} />);

  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

// Bad - testing the mock
expect(mockFetchData).toHaveBeenCalled();

// Good - testing actual behavior
expect(screen.getByText('John Doe')).toBeTruthy();

Not Using Factories

// 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

Always use factory functions for props and data
Test behavior, not implementation
Use descriptive test names
Organize with describe blocks
Clear mocks between tests
Keep tests focused - one behavior per test

Running Tests

# 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

Frequently asked questions

Is the skill free?

The instruction package is free to download. Your AI app, model usage, connected services and third-party assets may have separate costs.

Is this an AI agent or an MCP server?

It is a set of instructions for a compatible AI assistant. It does not run by itself, connect accounts or install an MCP server.

What if the skill does not appear in my editor?

Check that the named folder contains SKILL.md directly, not a second nested ZIP folder. Confirm that your editor supports skills and that its current settings allow this location. See the official documentation below.

// 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> ); };

import { renderWithTheme } from 'utils/testUtils'; import { screen } from '@testing-library/react-native'; it('should render component', () => { renderWithTheme(<MyComponent />); expect(screen.getByText('Hello')).toBeTruthy(); });

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(); });

interface User { id: string; name: string; email: string; role: 'admin' | 'user'; } const getMockUser = (overrides?: Partial<User>): 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(<UserCard user={user} />); expect(screen.getByText('Admin')).toBeTruthy(); });

// 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;

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, });

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', () => {}); }); });

// 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(); });

import { fireEvent, screen } from '@testing-library/react-native'; it('should submit form on button click', async () => { const onSubmit = jest.fn(); renderWithTheme(<LoginForm onSubmit={onSubmit} />); 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(); }); });

// 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' });

Frequently asked questions

Is the skill free?

The instruction package is free to download. Your AI app, model usage, connected services and third-party assets may have separate costs.

Is this an AI agent or an MCP server?

It is a set of instructions for a compatible AI assistant. It does not run by itself, connect accounts or install an MCP server.

What if the skill does not appear in my editor?

Use skills with the software you know

Claude

ChatGPT

Google Antigravity

Cursor

Claude Code

Full skill instructions

Testing Patterns and Utilities

Testing Philosophy

Test Utilities

Custom Render Function

Factory Pattern

Component Props Factory

Data Factory

Mocking Patterns

Mocking Modules

Mocking GraphQL Hooks

Test Structure

Query Patterns

User Interaction Patterns

Anti-Patterns to Avoid

Testing Mock Behavior Instead of Real Behavior

Not Using Factories

Best Practices

Running Tests

Integration with Other Skills

Frequently asked questions

Related skills

Use skills with the software you know

Claude

ChatGPT

Google Antigravity

Cursor

Claude Code

Full skill instructions

Testing Patterns and Utilities

Testing Philosophy

Test Utilities

Custom Render Function

Factory Pattern

Component Props Factory

Data Factory

Mocking Patterns

Mocking Modules

Mocking GraphQL Hooks

Test Structure

Query Patterns

User Interaction Patterns

Anti-Patterns to Avoid

Testing Mock Behavior Instead of Real Behavior

Not Using Factories

Best Practices

Running Tests

Integration with Other Skills

Frequently asked questions

Related skills