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

Files of React native testing

HoangNguyen0403/develop1 file shown
SKILL.md
Show the full text63 lines

React Native Testing

Priority: P1 (HIGH)

Core Rule Anchors

  • [MOB-TEST-01] Tripartite Naming: Follow Method_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 title fix(...) must introduce a test reproducing the defect prior to the fix.

Setup & Component Testing

  • Jest & RNTL: Use @testing-library/react-native for user-centric tests. Mock native modules with jest.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, getByText over testID. Use findBy* 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 testID overuse.
  • 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---
2name: react-native-testing
3description: 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.
4metadata:
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```tsx
35test('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 
55See [references/testing-library.md](references/testing-library.md) for RNTL setup, mocking providers, and integration flow examples.
56 
57## Canonical response anchors
58 
59When 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.Coding · MITAdd 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.Coding · MITApp 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.Coding · MITDesigning 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).Coding · MIT