React Native Testing

React Native Testing

Priority: P1 (HIGH)

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

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

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 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