react-native-testing
This skill teaches you how to write effective tests for React Native components using React Native Testing Library (RNTL). You'll learn to select elements correctly, structure test cases, and apply assertions that verify component behavior—building confidence in your mobile app's quality and maintainability.
React Native Testing Library (RNTL) teaches you to write effective tests by rendering components, querying elements with accessibility-first methods, and asserting on behavior. Start by importing render and screen from RNTL, render your component, then use queries like getByRole or getByText to find elements, and apply jest matchers to verify outcomes. Structure tests with clear arrange-act-assert patterns, and always prefer querying by role or semantic properties over test IDs to ensure your tests reflect how real users interact with your app.
AI-generated summary based on this skill's SKILL.md
Install
callstack/react-native-testing-library/react-native-testing · repository language: TypeScript
git clone https://github.com/callstack/react-native-testing-library
cp -r react-native-testing-library/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 component tests using React Native Testing Library?
React Native Testing Library (RNTL) teaches you to write effective tests by rendering components, querying elements with accessibility-first methods, and asserting on behavior. Start by importing render and screen from RNTL, render your component, then use queries like getByRole or getByText to find elements, and apply jest matchers to verify outcomes. Structure tests with clear arrange-act-assert patterns, and always prefer querying by role or semantic properties over test IDs to ensure your tests reflect how real users interact with your app.
What are the key differences between RNTL v13 and v14 for sync/async render and API behavior?
React Native Testing Library v14 introduced significant changes to render behavior and async patterns compared to v13. In v14, render is now async by default, requiring you to await it or wrap tests appropriately. The API also refined how waitFor and findBy queries work, with improved handling of act warnings and stricter async/await enforcement. Understanding these version-specific differences is critical: v13 users may need to adjust test structure when upgrading to v14, particularly around render calls and async state updates. Check your package version and adjust your test setup accordingly.
How should you use userEvent versus fireEvent in React Native Testing Library?
React Native Testing Library recommends userEvent over fireEvent for most interaction testing because userEvent simulates real user behavior more accurately, including multi-step interactions and proper event sequencing. Use userEvent for typing into TextInput, pressing Pressable components, and other user-initiated actions. Reserve fireEvent only for low-level events that userEvent doesn't support or for testing edge cases. userEvent is async, so always await it in your tests, and be mindful of fake timers when using userEvent—you may need to advance timers or use real timers depending on your test setup.
Why should you apply accessibility-first querying with getByRole instead of test IDs in RNTL?
React Native Testing Library encourages getByRole and ARIA-based queries because they reflect how assistive technologies and real users navigate your app, not implementation details. Using getByRole with accessible names ensures your components are actually accessible and forces you to structure markup semantically. Test IDs (getByTestId) couple tests tightly to component internals, making refactoring painful and missing accessibility issues. By querying with getByRole, getByLabelText, and getByText, your tests become more resilient, your components more accessible, and your confidence in real-world usability higher.
What are common anti-patterns to avoid when testing React Native components with RNTL?
React Native Testing Library best practices warn against several anti-patterns: relying on test IDs instead of semantic queries, not awaiting async operations (render, userEvent, waitFor), testing implementation details rather than user behavior, and ignoring act warnings. Avoid querying by component instance or internal state; instead, query by role, text, or label. Don't skip accessibility props just to make tests pass—add proper accessible names and roles to your components. Finally, avoid excessive mocking; test real component interactions when possible. Following these guidelines helps you write maintainable tests that catch real bugs and keep your app accessible.
How do you handle waitFor and findBy patterns correctly in React Native Testing Library tests?
React Native Testing Library provides waitFor and findBy queries to handle async state updates and delayed renders. findBy queries (like findByRole) are shortcuts that internally use waitFor, so use them when you expect an element to appear after an async operation. waitFor accepts a callback and polls it until the assertion passes or timeout occurs, making it ideal for complex async scenarios. Always await both findBy and waitFor calls. Set appropriate timeouts if your app has slower operations, and remember that waitFor will automatically handle act warnings. Combine these patterns with userEvent for realistic async user interaction testing.
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
skills/react-native-testing/SKILL.md
skills/react-native-testing/references/anti-patterns.md
skills/react-native-testing/references/api-reference-v13.md
skills/react-native-testing/references/api-reference-v14.md