Tester les apps mobiles avec Jest, React Native Testing Library, Detox pour le E2E, et tests sur simulateur vs appareil réel.

Tests

ScaleRocket Mobile supporte les tests unitaires avec Jest et React Native Testing Library, plus les tests end-to-end avec Detox pour les flux utilisateur critiques.

Stack de tests

Outil	Type	Teste
Jest	Unitaire et intégration	Fonctions, hooks, logique
React Native Testing Library	Composant	Rendu UI, interactions
Detox	End-to-end	Flux utilisateur complets sur simulateur

Configuration

Jest et React Native Testing Library sont pré-configurés. Installez si vous partez de zéro :

npm install --save-dev jest @testing-library/react-native @testing-library/jest-native

Configurez dans package.json :

{
  "jest": {
    "preset": "jest-expo",
    "setupFilesAfterSetup": ["@testing-library/jest-native/extend-expect"]
  }
}

Tests unitaires

Testez les fonctions utilitaires et les hooks :

// lib/__tests__/utils.test.ts
import { formatCurrency, validateEmail } from "../utils";

describe("formatCurrency", () => {
  it("formats USD correctly", () => {
    expect(formatCurrency(9.99, "USD")).toBe("$9.99");
  });

  it("handles zero", () => {
    expect(formatCurrency(0, "USD")).toBe("$0.00");
  });
});

describe("validateEmail", () => {
  it("accepts valid emails", () => {
    expect(validateEmail("user@example.com")).toBe(true);
  });

  it("rejects invalid emails", () => {
    expect(validateEmail("not-an-email")).toBe(false);
  });
});

Tests de composants

Testez que les composants s'affichent correctement et répondent aux interactions :

// components/__tests__/Button.test.tsx
import { render, fireEvent } from "@testing-library/react-native";
import { Button } from "../ui/Button";

describe("Button", () => {
  it("renders the title", () => {
    const { getByText } = render(
      <Button title="Submit" onPress={() => {}} />
    );
    expect(getByText("Submit")).toBeTruthy();
  });

  it("calls onPress when pressed", () => {
    const onPress = jest.fn();
    const { getByText } = render(
      <Button title="Submit" onPress={onPress} />
    );
    fireEvent.press(getByText("Submit"));
    expect(onPress).toHaveBeenCalledTimes(1);
  });

  it("does not call onPress when disabled", () => {
    const onPress = jest.fn();
    const { getByText } = render(
      <Button title="Submit" onPress={onPress} disabled />
    );
    fireEvent.press(getByText("Submit"));
    expect(onPress).not.toHaveBeenCalled();
  });

  it("shows loading indicator when loading", () => {
    const { getByTestId, queryByText } = render(
      <Button title="Submit" onPress={() => {}} loading />
    );
    expect(getByTestId("loading-indicator")).toBeTruthy();
    expect(queryByText("Submit")).toBeNull();
  });
});

Tester les hooks

Testez les hooks personnalisés avec renderHook :

import { renderHook, act } from "@testing-library/react-native";
import { useCounter } from "../hooks/useCounter";

describe("useCounter", () => {
  it("increments count", () => {
    const { result } = renderHook(() => useCounter());

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(1);
  });
});

Mocker les modules natifs

Mockez les modules Expo et React Native qui ne fonctionnent pas dans l'environnement de test :

// jest.setup.ts
jest.mock("expo-secure-store", () => ({
  getItemAsync: jest.fn(),
  setItemAsync: jest.fn(),
  deleteItemAsync: jest.fn(),
}));

jest.mock("@react-native-async-storage/async-storage", () =>
  require("@react-native-async-storage/async-storage/jest/async-storage-mock")
);

Tests E2E avec Detox

Pour les flux utilisateur critiques (connexion, achat, onboarding), utilisez Detox :

npm install --save-dev detox

// e2e/login.test.ts
describe("Login Flow", () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it("should login with valid credentials", async () => {
    await element(by.id("email-input")).typeText("user@example.com");
    await element(by.id("password-input")).typeText("password123");
    await element(by.id("login-button")).tap();

    await expect(element(by.text("Dashboard"))).toBeVisible();
  });
});

Simulateur vs appareil réel

Aspect	Simulateur/Émulateur	Appareil réel
Vitesse	Rapide	Plus lent à déployer
Biométrie	Simulée	Vrai Face ID/empreinte
Notifications push	Limité	Support complet
Performance	Non représentative	Précise
Caméra	Non disponible	Fonctionne

Recommandation : Utilisez les simulateurs pour le développement et les tests automatisés. Testez sur des appareils réels avant de soumettre aux app stores.

Lancer les tests

# Lancer tous les tests
npm test

# Lancer avec couverture
npm test -- --coverage

# Lancer un fichier de test spécifique
npm test -- Button.test

# Mode watch
npm test -- --watch

Tests

On this page