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
Decision gist · record as of 2026-07-25
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.
Use it when
- react-native-testing covers key differences between v13 and v14.
- react-native-testing teaches proper query selection by matching user interactions: use getByRole for accessibility-first queries.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
callstackincubator/agent-skills/react-native-testing · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Write and review React Native component tests using Testing Library”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
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.
This skill equips you with practical testing techniques tailored for React Native development. Discover how to configure your test environment, write effective test cases, and validate your mobile applications through hands-on guidance.
React Testing Library guides you through writing tests that mirror real user behavior rather than internal implementation. It emphasizes querying by role, label, and text—prioritizing accessibility—and provides utilities for simulating user interactions, handling async operations, and debugging. Master query types, user events, and common patterns like custom renders and hook testing.
Master React Testing Library fundamentals through accessibility-first query selection, user-centric event simulation, and async handling patterns. Learn when to use getByRole, userEvent, and findBy queries, plus common pitfalls to avoid in component testing.
This skill teaches you to test React components effectively using Jest and React Testing Library. You'll learn configuration setup, query strategies, mocking techniques, async testing patterns, custom hooks testing, and integration approaches that follow user-behavior-first principles.
This skill guides you through establishing effective project structure and folder organization for React Native applications. Learn industry-standard patterns that keep your codebase scalable and maintainable as your app grows, ensuring your team can navigate and extend the project with confidence.
More skills React Testing Patterns (unlicensed) · react-testing (MIT)