Reactアプリケーションの信頼性を向上させるためには、包括的なテスト戦略が必要です。本章では、ユニットテストからE2Eテスト、型を活用したテストの信頼性向上、さらにモックデータ生成ツールを用いた効率的なテスト環境の構築について解説します。

1. Reactコンポーネントのユニットテスト (JestとReact Testing Library)

Jestによるユニットテスト

• 特徴:
  • JavaScriptテストフレームワーク。
  • スナップショットテスト、モック関数のサポート。

基本的な例

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

test("renders App component", () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/hello world/i);
  expect(linkElement).toBeInTheDocument();
});

React Testing Libraryの活用

• 特徴:
  • DOM操作ではなくユーザーの操作に焦点を当てたテスト。

例: ボタンのクリック動作

import { render, fireEvent } from "@testing-library/react";
import Counter from "./Counter";

test("increments counter", () => {
  const { getByText } = render(<Counter />);
  const button = getByText(/increment/i);
  fireEvent.click(button);
  expect(getByText(/count: 1/i)).toBeInTheDocument();
});

2. E2Eテスト (PlaywrightやCypress)

Playwright

• 特徴:
  • マルチブラウザ対応のE2Eテストフレームワーク。
  • 高速で信頼性の高いテストが可能。

基本的な例

import { test, expect } from "@playwright/test";

test("has title", async ({ page }) => {
  await page.goto("https://example.com");
  await expect(page).toHaveTitle(/Example Domain/);
});

Cypress

• 特徴:
  • フロントエンド向けに最適化されたE2Eテストツール。
  • 開発中のデバッグが容易。

基本的な例

describe("My First Test", () => {
  it("Visits the Kitchen Sink", () => {
    cy.visit("https://example.cypress.io");
    cy.contains("type").click();
    cy.url().should("include", "/commands/actions");
  });
});

3. 型を活用したテストの信頼性向上

型定義によるテストのメリット

• 型情報を利用することで、テストコードの信頼性と可読性を向上。
• バックエンドAPIとの整合性を確保。

TypeScriptを用いた例

interface User {
  id: string;
  name: string;
}

test("fetches user data", async () => {
  const mockUser: User = { id: "1", name: "John Doe" };
  const fetchUser = jest.fn().mockResolvedValue(mockUser);

  const user = await fetchUser();
  expect(user.name).toBe("John Doe");
});

4. モックデータ生成 (MSWやfaker.js)

MSW (Mock Service Worker)

• 特徴:
  • サーバーサイドのAPIをモック化し、フロントエンドテストをサポート。

使用例

import { setupServer } from "msw/node";
import { rest } from "msw";

const server = setupServer(
  rest.get("/api/user", (req, res, ctx) => {
    return res(ctx.json({ id: "1", name: "John Doe" }));
  })
);

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

test("fetches user", async () => {
  const response = await fetch("/api/user");
  const data = await response.json();
  expect(data.name).toBe("John Doe");
});

faker.js

• 特徴:
  • ランダムなテストデータを生成。

使用例

import { faker } from "@faker-js/faker";

test("generates random user data", () => {
  const user = {
    id: faker.datatype.uuid(),
    name: faker.name.findName(),
    email: faker.internet.email(),
  };
  expect(user.name).toBeTruthy();
  expect(user.email).toContain("@");
});

---

テストの充実は、Reactアプリケーションの品質を向上させる上で重要です。本章で紹介したユニットテスト、E2Eテスト、型を活用したテスト戦略、およびモックデータ生成ツールを適切に組み合わせ、堅牢なテスト基盤を構築しましょう。