Mobile Testing Basics

npx create-expo-app@latest MyTestApp --template blank-typescript
cd MyTestApp
npx expo install jest-expo @testing-library/react-native @types/jest --dev

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "jest": {
    "preset": "jest-expo",
    "setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"]
  }
}

// jest.setup.ts
import "@testing-library/react-native/extend-expect";

npm test

           ┌─────────────┐
           │  E2E flows  │  few - Maestro / Detox on real builds
           ├─────────────┤
           │ Integration │  some - screens + navigation + mocked APIs
           ├─────────────┤
           │  Component  │  many - RNTL, user-visible behavior
           ├─────────────┤
           │    Unit     │  most - pure functions, reducers, hooks logic
           └─────────────┘

// src/lib/formatPrice.ts
export function formatPrice(cents: number, currency = "USD"): string {
  if (!Number.isFinite(cents) || cents < 0) {
    throw new RangeError("cents must be a non-negative finite number");
  }
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency,
  }).format(cents / 100);
}

// src/lib/formatPrice.test.ts
import { formatPrice } from "./formatPrice";
 
describe("formatPrice", () => {
  it("formats whole dollars", () => {
    expect(formatPrice(1200)).toBe("$12.00");
  });
 
  it("rejects negative values", () => {
    expect(() => formatPrice(-1)).toThrow(RangeError);
  });
});

// src/components/PrimaryButton.tsx
import { Pressable, Text, StyleSheet } from "react-native";
 
type Props = {
  label: string;
  onPress: () => void;
};
 
export function PrimaryButton({ label, onPress }: Props) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label}
      onPress={onPress}
      style={styles.button}
    >
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  button: { backgroundColor: "#2563eb", padding: 12, borderRadius: 8 },
  label: { color: "#fff", textAlign: "center", fontWeight: "600" },
});

// src/components/PrimaryButton.test.tsx
import { render, screen, userEvent } from "@testing-library/react-native";
import { PrimaryButton } from "./PrimaryButton";
 
describe("PrimaryButton", () => {
  it("calls onPress when tapped", async () => {
    const user = userEvent.setup();
    const onPress = jest.fn();
 
    render(<PrimaryButton label="Continue" onPress={onPress} />);
    await user.press(screen.getByRole("button", { name: "Continue" }));
 
    expect(onPress).toHaveBeenCalledTimes(1);
  });
});

import { View, Text, TextInput, StyleSheet } from "react-native";
 
export function EmailField() {
  return (
    <View>
      <Text nativeID="email-label">Email</Text>
      <TextInput
        accessibilityLabel="Email"
        accessibilityLabelledBy="email-label"
        placeholder="you@example.com"
        style={styles.input}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: "#d1d5db", padding: 10, borderRadius: 8 },
});

import { render, screen } from "@testing-library/react-native";
import { EmailField } from "./EmailField";
 
it("exposes the email field by accessible name", () => {
  render(<EmailField />);
  expect(screen.getByLabelText("Email")).toBeTruthy();
});

// src/hooks/useHapticTap.ts
import * as Haptics from "expo-haptics";
 
export async function useHapticTap() {
  await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
}

// src/hooks/useHapticTap.test.ts
jest.mock("expo-haptics", () => ({
  impactAsync: jest.fn(),
  ImpactFeedbackStyle: { Light: "light" },
}));
 
import * as Haptics from "expo-haptics";
import { useHapticTap } from "./useHapticTap";
 
it("fires light impact on tap", async () => {
  await useHapticTap();
  expect(Haptics.impactAsync).toHaveBeenCalledWith("light");
});

// src/screens/SignInScreen.tsx
import { useState } from "react";
import { View, Text, TextInput, Pressable, StyleSheet } from "react-native";
 
export function SignInScreen({ onSubmit }: { onSubmit: (email: string) => void }) {
  const [email, setEmail] = useState("");
  const canSubmit = email.includes("@");
 
  return (
    <View style={styles.screen}>
      <Text accessibilityRole="header">Sign in</Text>
      <TextInput
        accessibilityLabel="Email"
        value={email}
        onChangeText={setEmail}
        autoCapitalize="none"
        style={styles.input}
      />
      <Pressable
        accessibilityRole="button"
        accessibilityLabel="Continue"
        disabled={!canSubmit}
        onPress={() => onSubmit(email)}
        style={[styles.button, !canSubmit && styles.disabled]}
      >
        <Text style={styles.buttonText}>Continue</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { padding: 24, gap: 12 },
  input: { borderWidth: 1, borderColor: "#d1d5db", padding: 10, borderRadius: 8 },
  button: { backgroundColor: "#2563eb", padding: 12, borderRadius: 8 },
  disabled: { opacity: 0.4 },
  buttonText: { color: "#fff", textAlign: "center", fontWeight: "600" },
});

// src/screens/SignInScreen.test.tsx
import { render, screen, userEvent } from "@testing-library/react-native";
import { SignInScreen } from "./SignInScreen";
 
it("submits a valid email", async () => {
  const user = userEvent.setup();
  const onSubmit = jest.fn();
 
  render(<SignInScreen onSubmit={onSubmit} />);
  await user.type(screen.getByLabelText("Email"), "user@example.com");
  await user.press(screen.getByRole("button", { name: "Continue" }));
 
  expect(onSubmit).toHaveBeenCalledWith("user@example.com");
});

import { render } from "@testing-library/react-native";
import { Text, View } from "react-native";
 
function Badge({ count }: { count: number }) {
  return (
    <View>
      <Text>{count} unread</Text>
    </View>
  );
}
 
it("matches stable badge markup", () => {
  const { toJSON } = render(<Badge count={3} />);
  expect(toJSON()).toMatchSnapshot();
});

import { useEffect, useState } from "react";
import { Text, View, ActivityIndicator } from "react-native";
 
type Profile = { name: string };
 
export function ProfileCard({ userId }: { userId: string }) {
  const [profile, setProfile] = useState<Profile | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    let cancelled = false;
    fetch(`https://api.example.com/users/${userId}`)
      .then((res) => res.json())
      .then((data: Profile) => {
        if (!cancelled) setProfile(data);
      })
      .catch(() => {
        if (!cancelled) setError("Could not load profile");
      });
    return () => {
      cancelled = true;
    };
  }, [userId]);
 
  if (error) return <Text>{error}</Text>;
  if (!profile) return <ActivityIndicator accessibilityLabel="Loading profile" />;
 
  return (
    <View>
      <Text accessibilityRole="header">{profile.name}</Text>
    </View>
  );
}

import { render, screen, waitFor } from "@testing-library/react-native";
import { ProfileCard } from "./ProfileCard";
 
beforeEach(() => {
  global.fetch = jest.fn().mockResolvedValue({
    ok: true,
    json: async () => ({ name: "Riley" }),
  }) as jest.Mock;
});
 
it("shows the profile name after fetch resolves", async () => {
  render(<ProfileCard userId="42" />);
  expect(screen.getByLabelText("Loading profile")).toBeTruthy();
 
  await waitFor(() => {
    expect(screen.getByRole("header", { name: "Riley" })).toBeTruthy();
  });
});

# .maestro/flows/sign-in.yaml
appId: com.example.mytestapp
---
- launchApp
- tapOn: "Sign in"
- inputText: "user@example.com"
- tapOn: "Continue"
- assertVisible: "Welcome"

// e2e/signIn.e2e.ts - Detox (requires dev client / release build)
describe("Sign in", () => {
  beforeAll(async () => {
    await device.launchApp();
  });
 
  it("shows welcome after valid email", async () => {
    await element(by.text("Sign in")).tap();
    await element(by.label("Email")).typeText("user@example.com");
    await element(by.text("Continue")).tap();
    await expect(element(by.text("Welcome"))).toBeVisible();
  });
});

{
  "scripts": {
    "test": "jest --ci",
    "test:unit": "jest --testPathPattern=\\.test\\.ts$",
    "test:integration": "jest --testPathPattern=screens/",
    "test:e2e:maestro": "maestro test .maestro/flows",
    "test:contract": "jest --testPathPattern=contract"
  }
}

// src/api/contracts/userSchema.ts
import { z } from "zod";
 
export const userSchema = z.object({
  id: z.string().uuid(),
  email: z.string().email(),
  displayName: z.string().min(1),
});
 
export type User = z.infer<typeof userSchema>;

// src/api/contracts/userSchema.contract.test.ts
import { userSchema } from "./userSchema";
 
const fixture = {
  id: "550e8400-e29b-41d4-a716-446655440000",
  email: "user@example.com",
  displayName: "Riley",
};
 
it("mobile client accepts the user payload the server documents", () => {
  expect(() => userSchema.parse(fixture)).not.toThrow();
});