React native testing skill
Test React Native components with Jest and React Native Testing Library.
by HoangNguyen0403·MIT license·★ 569 Stars on the repo·GitHub ↗
Use now
npx degit HoangNguyen0403/agent-skills-standard/skills/react-native/react-native-testing#develop ~/.claude/skills/react-native-testingChecked ·commit develop
Files of React native testing
SKILL.md
Show the full text63 lines
React Native Testing
Priority: P1 (HIGH)
Core Rule Anchors
[MOB-TEST-01]Tripartite Naming: FollowMethod_Scenario_ExpectedBehavior.[MOB-TEST-02]State & Component Invariant Rule: Assert on visible user outcomes and accessible UI elements; never inspect component internal state or props directly.[MOB-TEST-03]Entity Invariant Rule: Test calculations, validations, and domain invariants; ban trivial echo assertions.[MOB-TEST-04]Contract Testing Rule: Intercept network requests at HTTP boundary (MSW) or native module boundary; ban 1:1 pass-through mock echoing without contract assertions.[MOB-TEST-05]Bug-First Regression Lock: Every PR resolving a bug ticket or with titlefix(...)must introduce a test reproducing the defect prior to the fix.
Setup & Component Testing
- Jest & RNTL: Use
@testing-library/react-nativefor user-centric tests. Mock native modules withjest.mock(). - Component Example:
test('increments counter on button press', () => {
const { getByText, getByRole } = render(<Counter />);
fireEvent.press(getByRole('button', { name: /increment/i }));
expect(getByText('Count: 1')).toBeTruthy();
});
Best Practices
- User-Centric: Use
getByRole,getByTextovertestID. UsefindBy*for async elements. - Integration > Unit: Test features, not implementation. Avoid brittle snapshots.
- Coverage: Coverage is diagnostic and project-configured; verify risk-weighted critical paths rather than padding code for an arbitrary percentage.
Anti-Patterns
- No Testing Implementation: Test behavior, not internals. Avoid
testIDoveruse. - Banned Smells: Ban vague names, inspecting component state/props, echo assertions, and pass-through mocks.
References
See references/testing-library.md for RNTL setup, mocking providers, and integration flow examples.
Canonical response anchors
When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
Integration
RNTL
Additional task-grounded exact anchors: test behavior
| 1 | |
| 2 | name react-native-testing |
| 3 | description Test React Native components with Jest and React Native Testing Library. Use when writing Jest or React Native Testing Library tests for React Native components. |
| 4 | metadata |
| 5 | triggers |
| 6 | files |
| 7 | - '**/*.test.tsx' |
| 8 | - '**/*.spec.tsx' |
| 9 | - '__tests__/**' |
| 10 | keywords |
| 11 | - test |
| 12 | - testing |
| 13 | - jest |
| 14 | - render |
| 15 | - fireEvent |
| 16 | - waitFor |
| 17 | |
| 18 | # React Native Testing |
| 19 | |
| 20 | ## **Priority: P1 (HIGH)** |
| 21 | |
| 22 | ## Core Rule Anchors |
| 23 | |
| 24 | **`[MOB-TEST-01]` Tripartite Naming**: Follow `Method_Scenario_ExpectedBehavior`. |
| 25 | **`[MOB-TEST-02]` State & Component Invariant Rule**: Assert on visible user outcomes and accessible UI elements; never inspect component internal state or props directly. |
| 26 | **`[MOB-TEST-03]` Entity Invariant Rule**: Test calculations, validations, and domain invariants; ban trivial echo assertions. |
| 27 | **`[MOB-TEST-04]` Contract Testing Rule**: Intercept network requests at HTTP boundary (MSW) or native module boundary; ban 1:1 pass-through mock echoing without contract assertions. |
| 28 | **`[MOB-TEST-05]` Bug-First Regression Lock**: Every PR resolving a bug ticket or with title `fix(...)` must introduce a test reproducing the defect prior to the fix. |
| 29 | |
| 30 | ## Setup & Component Testing |
| 31 | |
| 32 | **Jest & RNTL**: Use `@testing-library/react-native` for user-centric tests. Mock native modules with `jest.mock()`. |
| 33 | **Component Example**: |
| 34 | |
| 35 | test('increments counter on button press', () => { |
| 36 | const { getByText, getByRole } = render(<Counter />); |
| 37 | fireEvent.press(getByRole('button', { name: /increment/i })); |
| 38 | expect(getByText('Count: 1')).toBeTruthy(); |
| 39 | }); |
| 40 | |
| 41 | |
| 42 | ## Best Practices |
| 43 | |
| 44 | **User-Centric**: Use `getByRole`, `getByText` over `testID`. Use `findBy*` for async elements. |
| 45 | **Integration > Unit**: Test features, not implementation. Avoid brittle snapshots. |
| 46 | **Coverage**: Coverage is diagnostic and project-configured; verify risk-weighted critical paths rather than padding code for an arbitrary percentage. |
| 47 | |
| 48 | ## Anti-Patterns |
| 49 | |
| 50 | **No Testing Implementation**: Test behavior, not internals. Avoid `testID` overuse. |
| 51 | **Banned Smells**: Ban vague names, inspecting component state/props, echo assertions, and pass-through mocks. |
| 52 | |
| 53 | ## References |
| 54 | |
| 55 | See [references/testing-library.md] for RNTL setup, mocking providers, and integration flow examples. |
| 56 | |
| 57 | ## Canonical response anchors |
| 58 | |
| 59 | When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant: |
| 60 | Integration |
| 61 | RNTL |
| 62 | |
| 63 | Additional task-grounded exact anchors: test behavior |
Discussion
Alternatives
`expo-overview` — router & shared rules for Expo / EASEntry point and router for every Expo or EAS task. Load this skill first — before writing code and before choosing another expo-* / eas-* skill — when the request, PRD, or spec mentions Expo, EAS, Expo Go, or an expo-* package, or the project has an `expo` dependency in `package.json`. Within that gate it also covers app specs and designs to implement (tabs, stacks, maps, lists, navigation, building from a screenshot), and phrasings like 'implement a mobile app', 'make my app look native', 'add navigation', 'fetch some data', 'upgrade my SDK', 'add Expo to my existing native app', 'ship to the App Store', or 'I'm new to Expo, where do I start'. A fully specified request (SDK pinned, libraries named, layout given) still routes through here — the shared setup rules still apply. Do NOT load it when neither signal is present: a bare React Native project with no `expo` dependency is not Expo work. Detects the real goal, routes to the right expo-* / eas-* skill, and owns the shared setup rules.Add an App Clip to an Expo AppAdd an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.App Store DeploymentBuild and submit iOS and Android apps with EAS to TestFlight, the App Store, or Google Play. Supports Expo and other React Native projects, plus existing native apps. Use for eas.json setup, release pipelines, signing, app versions and build numbers, store submissions, and listing metadata. For Expo websites and API routes, use eas-hosting; for adding React Native screens to a native app, use expo-brownfield.Designing with SleekUse when the user wants to design a mobile app or UI screens, when they mention their Sleek (sleek.design) projects, or when implementing Sleek designs in code (HTML, React Native, SwiftUI).
Browse more free Claude skills or everything in Development.