Implement Robust Testing Patterns and Utilities

This skill provides testing patterns and utilities for React Native components using Jest and React Testing Library: a TDD/behavior-driven testing philosophy, a factory pattern for mock props and data, custom render helpers that wrap providers, module/GraphQL-hook mocking patterns, a standard describe/beforeEach test structure, query patterns (sync/async/negative assertions), user-interaction testing, and named anti-patterns to avoid.

Use it when writing or reviewing tests for React Native components - structuring test files, mocking dependencies, or building reusable test data. It follows a strict TDD discipline: write a failing test first, implement the minimal code to pass it, then refactor - never write production code without a failing test first.

A custom render helper (renderWithTheme) wraps a component under test with required providers (e.g. ThemeProvider) before calling @testing-library/react-native's render. Factory functions follow a getMockX(overrides?: Partial<X>) shape - shown for both component props (getMockMyComponentProps) and plain data (getMockUser, returning a full User object with sensible defaults that can be selectively overridden). Modules are mocked with jest.mock() (either auto-mocked or via a factory function) and accessed with jest.requireMock(); the same pattern mocks a generated GraphQL hook (useGetItemsQuery) to control its returned data/loading/error state per test. Tests are organized into nested describe blocks (Rendering, User interactions, Edge cases) with jest.clearAllMocks() in a shared beforeEach.

Query patterns: getByText for elements that must exist, queryByText returning null for absent elements, and waitFor/findByText for asynchronously-appearing content. User interactions use fireEvent.changeText/fireEvent.press followed by waitFor to assert a callback fired. Two named anti-patterns: asserting a mock was called instead of asserting the actual rendered behavior, and hand-writing duplicated, inconsistent test data instead of using a factory (shown side by side with a factory-based fix). Tests run via npm test, npm run test:coverage, or targeting a specific file (npm test ComponentName.test.tsx). Named 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, and keep each test focused on one behavior. This skill is meant to be used alongside react-ui-patterns (test every UI state: loading, error, empty, success) and systematic-debugging (write the reproducing test before fixing a bug).

Frontend engineers writing or reviewing React Native tests who want consistent factory-based mock data, provider-aware render helpers, and clear behavior-focused test structure instead of ad hoc, duplicated test setup.