Write Jest tests using TDD patterns and factory functions

This skill covers Jest testing patterns for React and React Native: test-driven development, meaning writing a failing test first, implementing minimal code to pass, refactoring after green, and never writing production code without a failing test; behavior-driven testing, meaning testing behavior and public APIs rather than implementation details, with descriptive test names; and the factory pattern, meaning mock-data functions that provide sensible defaults with overridable properties to keep tests DRY. It provides a custom render utility wrapping components with required providers, such as a theme provider, for consistent rendering across tests. Factory examples cover component-props factories that spread sensible defaults plus overrides typed against the component's own props, and data factories such as a mock-user function with sensible id, name, email, and role defaults. Mocking patterns cover full module mocks, factory-function module mocks, accessing a mock through Jest's mock-requiring utility, and specifically mocking GraphQL query hooks by overriding their return value for data, loading, and error per test. Test structure uses nested describe blocks for rendering, user interactions, and edge cases, with mocks cleared before each test, and covers three query pattern categories: asserting an element exists, asserting it doesn't, and asserting async appearance through a wait-for helper. A full user-interaction example shows firing change and press events to drive a login form and waiting to confirm a submit callback fired.

Anti-patterns explicitly flagged include testing that a mock function was called instead of testing the actual resulting behavior - asserting on rendered output, not mock invocation - and not using factories, which leads to duplicated, inconsistent, and sometimes incomplete test data across tests, such as one test object missing a field another test includes. Best practices reinforce always using factory functions for props and data, testing behavior not implementation, descriptive test names, describe-block organization, clearing mocks between tests, and keeping each test focused on one behavior. Standard npm test commands cover running all tests, running with coverage, and running a specific file.

Use it when writing unit tests, creating test factories, or following the TDD red-green-refactor cycle - for Jest-based React or React Native testing specifically.

Given a component or data shape needing tests, it produces factory functions with sensible defaults, a custom render wrapper, structured describe and it test suites, and mocks for modules or GraphQL hooks configured per test case.

Jest and React Native Testing Library utilities such as render, screen, fireEvent, and waitFor; GraphQL-generated hook mocking; and sibling skills covering testing all UI states and writing a reproducing test before fixing a bug.

Developers writing or maintaining a Jest test suite who want consistent, DRY test data via factories and behavior-focused assertions instead of duplicated fixtures and implementation-detail checks.