testing-patterns

Implements Jest testing patterns, factory functions, and TDD workflows for React components.

Updated Aug 19, 2026
One-click install
npx skills add https://github.com/nperepichka/Antigravity --skill testing-patterns-nperepichka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: testing-patterns
Source: https://github.com/nperepichka/Antigravity/tree/main/config/skills/testing-patterns
Command: npx skills add https://github.com/nperepichka/Antigravity --skill testing-patterns-nperepichka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing consistent, maintainable unit tests is hard: test data gets duplicated, mocks become brittle, and teams test implementation details instead of behavior. This Skill provides proven Jest and React Testing Library patterns that keep tests DRY, behavior-focused, and aligned with a TDD red-green-refactor workflow. ## Core Features & Use Cases - Factory Functions: Create reusable getMockX(overrides) factories for component props and data models with sensible defaults, eliminating duplicated and inconsistent test fixtures. - Mocking Strategies: Mock entire modules, GraphQL hooks, and utilities with jest.mock and jest.requireMock, including typed mock access patterns. - TDD Workflow Guidance: Enforces red-before-green, vertical slicing, testing at seams, and refactoring only after green. - Use Case: When adding a new React Native component, use this Skill to scaffold a test suite with a props factory, a custom renderWithTheme wrapper, and organized describe blocks covering rendering, interactions, and edge cases. ## Quick Start Write Jest unit tests for my LoginForm component using factory functions, a custom render with theme provider, and behavior-focused test cases.

Frequently Asked Questions about testing-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write Jest tests for React components?▼

Use React Testing Library with a custom render function that wraps components in required providers like ThemeProvider. Query elements by text or label with screen.getByText, simulate events with fireEvent, and assert on visible behavior rather than implementation details.

How to create mock data factories in Jest tests?▼

Define a getMockX function accepting Partial overrides that returns an object with sensible defaults spread with the overrides. This keeps test data DRY and consistent, letting each test customize only the properties relevant to its scenario.

How do I mock GraphQL hooks in Jest?▼

Call jest.mock on the generated hooks module and provide a factory returning jest.fn for each hook. Retrieve the mock with jest.requireMock, cast it to jest.Mock, then use mockReturnValue to control data, loading, and error states per test.

What is the difference between getByText and queryByText?▼

getByText throws when the element is missing, so use it when the element must exist. queryByText returns null when absent, making it the correct choice for asserting that an element does not exist in the rendered output.

Why should tests avoid asserting on mock function calls?▼

Asserting that a mock was called tests the mock itself rather than real behavior, creating brittle tests coupled to implementation. Instead, assert on observable outcomes like rendered text or state changes that users actually experience.