Unit & Component Tests with Jest and Testing Library

Core concepts

1. Setup: Install jest-expo, @testing-library/react-native and types, set preset: 'jest-expo' and add an npm test script. — Expo unit testing
2. Test pure logic first: Functions like price calculation or date formatting are the cheapest, highest-value tests. — Jest docs
3. Query by what users see: Use getByText, getByRole and getByLabelText instead of test IDs when possible; add accessibility labels as you go. — RNTL docs
4. Mock the edges: Mock network calls and native modules, not your own logic. Use mock service responses for TanStack Query hooks. — Jest docs

Concept videos

YouTube channels and searches for these topics. On a large screen they open in the reading panel next to the roadmap.

• Jest + RNTL — YouTube search: Jest React Native Testing Library Expo

Explanation

Async UI

Use await screen.findByText(...) for content that appears after a promise. Avoid arbitrary timeouts.

Wrap providers

Create a renderWithProviders helper that adds the query client and theme, so tests mirror the real app.

What Is It?

Unit and component tests run in Node without a device and check logic and rendered output.

Why Should I Care?

They run in seconds, so agents and CI can run them after every change.

Real World Analogy

They are quick sanity checks on each part before assembling the machine.

Visual Mental Model

input -> component/function -> assert visible output

Smallest Possible Example

// package.json excerpt
{
  "scripts": { "test": "jest" },
  "jest": { "preset": "jest-expo" }
}

Common Mistakes

❌ Testing library internals.

Tests break on refactors; test outcomes.

❌ Using fixed sleeps.

Use findBy queries and waitFor.

Build This Mini Project

Add Jest, write three tests (one util, one component, one async list) and a renderWithProviders helper.

Prompts for Cursor, Claude Code & Codex

Paste these into Cursor, Claude Code, Codex, or any coding agent. Replace the bracketed parts with your app details, and keep the agent in plan mode first so you review the approach before it edits files.

Add the test setup

Set up jest-expo and React Native Testing Library, add npm test, create test-utils/renderWithProviders.tsx, and write one example test. Run it and report the output.

Rules, databases & blogs to use

• Jest unit testing rule: Jest rule
• Vitest rule: if you test shared TypeScript packages

Resources

• Expo unit testing
• Testing Library
• Jest