testing-patterns

Testing Patterns - Jest Unit Testing and TDD Workflow Guide

Skills Overview

Testing Patterns provides a complete guide to Jest testing patterns, factory functions, Mock strategies, and a TDD workflow to help developers write maintainable unit tests.

When to Use

Writing Unit Tests

When you need to write unit tests for React Native components, TypeScript functions, or business logic, use the testing structure, query patterns, and assertion methods provided in this skill.

Creating Test Factories

When you need to create reusable test data factories for component props or data objects, use the factory pattern to avoid duplicated code and keep test data consistent.

Following a TDD Development Process

When you adopt test-driven development, follow the Red-Green-Refactor loop to write a failing test, implement the minimum code to pass, and then refactor to improve it.

Core Features

Factory Function Pattern

Provides getMockX(overrides?: Partial<X>) style factory functions to supply sensible default values for component props and data objects, while allowing you to override specific properties as needed—keeping tests DRY (Don’t Repeat Yourself).

Testing Library Integration

Includes a complete guide to a custom render function, three query modes (getBy, queryBy, findBy), and user interaction testing (fireEvent), optimized specifically for React Native testing.

Mock Strategy and Organization

Covers module mocking, GraphQL hook mocking, test structure organization (describe/it nesting), and beforeEach cleanup patterns—helping you create clear, maintainable test suites.

FAQ

What is the TDD Red-Green-Refactor loop?

TDD (Test-Driven Development) follows a three-step cycle: first write a failing test (Red), then implement the minimum code needed to pass (Green), and finally refactor to optimize the code (Refactor) once the tests are passing. This process ensures that all production code has corresponding test coverage and that correctness is maintained throughout refactoring.

How do you write a test factory function?

Factory functions follow the getMockX(overrides?: Partial<X>) pattern, returning an object with default values and using spread syntax to merge in overrides:

const getMockUser = (overrides?: Partial<User>): User => {
  return {
    id: '123',
    name: 'John Doe',
    email: 'john@example.com',
    role: 'user',
    ...overrides,
  };
};

// When using, just override the properties you need
const adminUser = getMockUser({ role: 'admin' });

What are the differences between Testing Library’s three query modes?

getBy: Asserts the element must exist; throws an exception if not found

queryBy: Asserts the element must not exist; returns null if not found

findBy: Used for asynchronously rendered elements; waits for the element to appear

Selection rule: use getBy by default; use queryBy when verifying non-existence; use findBy for asynchronous content.