React Native Testing Library

import { useState } from "react";
import { render, screen, userEvent, waitFor } from "@testing-library/react-native";
import { Pressable, Text, TextInput, View } from "react-native";
 
function LoginForm({ onSubmit }: { onSubmit: (email: string) => void }) {
  const [email, setEmail] = useState("");
  return (
    <View>
      <TextInput
        accessibilityLabel="Email"
        value={email}
        onChangeText={setEmail}
      />
      <Pressable accessibilityRole="button" onPress={() => onSubmit(email)}>
        <Text>Sign in</Text>
      </Pressable>
    </View>
  );
}
 
test("submits email on press", async () => {
  const onSubmit = jest.fn();
  const user = userEvent.setup();
 
  render(<LoginForm onSubmit={onSubmit} />);
 
  await user.type(screen.getByLabelText("Email"), "alex@example.com");
  await user.press(screen.getByRole("button", { name: "Sign in" }));
 
  await waitFor(() => {
    expect(onSubmit).toHaveBeenCalledWith("alex@example.com");
  });
});

// src/features/tasks/task-list.tsx
import { useCallback, useState } from "react";
import {
  ActivityIndicator,
  FlatList,
  Pressable,
  Text,
  View,
  type ListRenderItem,
} from "react-native";
 
export interface Task {
  id: string;
  title: string;
  done: boolean;
}
 
interface TaskListProps {
  tasks: Task[];
  loading: boolean;
  onToggle: (id: string) => void;
}
 
export function TaskList({ tasks, loading, onToggle }: TaskListProps) {
  const [error, setError] = useState<string | null>(null);
 
  const renderItem: ListRenderItem<Task> = useCallback(
    ({ item }) => (
      <Pressable
        accessibilityRole="checkbox"
        accessibilityState={{ checked: item.done }}
        onPress={() => onToggle(item.id)}
      >
        <Text>{item.title}</Text>
      </Pressable>
    ),
    [onToggle]
  );
 
  if (loading) {
    return (
      <View accessibilityLabel="Loading tasks">
        <ActivityIndicator />
      </View>
    );
  }
 
  if (error) {
    return <Text role="alert">{error}</Text>;
  }
 
  if (tasks.length === 0) {
    return <Text>No tasks yet</Text>;
  }
 
  return (
    <FlatList
      data={tasks}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
    />
  );
}

// __tests__/task-list-test.tsx
import { render, screen, userEvent, waitFor } from "@testing-library/react-native";
import { TaskList, type Task } from "../src/features/tasks/task-list";
 
const TASKS: Task[] = [
  { id: "1", title: "Ship release", done: false },
  { id: "2", title: "Write tests", done: true },
];
 
describe("<TaskList />", () => {
  test("shows loading state", () => {
    render(<TaskList tasks={[]} loading onToggle={jest.fn()} />);
    expect(screen.getByLabelText("Loading tasks")).toBeOnTheScreen();
  });
 
  test("shows empty state", () => {
    render(<TaskList tasks={[]} loading={false} onToggle={jest.fn()} />);
    expect(screen.getByText("No tasks yet")).toBeOnTheScreen();
  });
 
  test("toggles a task via checkbox role", async () => {
    const onToggle = jest.fn();
    const user = userEvent.setup();
 
    render(<TaskList tasks={TASKS} loading={false} onToggle={onToggle} />);
 
    const shipRelease = screen.getByRole("checkbox", { name: "Ship release" });
    expect(shipRelease).toHaveAccessibilityState({ checked: false });
 
    await user.press(shipRelease);
 
    await waitFor(() => {
      expect(onToggle).toHaveBeenCalledWith("1");
    });
  });
 
  test("lists all task titles", () => {
    render(<TaskList tasks={TASKS} loading={false} onToggle={jest.fn()} />);
    expect(screen.getByText("Ship release")).toBeOnTheScreen();
    expect(screen.getByText("Write tests")).toBeOnTheScreen();
  });
});

// Element appears after fetch - prefer findBy*
expect(await screen.findByText("Welcome back")).toBeOnTheScreen();
 
// Callback or mock invoked after state flush
await waitFor(() => {
  expect(onSubmit).toHaveBeenCalled();
});
 
// Multiple assertions after one interaction
await user.press(screen.getByRole("button", { name: "Refresh" }));
await waitFor(() => {
  expect(screen.getByText("Updated")).toBeOnTheScreen();
});

import { renderRouter, screen } from "expo-router/testing-library";
import { Text, View } from "react-native";
 
test("lands on settings route", async () => {
  const Settings = () => (
    <View>
      <Text>Settings</Text>
    </View>
  );
 
  renderRouter(
    { index: () => <Text>Home</Text>, settings: Settings },
    { initialUrl: "/settings" }
  );
 
  expect(screen).toHavePathname("/settings");
  expect(screen.getByText("Settings")).toBeOnTheScreen();
});

import { renderHook, act } from "@testing-library/react-native";
import { useCounter } from "../src/hooks/use-counter";
 
test("increments", () => {
  const { result } = renderHook(() => useCounter());
 
  act(() => {
    result.current.increment();
  });
 
  expect(result.current.count).toBe(1);
});