|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +This is the **React Native Testing Library (RNTL)** - a comprehensive testing solution for React Native applications that provides React Native runtime simulation on top of `react-test-renderer`. The library encourages better testing practices by focusing on testing behavior rather than implementation details. |
| 8 | + |
| 9 | +## Key Development Commands |
| 10 | + |
| 11 | +### Testing |
| 12 | +- `yarn test` - Run all tests |
| 13 | +- `yarn test:ci` - Run tests with CI optimizations (maxWorkers=2) |
| 14 | +- `yarn test:ci:coverage` - Run tests with coverage reporting |
| 15 | + |
| 16 | +### Building |
| 17 | +- `yarn build` - Full build process (clean, build JS, build types, copy flow types) |
| 18 | +- `yarn build:js` - Build JavaScript using Babel |
| 19 | +- `yarn build:ts` - Build TypeScript declarations |
| 20 | +- `yarn clean` - Clean build directory |
| 21 | + |
| 22 | +### Code Quality |
| 23 | +- `yarn typecheck` - Run TypeScript compiler |
| 24 | +- `yarn lint` - Run ESLint with caching |
| 25 | +- `yarn validate` - Run lint + typecheck + test (pre-commit validation) |
| 26 | + |
| 27 | +### Testing Single Files |
| 28 | +To test a specific file: `yarn test path/to/test.test.tsx` |
| 29 | + |
| 30 | +## Architecture Overview |
| 31 | + |
| 32 | +### Core Components |
| 33 | + |
| 34 | +1. **`src/index.ts`** - Main entry point that sets up auto-cleanup and extends Jest matchers |
| 35 | +2. **`src/pure.ts`** - Pure exports without auto-cleanup for advanced use cases |
| 36 | +3. **`src/render.tsx`** - Core rendering functionality using `react-test-renderer` |
| 37 | +4. **`src/screen.ts`** - Global screen object providing access to rendered components |
| 38 | + |
| 39 | +### Key Modules |
| 40 | + |
| 41 | +- **`src/queries/`** - Query functions for finding elements (byText, byRole, byTestId, etc.) |
| 42 | +- **`src/matchers/`** - Jest matchers for assertions (toBeVisible, toHaveTextContent, etc.) |
| 43 | +- **`src/user-event/`** - User interaction simulation (press, type, scroll, etc.) |
| 44 | +- **`src/helpers/`** - Utility functions for component tree traversal and debugging |
| 45 | +- **`src/fire-event.ts`** - Low-level event firing utilities |
| 46 | + |
| 47 | +### Query System |
| 48 | + |
| 49 | +The library provides three query variants for each selector: |
| 50 | +- `get*` - Throws if not found (for assertions) |
| 51 | +- `query*` - Returns null if not found (for conditional logic) |
| 52 | +- `find*` - Returns Promise, waits for element (for async operations) |
| 53 | + |
| 54 | +### User Events vs Fire Events |
| 55 | + |
| 56 | +- **User Events** (`src/user-event/`) - High-level, realistic user interactions |
| 57 | +- **Fire Events** (`src/fire-event.ts`) - Low-level, direct event dispatching |
| 58 | + |
| 59 | +## Configuration |
| 60 | + |
| 61 | +### Jest Setup |
| 62 | +- Main Jest config: `jest.config.js` |
| 63 | +- Setup file: `jest-setup.ts` |
| 64 | +- Uses React Native preset with custom transform ignore patterns |
| 65 | + |
| 66 | +### TypeScript |
| 67 | +- Main config: `tsconfig.json` (development) |
| 68 | +- Release config: `tsconfig.release.json` (for builds) |
| 69 | +- Strict mode enabled with ES2022 target |
| 70 | + |
| 71 | +### ESLint |
| 72 | +- Config: `eslint.config.mjs` |
| 73 | +- Uses Callstack config + TypeScript strict rules |
| 74 | +- Custom rules for import sorting and test files |
| 75 | + |
| 76 | +## Testing Patterns |
| 77 | + |
| 78 | +### Component Testing |
| 79 | +```jsx |
| 80 | +import { render, screen, userEvent } from '@testing-library/react-native'; |
| 81 | + |
| 82 | +test('component behavior', async () => { |
| 83 | + const user = userEvent.setup(); |
| 84 | + render(<MyComponent />); |
| 85 | + |
| 86 | + await user.press(screen.getByRole('button')); |
| 87 | + expect(screen.getByText('Expected text')).toBeOnTheScreen(); |
| 88 | +}); |
| 89 | +``` |
| 90 | + |
| 91 | +### Async Testing |
| 92 | +Use `findBy*` queries or `waitFor` for async operations: |
| 93 | +```jsx |
| 94 | +const element = await screen.findByText('Async content'); |
| 95 | +await waitFor(() => expect(mockFn).toHaveBeenCalled()); |
| 96 | +``` |
| 97 | + |
| 98 | +## Development Workflow |
| 99 | + |
| 100 | +1. **Working with Examples**: Test changes in `examples/` directory |
| 101 | +2. **Commit Messages**: Follow conventional commits (feat:, fix:, docs:, test:, chore:, refactor:, BREAKING:) |
| 102 | +3. **Pre-commit**: Hooks verify linting, type checking, and tests pass |
| 103 | +4. **Pull Requests**: Run `yarn validate` before submitting |
| 104 | + |
| 105 | +## Build Process |
| 106 | + |
| 107 | +The build creates: |
| 108 | +- `build/` - Compiled JavaScript and TypeScript declarations |
| 109 | +- `matchers.js` - Jest matchers for separate import |
| 110 | +- `pure.js` - Pure version without auto-cleanup |
| 111 | +- `dont-cleanup-after-each.js` - Version without auto-cleanup |
| 112 | + |
| 113 | +## Package Structure |
| 114 | + |
| 115 | +- **Main exports**: Full library with auto-cleanup |
| 116 | +- **Pure exports**: Library without auto-cleanup (`/pure`) |
| 117 | +- **Matcher exports**: Jest matchers only (`/matchers`) |
| 118 | +- **No cleanup**: Disable auto-cleanup (`/dont-cleanup-after-each`) |
| 119 | + |
| 120 | +## Testing Environment |
| 121 | + |
| 122 | +- Uses `react-test-renderer` for component rendering |
| 123 | +- Fake timers recommended for user events |
| 124 | +- String validation available for text rendering checks |
| 125 | +- Supports both concurrent and legacy React rendering modes |
0 commit comments