# React Native Testing Patterns

> Implements testing strategies for React Native components, MST stores, and services using Jest, React Testing Library, and Maestro. Use when writing unit, integration, or E2E tests in Purrsuit Mobile App.

- Skill: `majiayu000/react-native-testing-patterns-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/react-native-testing-patterns-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/react-native-testing-patterns-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/majiayu000/react-native-testing-patterns-2

---


# React Native Testing Patterns

This skill provides the established testing patterns for the Purrsuit Mobile App, ensuring high code quality and reliable automated verification.

## When to Use This Skill

Use this skill when you need to:
- Write unit tests for MST models and stores
- Create component tests using React Testing Library (RTL)
- Mock Expo modules or native dependencies
- Implement E2E flows using Maestro
- Test services, utility functions, or API logic

## Unit Testing (MST)

### Model Testing
```typescript
import { MyModel } from "@/models/MyModel"

describe("MyModel", () => {
  it("can be created", () => {
    const instance = MyModel.create({ id: "1", name: "Test" })
    expect(instance.name).toBe("Test")
  })

  it("handles actions correctly", () => {
    const instance = MyModel.create({ id: "1", name: "Test" })
    instance.setName("Updated")
    expect(instance.name).toBe("Updated")
  })
})
```

## Component Testing (RTL)

### Basic Component Render
```tsx
import { render } from "@testing-library/react-native"
import { ThemeProvider } from "@/theme/context"
import { MyComponent } from "./MyComponent"

describe("MyComponent", () => {
  it("renders correctly", () => {
    const { getByText } = render(
      <ThemeProvider>
        <MyComponent text="Hello" />
      </ThemeProvider>
    )
    expect(getByText("Hello")).toBeDefined()
  })
})
```

## Mocking Patterns

### Mocking Expo Modules
Mocks are usually centralized in `test/setup.ts`.

```typescript
jest.mock("expo-localization", () => ({
  getLocales: () => [{ languageTag: "en-US", textDirection: "ltr" }],
}))
```

## E2E Testing (Maestro)

### Basic Flow Pattern
```yaml
appId: ${MAESTRO_APP_ID}
onFlowStart:
  - runFlow: ../shared/_OnFlowStart.yaml
---
- tapOn: "Home"
- assertVisible: "My Collection"
```

## References

See [MST_TESTING.md](references/MST_TESTING.md) for detailed store testing patterns.

See [COMPONENT_TESTING.md](references/COMPONENT_TESTING.md) for RTL and theme provider patterns.

See [MAESTRO_FLOWS.md](references/MAESTRO_FLOWS.md) for E2E testing best practices.