react-native-testing
Master React Native testing workflows with this agent skill designed for AI coding assistants. It equips you to write, review, and refine component tests using Testing Library patterns, streamlining quality assurance in your React Native projects.
react-native-testing guides you through writing component tests using Testing Library patterns. Start by importing render from @testing-library/react-native, then render your component with render(<YourComponent />). Use query methods like getByRole, getByText, or getByTestId to find elements, then assert their state using matchers like toBeOnTheScreen. For async operations, wrap assertions in waitFor() to handle state updates. This approach ensures your tests verify user-facing behavior rather than implementation details.
AI-generated summary based on this skill's SKILL.md
Install
callstackincubator/agent-skills/react-native-testing · repository language: Shell
git clone https://github.com/callstackincubator/agent-skills
cp -r agent-skills/plugins/vendored/.agents/skills/react-native-testing ~/.claude/skills/react-native-testingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you write React Native tests with Testing Library?
react-native-testing guides you through writing component tests using Testing Library patterns. Start by importing render from @testing-library/react-native, then render your component with render(<YourComponent />). Use query methods like getByRole, getByText, or getByTestId to find elements, then assert their state using matchers like toBeOnTheScreen. For async operations, wrap assertions in waitFor() to handle state updates. This approach ensures your tests verify user-facing behavior rather than implementation details.
What are the version-specific API differences between RNTL v13 and v14?
react-native-testing covers key differences between v13 and v14. Version 13 uses synchronous render patterns, while v14 introduced async render capabilities by default. The screen API behavior evolved between versions, and query method availability may differ. Migration from v13 to v14 requires understanding these async/sync pattern changes to avoid test flakiness. The skill helps you identify which patterns apply to your version and how to adapt existing tests accordingly.
How should you select queries and handle async/sync patterns for React Native tests?
react-native-testing teaches proper query selection by matching user interactions: use getByRole for accessibility-first queries, getByText for visible text, and getByTestId as a fallback. For async operations, use findBy queries or wrap assertions in waitFor() to handle component state updates. Understand that v14 defaults to async rendering while v13 uses sync patterns. Avoid anti-patterns like querying before render completes or using fireEvent for text input when userEvent is more reliable for simulating real user behavior.
How do you set up custom render functions with providers for testing?
react-native-testing shows how to create wrapper components that inject providers like Redux, Theme, or Navigation context. Define a custom render function that wraps your component with these providers, then use it consistently across tests. This pattern ensures all components render with the same context setup, reducing boilerplate and preventing provider-related test failures. The skill demonstrates how to structure these wrappers to be reusable and maintainable across your test suite.
What are common testing anti-patterns to avoid in React Native component tests?
react-native-testing helps you debug and fix common mistakes: querying elements before they render (use findBy or waitFor instead), mixing fireEvent and userEvent inconsistently, ignoring accessibility roles in favor of implementation details, and not wrapping async assertions in waitFor. The skill teaches you to recognize test flakiness caused by timing issues and how to refactor tests to be more reliable. It also covers jest matcher usage, including toBeOnTheScreen for visibility assertions.
How do you test React Native components like TextInput and Pressable with Testing Library?
react-native-testing provides examples for testing interactive components: use fireEvent.changeText or userEvent for TextInput value changes, and fireEvent.press or userEvent for Pressable button interactions. Query these elements by role (button, textbox) or accessible label when possible. For TextInput, verify value changes propagate correctly; for Pressable, confirm callbacks fire and UI updates reflect the interaction. The skill covers screen API usage to access rendered elements and demonstrates patterns that work reliably across RNTL versions.
SKILL.md
rendered from the published skill — quoted content, verbatim
RNTL Test Writing Guide
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.
Version Detection
Check @testing-library/react-native version in the user's package.json:
- v14.x → load references/api-reference-v14.md (React 19+, async
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
plugins/vendored/.agents/skills/react-native-testing/SKILL.md
plugins/vendored/.agents/skills/react-native-testing/references/anti-patterns.md
plugins/vendored/.agents/skills/react-native-testing/references/api-reference-v13.md
plugins/vendored/.agents/skills/react-native-testing/references/api-reference-v14.md