npx skills add ...
npx skills add callstackincubator/agent-skills --skill react-native-testing
npx skills add callstackincubator/agent-skills --skill react-native-testing
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".
The same skill content is published under more than one repo. The install counts are split across them; any of these commands works.
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.
Check @testing-library/react-native version in the user's package.json:
test-renderer)react-test-renderer)Use the version-specific reference for render patterns, fireEvent sync/async behavior, screen API, configuration, and dependencies.
Use in this order: getByRole > getByLabelText > getByPlaceholderText > getByText > getByDisplayValue > getByTestId (last resort).
| Variant | Use case | Returns | Async |
|---|---|---|---|
getBy* | Element must exist | element instance (throws) | No |
getAllBy* | Multiple must exist | element instance[] (throws) | No |
queryBy* | Check non-existence ONLY | element instance | null | No |
queryAllBy* | Count elements | element instance[] | No |
findBy* | Wait for element | Promise<element instance> | Yes |
findAllBy* | Wait for multiple | Promise<element instance[]> | Yes |
Prefer userEvent over fireEvent. userEvent is always async.
fireEvent — use only when userEvent doesn't support the event. See version-specific reference for sync/async behavior:
Available automatically with any @testing-library/react-native import.
| Matcher | Use for |
|---|---|
toBeOnTheScreen() | Element exists in tree |
toBeVisible() | Element visible (not hidden/display:none) |
toBeEnabled() / toBeDisabled() | Disabled state via aria-disabled |
toBeChecked() / toBePartiallyChecked() | Checked state |
toBeSelected() | Selected state |
toBeExpanded() / toBeCollapsed() | Expanded state |
toBeBusy() | Busy state |
toHaveTextContent(text) | Text content match |
toHaveDisplayValue(value) | TextInput display value |
toHaveAccessibleName(name) | Accessible name |
toHaveAccessibilityValue(val) | Accessibility value |
toHaveStyle(style) | Style match |
toHaveProp(name, value?) | Prop check (last resort) |
toContainElement(el) | Contains child element |
toBeEmptyElement() | No children |
screen for queries, not destructuring from render()getByRole first with { name: '...' } optionqueryBy* ONLY for .not.toBeOnTheScreen() checksfindBy* for async elements, NOT waitFor + getBy*waitFor (no fireEvent/userEvent inside)waitForwaitForact() - render, fireEvent, userEvent handle itcleanup() - automatic after each testrole, aria-label, aria-disabled) over legacy accessibility* props*ByRole Quick ReferenceCommon roles: button, text, heading (alias: header), searchbox, switch, checkbox, radio, img, link, alert, menu, menuitem, tab, tablist, progressbar, slider, spinbutton, timer, toolbar.
getByRole options: { name, disabled, selected, checked, busy, expanded, value: { min, max, now, text } }.
For *ByRole to match, the element must be an accessibility element:
Text, TextInput, Switch are by defaultView needs accessible={true} (or use Pressable/TouchableOpacity)Options: waitFor(cb, { timeout: 1000, interval: 50 }). Works with Jest fake timers automatically.
Recommended with userEvent (press/longPress involve real durations):
Wrap providers using wrapper option:
fireEvent.press(element);
fireEvent.changeText(textInput, 'new text');
fireEvent(element, 'blur');// Correct: action first, then wait for result
fireEvent.press(button);
await waitFor(() => {
expect(screen.getByText('Result')).toBeOnTheScreen();
});
// Better: use findBy* instead
fireEvent.press(button);
expect(await screen.findByText('Result')).toBeOnTheScreen();jest.useFakeTimers();
test('with fake timers', async () => {
const user = userEvent.setup();
render(<Component />);
await user.press(screen.getByRole('button'));
// ...
});function renderWithProviders(ui: React.ReactElement) {
return render(ui, {
wrapper: ({ children }) => (
<ThemeProvider>
<AuthProvider>{children}</AuthProvider>
</ThemeProvider>
),
});
}