フロントエンドテスト戦略の最適解：ユニットテストからE2Eまで徹底強化する方法

npm install --save-dev jest ts-jest @types/jest

import { Config } from "jest";

const config: Config = {
  preset: "ts-jest",
  testEnvironment: "node",
};

export default config;

export function sum(a: number, b: number): number {
  return a + b;
}

import { sum } from "./math";

test("sum correctly adds two numbers", () => {
  expect(sum(1, 2)).toBe(3);
});

npx jest

export class Counter {
  private count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  getCount(): number {
    return this.count;
  }
}

import { Counter } from "./counter";

test("Counter increments and decrements correctly", () => {
  const counter = new Counter();

  counter.increment();
  expect(counter.getCount()).toBe(1);

  counter.decrement();
  expect(counter.getCount()).toBe(0);
});

export async function fetchData(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Hello World"), 1000);
  });
}

import { fetchData } from "./fetchData";

test("fetchData returns expected value", async () => {
  const data = await fetchData();
  expect(data).toBe("Hello World");
});

npm install --save-dev vitest

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "node",
  },
});

import { describe, it, expect } from "vitest";
import { sum } from "./math";

describe("sum function", () => {
  it("correctly adds two numbers", () => {
    expect(sum(1, 2)).toBe(3);
  });
});

import { describe, it, expect } from "vitest";
import { Counter } from "./counter";

describe("Counter class", () => {
  it("increments and decrements correctly", () => {
    const counter = new Counter();

    counter.increment();
    expect(counter.getCount()).toBe(1);

    counter.decrement();
    expect(counter.getCount()).toBe(0);
  });
});

import { describe, it, expect } from "vitest";
import { fetchData } from "./fetchData";

describe("fetchData function", () => {
  it("returns expected value", async () => {
    const data = await fetchData();
    expect(data).toBe("Hello World");
  });
});

npx vitest

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

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Button from "../components/Button";

test("Button click triggers event", async () => {
  const onClick = jest.fn();
  render(<Button onClick={onClick}>Click me</Button>);

  await userEvent.click(screen.getByText("Click me"));

  expect(onClick).toHaveBeenCalledTimes(1);
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import LoginForm from "../components/LoginForm";

test("入力フォームのテスト", async () => {
  render(<LoginForm />);
  
  const emailInput = screen.getByLabelText("Email");
  await userEvent.type(emailInput, "test@example.com");

  expect(emailInput).toHaveValue("test@example.com");
});

import { useEffect, useState } from "react";
import { fetchData } from "../utils/api";

const DataComponent = () => {
  const [data, setData] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadData = async () => {
      try {
        const response = await fetchData();
        setData(response.data);
      } catch (err) {
        setError("Failed to load data");
      } finally {
        setLoading(false);
      }
    };

    loadData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>{error}</p>;
  }

  return <p>{data}</p>;
};

export default DataComponent;

import { render, screen, waitFor } from "@testing-library/react";
import { fetchData } from "../utils/api";
import DataComponent from "../components/DataComponent";

jest.mock("../utils/api"); // API をモック化

describe("DataComponent", () => {
  beforeEach(() => {
    jest.clearAllMocks(); // 各テスト前にモックをリセット
  });

  test("API からデータを取得して表示する", async () => {
    fetchData.mockResolvedValueOnce({ data: "Hello, World!" });

    render(<DataComponent />);

    // 初期状態では "Loading..." が表示される
    expect(screen.getByText("Loading...")).toBeInTheDocument();

    // 非同期処理が完了後に "Hello, World!" が表示されることを確認
    await waitFor(() => expect(screen.getByText("Hello, World!")).toBeInTheDocument());

    // "Loading..." は消えていることを確認
    expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
  });

  test("API がエラーを返した場合にエラーメッセージを表示する", async () => {
    fetchData.mockRejectedValueOnce(new Error("Failed to fetch"));

    render(<DataComponent />);

    expect(screen.getByText("Loading...")).toBeInTheDocument();

    // 非同期処理が完了後に "Failed to load data" が表示されることを確認
    await waitFor(() => expect(screen.getByText("Failed to load data")).toBeInTheDocument());

    // "Loading..." は消えていることを確認
    expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
  });
});

npx storybook init

npm run storybook

yarn storybook

import { Button } from "../components/Button";

export default {
  title: "Button",
  component: Button,
};

export const Default = () => <Button>Click me</Button>;

npm install @storybook/addon-storyshots @storybook/react

import initStoryshots from "@storybook/addon-storyshots";

initStoryshots();

import { within, userEvent, screen } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { Button } from "../components/Button";

export default {
  title: "Button",
  component: Button,
};

export const Clickable = () => <Button onClick={() => alert("Clicked!")}>Click me</Button>;

Clickable.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);

  // クリック前に "Click me" が存在することを明示的にテスト
  expect(await screen.findByText("Click me")).toBeInTheDocument();

  // クリック動作をシミュレート
  await userEvent.click(canvas.getByText("Click me"));
};

npm install @storybook/addon-essentials

module.exports = {
  addons: ["@storybook/addon-essentials"],
};

npm install @storybook/addon-a11y

module.exports = {
  addons: ["@storybook/addon-a11y"],
};

import { Button } from "../components/Button";
import { withA11y } from "@storybook/addon-a11y";

export default {
  title: "Button",
  component: Button,
  decorators: [withA11y],
};

npx playwright install

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

test("Home page has correct title", async ({ page }) => {
  await page.goto("http://localhost:3000");
  await expect(page).toHaveTitle(/My App/);
});

npx playwright test

npm install --save-dev cypress

npx cypress open

describe("Navigation", () => {
  it("should navigate to the about page", () => {
    cy.visit("/");
    cy.get("a[href='/about']").click();
    cy.url().should("include", "/about");
  });
});

npx cypress run

npm install --save-dev supertest

import request from "supertest";
import app from "../server";

test("GET /api returns 200", async () => {
  const response = await request(app).get("/api");
  expect(response.status).toBe(200);
  expect(response.body).toEqual({ message: "Hello, world!" });
});

test("POST /api/data returns 201", async () => {
  const response = await request(app)
    .post("/api/data")
    .send({ name: "Test Data" })
    .set("Content-Type", "application/json");

  expect(response.status).toBe(201);
  expect(response.body).toEqual({ id: 1, name: "Test Data" });
});

test("GraphQL query returns expected response", async () => {
  const response = await request(app)
    .post("/graphql")
    .send({
      query: `{ user(id: 1) { name email } }`
    })
    .set("Content-Type", "application/json");

  expect(response.status).toBe(200);
  expect(response.body).toEqual({
    data: {
      user: { name: "John Doe", email: "john@example.com" }
    }
  });
});

npm install --save-dev msw

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

// モック API の定義
const server = setupServer(
  rest.get("/api", (req, res, ctx) => {
    return res(ctx.json({ message: "Hello, world!" }));
  })
);

// テスト実行前にサーバーを起動
beforeAll(() => server.listen());

// テスト実行後にサーバーを閉じる
afterAll(() => server.close());

// 各テストの後にリクエストハンドラをリセット
afterEach(() => server.resetHandlers());

test("GET /api returns mock response", async () => {
  const response = await fetch("/api");
  const data = await response.json();

  expect(response.status).toBe(200);
  expect(data).toEqual({ message: "Hello, world!" });
});

import { setupWorker } from "msw";
import { rest } from "msw";

export const worker = setupWorker(
  rest.get("/api", (req, res, ctx) => {
    return res(ctx.json({ message: "Hello, world!" }));
  })
);

// 開発環境でモックを有効化
worker.start();

npm install @faker-js/faker

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

// 予測可能なデータを生成するためのシード値
faker.seed(123);

const user = {
  id: faker.string.uuid(),
  name: faker.person.fullName(),
  email: faker.internet.email(),
  phone: faker.phone.number(),
};

console.log(user);

const uniqueEmails = new Set();

for (let i = 0; i < 5; i++) {
  uniqueEmails.add(faker.helpers.unique(faker.internet.email));
}

console.log([...uniqueEmails]); // 一意なメールアドレスの配列

npm install @graphql-tools/mock @graphql-tools/schema graphql

import { makeExecutableSchema } from '@graphql-tools/schema';
import { addMocksToSchema } from '@graphql-tools/mock';
import { graphql } from 'graphql';
import { faker } from '@faker-js/faker';

// GraphQL スキーマの定義
const typeDefs = `
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User!]!
  }
`;

// モックレスポンスの定義
const mocks = {
  User: () => ({
    id: faker.string.uuid(),
    name: faker.person.fullName(),
    email: faker.internet.email(),
  }),
};

// モック付きのスキーマを作成
const schema = makeExecutableSchema({ typeDefs });
const schemaWithMocks = addMocksToSchema({ schema, mocks });

// クエリを実行
const query = `
  query {
    users {
      id
      name
      email
    }
  }
`;

graphql({ schema: schemaWithMocks, source: query }).then((result) =>
  console.log(JSON.stringify(result, null, 2))
);

import { makeExecutableSchema } from '@graphql-tools/schema';
import { addMocksToSchema } from '@graphql-tools/mock';
import { graphql } from 'graphql';
import { faker } from '@faker-js/faker';

// スキーマ定義
const typeDefs = `
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User!]!
  }
`;

// カスタムリゾルバの定義
const mocks = {
  Query: {
    users: () => {
      return Array.from({ length: 5 }).map(() => ({
        id: faker.string.uuid(),
        name: faker.person.fullName(),
        email: faker.internet.email(),
      }));
    },
  },
};

// モック付きのスキーマを作成
const schema = makeExecutableSchema({ typeDefs });
const schemaWithMocks = addMocksToSchema({ schema, mocks });

// クエリの実行
const query = `
  query {
    users {
      id
      name
      email
    }
  }
`;

graphql({ schema: schemaWithMocks, source: query }).then((result) =>
  console.log(JSON.stringify(result, null, 2))
);

jest --max-workers=50%

jest --max-workers=$(nproc)

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        shard: [1, 2, 3, 4] # 4 つに分割
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Run tests (sharded)
        run: |
          TEST_FILES=$(jest --listTests | sort | awk "NR % 4 == $(( ${{ matrix.shard }} - 1 ))")
          jest $TEST_FILES --max-workers=2

- name: Cache node_modules
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: npm-${{ hashFiles('package-lock.json') }}
    restore-keys: |
      npm-

- restore_cache:
    keys:
      - npm-deps-{{ checksum "package-lock.json" }}
- run: npm ci
- save_cache:
    key: npm-deps-{{ checksum "package-lock.json" }}
    paths:
      - ~/.npm

jest --cache

- name: Cache Jest cache
  uses: actions/cache@v3
  with:
    path: .jest/cache
    key: jest-${{ github.run_id }}
    restore-keys: |
      jest-

- name: Cache Prisma
  uses: actions/cache@v3
  with:
    path: node_modules/.prisma
    key: prisma-${{ hashFiles('prisma/schema.prisma') }}
    restore-keys: |
      prisma-

- restore_cache:
    keys:
      - prisma-cache-{{ checksum "prisma/schema.prisma" }}
- run: npx prisma generate
- save_cache:
    key: prisma-cache-{{ checksum "prisma/schema.prisma" }}
    paths:
      - node_modules/.prisma

import { fetchUser } from '../src/userService';
import axios from 'axios';

jest.mock('axios');

describe('fetchUser', () => {
  it('should return user data', async () => {
    (axios.get as jest.Mock).mockResolvedValue({ data: { id: 1, name: 'Alice' } });

    const user = await fetchUser(1);
    expect(user).toEqual({ id: 1, name: 'Alice' });
  });
});

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

describe('User Repository Integration Test', () => {
  beforeAll(async () => {
    await prisma.$connect();
  });

  afterAll(async () => {
    await prisma.$disconnect();
  });

  beforeEach(async () => {
    await prisma.user.deleteMany(); // データリセット
  });

  it('should create and retrieve a user', async () => {
    await prisma.user.create({ data: { name: 'Alice' } });
    const users = await prisma.user.findMany();
    expect(users).toHaveLength(1);
    expect(users[0].name).toBe('Alice');
  });
});

version: '3.8'
services:
  postgres:
    image: postgres:14
    environment:
      POSTGRES_USER: test
      POSTGRES_PASSWORD: test
      POSTGRES_DB: test_db
    ports:
      - "5432:5432"

DATABASE_URL=postgresql://test_user:test_password@localhost:5432/test_db?schema=public

import dotenv from 'dotenv';

// `.env.test` を優先して読み込む
dotenv.config({ path: '.env.test' });

module.exports = {
  setupFiles: ['<rootDir>/jest.setup.ts'],
};

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

test('ログイン成功時の挙動を確認', async ({ page }) => {
  await page.goto('https://staging.example.com/login');

  await page.fill('input[name="email"]', 'test@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');

  await expect(page).toHaveURL('https://staging.example.com/dashboard');
});

BASE_URL=https://staging.example.com

BASE_URL=https://example.com

name: Run Tests and Upload Coverage

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Run tests with coverage
        run: npm test -- --coverage

      - name: Upload coverage to Codecov
        uses: codecov/codecov-action@v3
        with:
          token: ${{ secrets.CODECOV_TOKEN }} # Codecov のトークン（リポジトリの Secrets に登録）

module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
  coverageDirectory: "coverage",
  coverageReporters: ["json", "lcov", "text", "clover"],
};

npm install sonar-scanner

sonar.projectKey=your_project_key
sonar.organization=your_organization
sonar.host.url=https://sonarcloud.io
sonar.token=your_sonar_token

sonar.sources=src
sonar.exclusions=**/*.spec.js, **/*.test.js
sonar.tests=tests
sonar.test.inclusions=**/*.spec.js, **/*.test.js
sonar.javascript.lcov.reportPaths=coverage/lcov.info

- name: Run SonarQube Scan
  run: sonar-scanner

FEATURE_NEW_DASHBOARD=true

export const featureFlags = {
  newDashboard: process.env.FEATURE_NEW_DASHBOARD === "true",
};

export const featureFlags = {
  newAlgorithm: process.env.FEATURE_NEW_ALGORITHM === "true",
};

export function isFeatureEnabled(flag: keyof typeof featureFlags): boolean {
  return featureFlags[flag];
}

import { isFeatureEnabled } from "./featureFlags";

export function calculateDiscount(price: number): number {
  if (isFeatureEnabled("newAlgorithm")) {
    // 新アルゴリズムの適用
    return price * 0.9; // 10% 割引
  } else {
    // 旧アルゴリズムの適用
    return price * 0.95; // 5% 割引
  }
}

import { calculateDiscount } from "../calculateDiscount";
import * as featureFlags from "../featureFlags"; // モジュールを import する

describe("calculateDiscount", () => {
  afterEach(() => {
    jest.restoreAllMocks(); // モックのリセット
  });

  test("フィーチャーフラグが ON の場合、新アルゴリズム (10% 割引) が適用される", () => {
    jest.spyOn(featureFlags, "isFeatureEnabled").mockReturnValue(true);

    expect(calculateDiscount(1000)).toBe(900); // 1000円の10%引き → 900円
  });

  test("フィーチャーフラグが OFF の場合、旧アルゴリズム (5% 割引) が適用される", () => {
    jest.spyOn(featureFlags, "isFeatureEnabled").mockReturnValue(false);

    expect(calculateDiscount(1000)).toBe(950); // 1000円の5%引き → 950円
  });
});