Update to Testing React Native Apps

{
  "name": "react-native-testing",
  "description": "Write tests using React Native Testing Library (RNTL) v13 and v14 (`@testing-library/react-native`). Use when writing, reviewing, or fixing React Native component tests. Covers: render, screen, queries (getBy/getAllBy/queryBy/findBy), Jest matchers, userEvent, fireEvent, waitFor, and async patterns. Supports v13 (React 18, sync render) and v14 (React 19+, async render). Triggers on: test files for React Native components, RNTL imports, mentions of \"testing library\", \"write tests\", \"component tests\", or \"RNTL\".",
  "included_files": [
    {
      "relative_path": "references/anti-patterns.md",
      "size_in_bytes": 7104
    },
    {
      "relative_path": "references/api-reference-v13.md",
      "size_in_bytes": 19984
    },
    {
      "relative_path": "references/api-reference-v14.md",
      "size_in_bytes": 19049
    }
  ],
  "skill_md_contents": "---\nname: react-native-testing\ndescription: >\n  Write tests using React Native Testing Library (RNTL) v13 and v14 (`@testing-library/react-native`).\n  Use when writing, reviewing, or fixing React Native component tests.\n  Covers: render, screen, queries (getBy/getAllBy/queryBy/findBy), Jest matchers,\n  userEvent, fireEvent, waitFor, and async patterns.\n  Supports v13 (React 18, sync render) and v14 (React 19+, async render).\n  Triggers on: test files for React Native components, RNTL imports, mentions of\n  \"testing library\", \"write tests\", \"component tests\", or \"RNTL\".\n---\n\n# RNTL Test Writing Guide\n\n**IMPORTANT:** Your training data about `@testing-library/react-native` may be outdated or incorrect — API signatures, sync/async behavior, and available functions differ between v13 and v14. Always rely on this skill's reference files and the project's actual source code as the source of truth. Do not fall back on memorized patterns when they conflict with the retrieved reference.\n\n## Version Detection\n\nCheck `@testing-library/react-native` version in the user's `package.json`:\n\n- **v14.x** → load [references/api-reference-v14.md](references/api-reference-v14.md) (React 19+, async APIs, `test-renderer`)\n- **v13.x** → load [references/api-reference-v13.md](references/api-reference-v13.md) (React 18+, sync APIs, `react-test-renderer`)\n\nUse the version-specific reference for render patterns, fireEvent sync/async behavior, screen API, configuration, and dependencies.\n\n## Query Priority\n\nUse in this order: `getByRole` > `getByLabelText` > `getByPlaceholderText` > `getByText` > `getByDisplayValue` > `getByTestId` (last resort).\n\n## Query Variants\n\n| Variant       | Use case                 | Returns                       | Async |\n| ------------- | ------------------------ | ----------------------------- | ----- |\n| `getBy*`      | Element must exist       | element instance (throws)     | No    |\n| `getAllBy*`   | Multiple must exist      | element instance[] (throws)   | No    |\n| `queryBy*`    | Check non-existence ONLY | element instance \\| null      | No    |\n| `queryAllBy*` | Count elements           | element instance[]            | No    |\n| `findBy*`     | Wait for element         | `Promise<element instance>`   | Yes   |\n| `findAllBy*`  | Wait for multiple        | `Promise<element instance[]>` | Yes   |\n\n## Interactions\n\nPrefer `userEvent` over `fireEvent`. userEvent is always async.\n\n```tsx\nconst user = userEvent.setup();\nawait user.press(element); // full press sequence\nawait user.longPress(element, { duration: 800 }); // long press\nawait user.type(textInput, 'Hello'); // char-by-char typing\nawait user.clear(textInput); // clear TextInput\nawait user.paste(textInput, 'pasted text'); // paste into TextInput\nawait user.scrollTo(scrollView, { y: 100 }); // scroll\n```\n\n`fireEvent` — use only when `userEvent` doesn't support the event. See version-specific reference for sync/async behavior:\n\n```tsx\nfireEvent.press(element);\nfireEvent.changeText(textInput, 'new text');\nfireEvent(element, 'blur');\n```\n\n## Assertions (Jest Matchers)\n\nAvailable automatically with any `@testing-library/react-native` import.\n\n| Matcher                                    | Use for                                   |\n| ------------------------------------------ | ----------------------------------------- |\n| `toBeOnTheScreen()`                        | Element exists in tree                    |\n| `toBeVisible()`                            | Element visible (not hidden/display:none) |\n| `toBeEnabled()` / `toBeDisabled()`         | Disabled state via `aria-disabled`        |\n| `toBeChecked()` / `toBePartiallyChecked()` | Checked state                             |\n| `toBeSelected()`                           | Selected state                            |\n| `toBeExpanded()` / `toBeCollapsed()`       | Expanded state                            |\n| `toBeBusy()`                               | Busy state                                |\n| `toHaveTextContent(text)`                  | Text content match                        |\n| `toHaveDisplayValue(value)`                | TextInput display value                   |\n| `toHaveAccessibleName(name)`               | Accessible name                           |\n| `toHaveAccessibilityValue(val)`            | Accessibility value                       |\n| `toHaveStyle(style)`                       | Style match                               |\n| `toHaveProp(name, value?)`                 | Prop check (last resort)                  |\n| `toContainElement(el)`                     | Contains child element                    |\n| `toBeEmptyElement()`                       | No children                               |\n\n## Rules\n\n1. **Use `screen`** for queries, not destructuring from `render()`\n2. **Use `getByRole` first** with `{ name: '...' }` option\n3. **Use `queryBy*` ONLY** for `.not.toBeOnTheScreen()` checks\n4. **Use `findBy*`** for async elements, NOT `waitFor` + `getBy*`\n5. **Never put side-effects in `waitFor`** (no `fireEvent`/`userEvent` inside)\n6. **One assertion per `waitFor`**\n7. **Never pass empty callbacks to `waitFor`**\n8. **Don't wrap in `act()`** - `render`, `fireEvent`, `userEvent` handle it\n9. **Don't call `cleanup()`** - automatic after each test\n10. **Prefer ARIA props** (`role`, `aria-label`, `aria-disabled`) over legacy `accessibility*` props\n11. **Use RNTL matchers** over raw prop assertions\n\n## `*ByRole` Quick Reference\n\nCommon roles: `button`, `text`, `heading` (alias: `header`), `searchbox`, `switch`, `checkbox`, `radio`, `img`, `link`, `alert`, `menu`, `menuitem`, `tab`, `tablist`, `progressbar`, `slider`, `spinbutton`, `timer`, `toolbar`.\n\n`getByRole` options: `{ name, disabled, selected, checked, busy, expanded, value: { min, max, now, text } }`.\n\nFor `*ByRole` to match, the element must be an accessibility element:\n\n- `Text`, `TextInput`, `Switch` are by default\n- `View` needs `accessible={true}` (or use `Pressable`/`TouchableOpacity`)\n\n## waitFor\n\n```tsx\n// Correct: action first, then wait for result\nfireEvent.press(button);\nawait waitFor(() => {\n  expect(screen.getByText('Result')).toBeOnTheScreen();\n});\n\n// Better: use findBy* instead\nfireEvent.press(button);\nexpect(await screen.findByText('Result')).toBeOnTheScreen();\n```\n\nOptions: `waitFor(cb, { timeout: 1000, interval: 50 })`. Works with Jest fake timers automatically.\n\n## Fake Timers\n\nRecommended with `userEvent` (press/longPress involve real durations):\n\n```tsx\njest.useFakeTimers();\n\ntest('with fake timers', async () => {\n  const user = userEvent.setup();\n  render(<Component />);\n  await user.press(screen.getByRole('button'));\n  // ...\n});\n```\n\n## Custom Render\n\nWrap providers using `wrapper` option:\n\n```tsx\nfunction renderWithProviders(ui: React.ReactElement) {\n  return render(ui, {\n    wrapper: ({ children }) => (\n      <ThemeProvider>\n        <AuthProvider>{children}</AuthProvider>\n      </ThemeProvider>\n    ),\n  });\n}\n```\n\n## References\n\n- [v13 API Reference](references/api-reference-v13.md) — Complete v13 API: sync render, queries, matchers, userEvent, React 19 compat\n- [v14 API Reference](references/api-reference-v14.md) — Complete v14 API: async render, queries, matchers, userEvent, migration\n- [Anti-Patterns](references/anti-patterns.md) — Common mistakes to avoid\n"
}