testing-patterns

Name: testing-patterns - Agent Skill
Rating: 5.0 (1630 reviews)
Author: sickn33

1,630

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 Folder View on GitHub

CLI Install

Recommended

Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.

Method 1 - skills CLI

npx skills i sickn33/antigravity-awesome-skills/skills/testing-patterns

Method 2 - openskills (supports sync & update)

npx openskills install sickn33/antigravity-awesome-skills

Auto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.

Installation Path

Download and extract to one of the following locations:

~/.claude/skills/testing-patterns/

SKILL.md

Skill Instructions

Back

Run with Cloud Agent

No setup needed. Let our cloud agents run this skill for you.

Select Provider

Select Model

Claude Sonnet 4.5

$0.20/task

Best for coding tasks

No setup required

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

Data Factory

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}
 
const getMockUser = (overrides?: Partial<User>)

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

Test Structure

describe('ComponentName', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });
 
  describe('Rendering', () => {
    it('should render component with default props', () => {});
    it('should render loading state when loading', () =>

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(

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:

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