Module 12 — Testing

Nguyên tắc quan trọng nhất trong testing: test phải mô phỏng cách user sử dụng ứng dụng, không phải cách code được implement bên trong.

Tại sao? Vì khi refactor code (thay đổi implementation nhưng giữ nguyên behavior), tests không nên bị fail. Nếu tests fail khi refactor, nghĩa là tests đang coupled quá chặt với implementation details.

Testing Pyramid là mô hình phân bổ số lượng test theo từng level. Mỗi level có chi phí (thời gian chạy, độ phức tạp setup) và giá trị (confidence) khác nhau.

Jest là test runner mặc định trong React Native. Dưới đây là các API core cần nắm vững.

3.1 Test Structure: describe, it, expect

describe nhóm các test liên quan. it (hoặc test) định nghĩa một test case. expect tạo assertion.

describe("Calculator", () => {
  it("should add two numbers correctly", () => {
    expect(add(2, 3)).toBe(5);
  });

  it("should handle negative numbers", () => {
    expect(add(-1, -2)).toBe(-3);
  });

  it("should return 0 when adding opposites", () => {
    expect(add(5, -5)).toBe(0);
  });
});

3.2 Common Matchers

Jest cung cấp nhiều matchers khác nhau cho từng kiểu dữ liệu.

expect(value).toBe(42);
expect(value).toEqual({ name: "Linh" });
expect(value).toBeTruthy();
expect(value).toBeFalsy();
expect(value).toBeNull();
expect(value).toBeUndefined();
expect(value).toBeDefined();
expect(value).toContain("hello");
expect(value).toHaveLength(3);
expect(value).toBeGreaterThan(10);
expect(fn).toThrow();
expect(fn).toThrow("specific error message");

3.3 Setup & Teardown: beforeEach, afterEach

beforeEach chạy trước mỗi test, dùng để reset state. afterEach chạy sau mỗi test, dùng để cleanup resources. Còn có beforeAll và afterAll chạy một lần cho cả describe block.

describe("UserService", () => {
  let db;

  beforeEach(() => {
    db = createTestDatabase();
  });

  afterEach(() => {
    db.cleanup();
  });

  it("should create a user", () => {
    const user = db.createUser({ name: "Linh" });
    expect(user.id).toBeDefined();
    expect(user.name).toBe("Linh");
  });

  it("should find user by id", () => {
    const created = db.createUser({ name: "Minh" });
    const found = db.findById(created.id);
    expect(found.name).toBe("Minh");
  });
});

3.4 Mock Functions & Spies

jest.fn() tạo mock function để theo dõi calls và control return value. jest.spyOn() wrap một method thật để theo dõi mà không thay đổi behavior.

const mockCallback = jest.fn();
mockCallback.mockReturnValue(42);
mockCallback.mockResolvedValue({ data: "test" });

expect(mockCallback).toHaveBeenCalled();
expect(mockCallback).toHaveBeenCalledTimes(2);
expect(mockCallback).toHaveBeenCalledWith("arg1", "arg2");

const spy = jest.spyOn(console, "warn");
doSomething();
expect(spy).toHaveBeenCalledWith("warning message");
spy.mockRestore();

3.5 jest.mock — Module Mocking

Mock toàn bộ module, rất hữu ích khi cần thay thế native modules hoặc external dependencies.

jest.mock("@react-native-async-storage/async-storage", () => ({
  getItem: jest.fn(),
  setItem: jest.fn(),
  removeItem: jest.fn(),
}));

jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");

jest.mock("../api/userApi", () => ({
  fetchUser: jest.fn().mockResolvedValue({
    id: 1,
    name: "Test User",
  }),
}));

RNTL là thư viện testing cho React Native, xây dựng trên triết lý "test behavior, not implementation". Nó cung cấp API giống cách user tương tác với app.

4.1 render & screen queries

render() mount component vào test environment. screen cung cấp các queries để tìm elements.

import { render, screen } from "@testing-library/react-native";

render(<LoginForm />);

const emailInput = screen.getByPlaceholderText("Email");
const submitBtn = screen.getByRole("button", { name: "Đăng nhập" });
const title = screen.getByText("Chào mừng");
const avatar = screen.getByTestId("user-avatar");

Thứ tự ưu tiên khi chọn query (theo accessibility):

4.2 fireEvent & userEvent

fireEvent trigger events trên elements. Dùng để simulate user interactions.

import { render, screen, fireEvent } from "@testing-library/react-native";

render(<LoginForm onSubmit={mockSubmit} />);

fireEvent.changeText(
  screen.getByPlaceholderText("Email"),
  "test@example.com"
);

fireEvent.changeText(
  screen.getByPlaceholderText("Mật khẩu"),
  "password123"
);

fireEvent.press(screen.getByRole("button", { name: "Đăng nhập" }));

expect(mockSubmit).toHaveBeenCalledWith({
  email: "test@example.com",
  password: "password123",
});

4.3 waitFor — Async Testing

waitFor retry assertion cho đến khi pass hoặc timeout. Dùng khi test async operations (API calls, animations, timers).

import { render, screen, waitFor } from "@testing-library/react-native";

render(<UserProfile userId={1} />);

expect(screen.getByText("Đang tải...")).toBeTruthy();

await waitFor(() => {
  expect(screen.getByText("Linh Phan")).toBeTruthy();
});

expect(screen.queryByText("Đang tải...")).toBeNull();

Custom hooks không thể gọi trực tiếp ngoài component. RNTL cung cấp renderHook để test hooks trong isolation.

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

describe("useCounter", () => {
  it("should initialize with default value", () => {
    const { result } = renderHook(() => useCounter(0));
    expect(result.current.count).toBe(0);
  });

  it("should increment counter", () => {
    const { result } = renderHook(() => useCounter(0));

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

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

  it("should reset counter", () => {
    const { result } = renderHook(() => useCounter(10));

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

    expect(result.current.count).toBe(12);

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

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

act() đảm bảo tất cả state updates và effects được flush trước khi assertion chạy. Mọi thao tác gây state change trong hook đều phải wrap trong act().

Test async hook

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

jest.mock("../api/client", () => ({
  get: jest.fn().mockResolvedValue({ data: { name: "Linh" } }),
}));

describe("useFetch", () => {
  it("should fetch data and update state", async () => {
    const { result } = renderHook(() => useFetch("/users/1"));

    expect(result.current.loading).toBe(true);
    expect(result.current.data).toBeNull();

    await waitFor(() => {
      expect(result.current.loading).toBe(false);
      expect(result.current.data).toEqual({ name: "Linh" });
    });
  });
});

React Native có nhiều native modules (Camera, Geolocation, AsyncStorage...) không chạy được trong Jest environment. Cần mock chúng.

6.1 File jest.setup.js

Tạo file setup chung để mock các native modules thường dùng. Config trong jest.config.js hoặc package.json.

jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");

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

jest.mock("react-native-safe-area-context", () => {
  const inset = { top: 0, right: 0, bottom: 0, left: 0 };
  return {
    SafeAreaProvider: ({ children }) => children,
    SafeAreaView: ({ children }) => children,
    useSafeAreaInsets: () => inset,
  };
});

jest.mock("@react-navigation/native", () => ({
  useNavigation: () => ({
    navigate: jest.fn(),
    goBack: jest.fn(),
  }),
  useRoute: () => ({
    params: {},
  }),
}));

6.2 Manual Mocks (__mocks__ directory)

Tạo thư mục __mocks__ cùng cấp với module cần mock. Jest tự động sử dụng file mock thay cho module thật.

project/
├── __mocks__/
│   └── react-native-camera.js
├── src/
│   └── components/
│       └── Scanner.tsx
└── jest.config.js

MSW intercept network requests ở tầng network, không cần mock fetch/axios. Tests chạy gần giống production code hơn so với jest.mock.

7.1 Setup MSW

import { setupServer } from "msw/node";
import { http, HttpResponse } from "msw";

const handlers = [
  http.get("https://api.example.com/users/:id", ({ params }) => {
    return HttpResponse.json({
      id: params.id,
      name: "Test User",
      email: "test@example.com",
    });
  }),

  http.post("https://api.example.com/login", async ({ request }) => {
    const body = await request.json();
    if (body.email === "valid@test.com") {
      return HttpResponse.json({ token: "fake-jwt-token" });
    }
    return HttpResponse.json(
      { error: "Invalid credentials" },
      { status: 401 }
    );
  }),
];

const server = setupServer(...handlers);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

7.2 Override handler cho test cụ thể

it("should show error when API fails", async () => {
  server.use(
    http.get("https://api.example.com/users/:id", () => {
      return HttpResponse.json(
        { error: "Server Error" },
        { status: 500 }
      );
    })
  );

  render(<UserProfile userId={1} />);

  await waitFor(() => {
    expect(screen.getByText("Đã xảy ra lỗi")).toBeTruthy();
  });
});

Snapshot testing lưu output render của component thành file. Lần chạy sau so sánh với snapshot cũ để phát hiện thay đổi.

import { render } from "@testing-library/react-native";

it("should match snapshot", () => {
  const tree = render(<ProfileCard name="Linh" role="Developer" />);
  expect(tree.toJSON()).toMatchSnapshot();
});

Detox (by Wix) là framework E2E testing cho React Native. Chạy tests trên emulator/simulator thật, simulate user actions thực tế.

9.1 Setup Detox

npm install detox --save-dev
npx detox init

File .detoxrc.js config devices và build configurations.

module.exports = {
  testRunner: {
    args: {
      $0: "jest",
      config: "e2e/jest.config.js",
    },
    jest: {
      setupTimeout: 120000,
    },
  },
  apps: {
    "ios.debug": {
      type: "ios.app",
      binaryPath:
        "ios/build/Build/Products/Debug-iphonesimulator/MyApp.app",
      build:
        "xcodebuild -workspace ios/MyApp.xcworkspace -scheme MyApp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
    },
  },
  devices: {
    simulator: {
      type: "ios.simulator",
      device: {
        type: "iPhone 15",
      },
    },
  },
  configurations: {
    "ios.sim.debug": {
      device: "simulator",
      app: "ios.debug",
    },
  },
};

9.2 Viết E2E Test

Detox cung cấp API: element() tìm element, by.id() / by.text() làm matcher, .tap() / .typeText() là actions.

describe("Login Flow", () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  beforeEach(async () => {
    await device.reloadReactNative();
  });

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

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

  it("should show error with invalid credentials", async () => {
    await element(by.id("email-input")).typeText("wrong@test.com");
    await element(by.id("password-input")).typeText("wrong");
    await element(by.id("login-button")).tap();

    await expect(
      element(by.text("Email hoặc mật khẩu không đúng"))
    ).toBeVisible();
  });
});

9.3 Common Detox Actions & Assertions

Maestro là E2E testing tool sử dụng YAML thay vì JavaScript. Không cần build step phức tạp, dễ setup hơn Detox nhiều.

appId: com.myapp
---
- launchApp
- tapOn: "Email"
- inputText: "user@test.com"
- tapOn: "Mật khẩu"
- inputText: "password123"
- tapOn: "Đăng nhập"
- assertVisible: "Welcome"

Code coverage đo lường bao nhiêu phần code được chạy qua bởi tests. Targets hợp lý cho RN project:

Config coverage trong jest.config.js:

module.exports = {
  collectCoverage: true,
  coverageDirectory: "coverage",
  coverageReporters: ["text", "lcov", "clover"],
  collectCoverageFrom: [
    "src/**/*.{ts,tsx}",
    "!src/**/*.d.ts",
    "!src/**/*.stories.{ts,tsx}",
    "!src/**/index.{ts,tsx}",
  ],
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 70,
      functions: 80,
      lines: 80,
    },
  },
};