react-native-testing

Name: react-native-testing
Author: callstackincubator

1.6kstars111forks

How to install react-native-testing?

callstackincubator/agent-skills/react-native-testing

$npx -y skills add callstackincubator/agent-skills --skill react-native-testing

Installs into the current project.

Summary

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,

Files · 1

View on GitHub

SKILL.md

1	# RNTL Test Writing Guide
2
3	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.
4
5	## Version Detection
6
7	Check `@testing-library/react-native` version in the user's `package.json`:
8
9	- v14.x → load [references/api-reference-v14.md](references/api-reference-v14.md) (React 19+, async APIs, `test-renderer`)
10	- v13.x → load [references/api-reference-v13.md](references/api-reference-v13.md) (React 18+, sync APIs, `react-test-renderer`)
11
12	Use the version-specific reference for render patterns, fireEvent sync/async behavior, screen API, configuration, and dependencies.
13
14	## Query Priority
15
16	Use in this order: `getByRole` > `getByLabelText` > `getByPlaceholderText` > `getByText` > `getByDisplayValue` > `getByTestId` (last resort).
17
18	## Query Variants
19
20	\| Variant \| Use case \| Returns \| Async \|
21	\| ------------- \| ------------------------ \| ----------------------------- \| ----- \|
22	\| `getBy*` \| Element must exist \| element instance (throws) \| No \|
23	\| `getAllBy*` \| Multiple must exist \| element instance[] (throws) \| No \|
24	\| `queryBy*` \| Check non-existence ONLY \| element instance \\| null \| No \|
25	\| `queryAllBy*` \| Count elements \| element instance[] \| No \|
26	\| `findBy*` \| Wait for element \| `Promise<element instance>` \| Yes \|
27	\| `findAllBy*` \| Wait for multiple \| `Promise<element instance[]>` \| Yes \|
28
29	## Interactions
30
31	Prefer `userEvent` over `fireEvent`. userEvent is always async.
32
33	```tsx
34	const user = userEvent.setup();
35	await user.press(element); // full press sequence
36	await user.longPress(element, { duration: 800 }); // long press
37	await user.type(textInput, 'Hello'); // char-by-char typing
38	await user.clear(textInput); // clear TextInput
39	await user.paste(textInput, 'pasted text'); // paste into TextInput
40	await user.scrollTo(scrollView, { y: 100 }); // scroll
41	```
42
43	`fireEvent` — use only when `userEvent` doesn't support the event. See version-specific reference for sync/async behavior:
44
45	```tsx
46	fireEvent.press(element);
47	fireEvent.changeText(textInput, 'new text');
48	fireEvent(element, 'blur');
49	```
50
51	## Assertions (Jest Matchers)
52
53	Available automatically with any `@testing-library/react-native` import.
54
55	\| Matcher \| Use for \|
56	\| ------------------------------------------ \| ----------------------------------------- \|
57	\| `toBeOnTheScreen()` \| Element exists in tree \|
58	\| `toBeVisible()` \| Element visible (not hidden/display:none) \|
59	\| `toBeEnabled()` / `toBeDisabled()` \| Disabled state via `aria-disabled` \|
60	\| `toBeChecked()` / `toBePartiallyChecked()` \| Checked state \|
61	\| `toBeSelected()` \| Selected state \|
62	\| `toBeExpanded()` / `toBeCollapsed()` \| Expanded state \|
63	\| `toBeBusy()` \| Busy state \|
64	\| `toHaveTextContent(text)` \| Text content match \|
65	\| `toHaveDisplayValue(value)` \| TextInput display value \|
66	\| `toHaveAccessibleName(name)` \| Accessible name \|
67	\| `toHaveAccessibilityValue(val)` \| Accessibility value \|
68	\| `toHaveStyle(style)` \| Style match \|
69	\| `toHaveProp(name, value?)` \| Prop check (last resort) \|
70	\| `toContainElement(el)` \| Contains child element \|
71	\| `toBeEmptyElement()` \| No children \|
72
73	## Rules
74
75	1. Use `screen` for queries, not destructuring from `render()`
76	2. Use `getByRole` first with `{ name: '...' }` option
77	3. *Use `queryBy` ONLY** for `.not.toBeOnTheScreen()` checks
78	4. *Use `findBy`** for async elements, NOT `waitFor` + `getBy*`
79	5. **Never put side-effects

People who liked this also viewed

6 picks

Type

react-native-testing

1.6kstars111forks

View on GitHub

How to install react-native-testing?

callstackincubator/agent-skills/react-native-testing

$npx -y skills add callstackincubator/agent-skills --skill react-native-testing

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# RNTL Test Writing Guide
2
3	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.
4
5	## Version Detection
6
7	Check `@testing-library/react-native` version in the user's `package.json`:
8
9	- v14.x → load [references/api-reference-v14.md](references/api-reference-v14.md) (React 19+, async APIs, `test-renderer`)
10	- v13.x → load [references/api-reference-v13.md](references/api-reference-v13.md) (React 18+, sync APIs, `react-test-renderer`)
11
12	Use the version-specific reference for render patterns, fireEvent sync/async behavior, screen API, configuration, and dependencies.
13
14	## Query Priority
15
16	Use in this order: `getByRole` > `getByLabelText` > `getByPlaceholderText` > `getByText` > `getByDisplayValue` > `getByTestId` (last resort).
17
18	## Query Variants
19
20	\| Variant \| Use case \| Returns \| Async \|
21	\| ------------- \| ------------------------ \| ----------------------------- \| ----- \|
22	\| `getBy*` \| Element must exist \| element instance (throws) \| No \|
23	\| `getAllBy*` \| Multiple must exist \| element instance[] (throws) \| No \|
24	\| `queryBy*` \| Check non-existence ONLY \| element instance \\| null \| No \|
25	\| `queryAllBy*` \| Count elements \| element instance[] \| No \|
26	\| `findBy*` \| Wait for element \| `Promise<element instance>` \| Yes \|
27	\| `findAllBy*` \| Wait for multiple \| `Promise<element instance[]>` \| Yes \|
28
29	## Interactions
30
31	Prefer `userEvent` over `fireEvent`. userEvent is always async.
32
33	```tsx
34	const user = userEvent.setup();
35	await user.press(element); // full press sequence
36	await user.longPress(element, { duration: 800 }); // long press
37	await user.type(textInput, 'Hello'); // char-by-char typing
38	await user.clear(textInput); // clear TextInput
39	await user.paste(textInput, 'pasted text'); // paste into TextInput
40	await user.scrollTo(scrollView, { y: 100 }); // scroll
41	```
42
43	`fireEvent` — use only when `userEvent` doesn't support the event. See version-specific reference for sync/async behavior:
44
45	```tsx
46	fireEvent.press(element);
47	fireEvent.changeText(textInput, 'new text');
48	fireEvent(element, 'blur');
49	```
50
51	## Assertions (Jest Matchers)
52
53	Available automatically with any `@testing-library/react-native` import.
54
55	\| Matcher \| Use for \|
56	\| ------------------------------------------ \| ----------------------------------------- \|
57	\| `toBeOnTheScreen()` \| Element exists in tree \|
58	\| `toBeVisible()` \| Element visible (not hidden/display:none) \|
59	\| `toBeEnabled()` / `toBeDisabled()` \| Disabled state via `aria-disabled` \|
60	\| `toBeChecked()` / `toBePartiallyChecked()` \| Checked state \|
61	\| `toBeSelected()` \| Selected state \|
62	\| `toBeExpanded()` / `toBeCollapsed()` \| Expanded state \|
63	\| `toBeBusy()` \| Busy state \|
64	\| `toHaveTextContent(text)` \| Text content match \|
65	\| `toHaveDisplayValue(value)` \| TextInput display value \|
66	\| `toHaveAccessibleName(name)` \| Accessible name \|
67	\| `toHaveAccessibilityValue(val)` \| Accessibility value \|
68	\| `toHaveStyle(style)` \| Style match \|
69	\| `toHaveProp(name, value?)` \| Prop check (last resort) \|
70	\| `toContainElement(el)` \| Contains child element \|
71	\| `toBeEmptyElement()` \| No children \|
72
73	## Rules
74
75	1. Use `screen` for queries, not destructuring from `render()`
76	2. Use `getByRole` first with `{ name: '...' }` option
77	3. *Use `queryBy` ONLY** for `.not.toBeOnTheScreen()` checks
78	4. *Use `findBy`** for async elements, NOT `waitFor` + `getBy*`
79	5. **Never put side-effects

People who liked this also viewed

6 picks

Type