react-native-testing

$npx mdskill add HoangNguyen0403/agent-skills-standard/react-native-testing

- **Jest**: Pre-configured in React Native. - **Testing Library**: Use `@testing-library/react-native` for user-centric tests. - **Mocking**: Use `jest.mock()` for native modules.

SKILL.md

.github/skills/react-native-testingView on GitHub ↗
---
name: react-native-testing
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.
metadata:
  triggers:
    files:
    - '**/*.test.tsx'
    - '**/*.spec.tsx'
    - '__tests__/**'
    keywords:
    - test
    - testing
    - jest
    - render
    - fireEvent
    - waitFor
---
# React Native Testing

## **Priority: P1 (OPERATIONAL)**

## Setup

- **Jest**: Pre-configured in React Native.
- **Testing Library**: Use `@testing-library/react-native` for user-centric tests.
- **Mocking**: Use `jest.mock()` for native modules.

## Component Testing

```tsx
import { render, fireEvent, waitFor } from '@testing-library/react-native';

test('increments counter on button press', () => {
  const { getByText, getByRole } = render(<Counter />);
  const button = getByRole('button', { name: /increment/i });

  fireEvent.press(button);

  expect(getByText('Count: 1')).toBeTruthy();
});
```

## Async Testing

```tsx
test('fetches and displays data', async () => {
  const { findByText } = render(<DataComponent />);
  const element = await findByText(/loaded data/i);
  expect(element).toBeTruthy();
});
```

## Best Practices

- **User-Centric**: Use `getByRole`, `getByText` over `testID` when possible.
- **Integration > Unit**: Test features, not implementation.
- **Avoid Snapshots**: Use sparingly. Brittle and hard to review.
- **Coverage**: Aim for 70%+. Focus on critical paths.

## Anti-Patterns

- **No Testing Implementation**: Test behavior, not internals.
- **No testID Overuse**: Prefer accessible queries.

## References

See [references/testing-library.md](references/testing-library.md) for RNTL setup, mocking providers, and integration flow examples.

More from HoangNguyen0403/agent-skills-standard

SkillDescription
android-agp-upgradeUpgrade an Android project to Android Gradle Plugin (AGP) 9. Use when migrating to AGP 9, updating Gradle build files, migrating to built-in Kotlin, or adopting the new AGP DSL.
android-architectureApply Clean Architecture layering, modularization, and Unidirectional Data Flow in Android projects. Use when setting up project structure, placing code in layers, configuring feature/core modules, or implementing UDF patterns.
android-background-workImplement WorkManager and background processing correctly on Android. Use when creating Worker classes, scheduling tasks, choosing between WorkManager and Foreground Services, or setting up Hilt in workers.
android-composeBuild high-performance declarative UI with Jetpack Compose. Use when writing Composable functions, optimizing recomposition, hoisting state, or working with LazyColumn and side effects.
android-compose-migrationMigrate an Android XML View to Jetpack Compose following a structured 10-step workflow. Use when converting XML layouts to Compose, setting up Compose in an existing View-based project, or incrementally adopting Compose.
android-concurrencyWrite correct coroutine scopes, Flow collection, and dispatcher injection in Android. Use when writing suspend functions, choosing between StateFlow and SharedFlow, or injecting Dispatchers for testability.
android-deploymentConfigure release signing, R8 obfuscation, and App Bundle publishing for Android. Use when setting up signing configs, enabling minification, adding ProGuard keep rules, or preparing for Play Store submission.
android-design-systemEnforce Material Design 3 theming and design token usage in Jetpack Compose. Use when implementing M3 components, color schemes, typography, or design tokens.
android-diConfigure Hilt dependency injection with proper scoping, modules, and constructor injection in Android. Use when setting up Hilt DI, defining modules, or configuring component scoping.
android-edge-to-edgeMigrate a Jetpack Compose app to edge-to-edge display and fix system bar inset issues. Use when UI components are obscured by navigation/status bars, fixing IME insets, or enabling edge-to-edge for SDK 35+.