MSWでAPIをまねてReactのコンポーネントをテストする方法

// src/api.ts
export type Todo = { id: number; title: string };

export const API_BASE = 'https://api.example.com';

export async function fetchTodos(): Promise<Todo[]> {
  const res = await fetch(`${API_BASE}/todos`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

export async function addTodo(title: string): Promise<Todo> {
  const res = await fetch(`${API_BASE}/todos`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title }),
  });
  if (!res.ok) {
    const body: { message?: string } | null = await res.json().catch(() => null);
    throw new Error(body?.message ?? `HTTP ${res.status}`);
  }
  return res.json();
}

// src/TodoList.tsx
import { useEffect, useState } from 'react';
import { addTodo, fetchTodos, type Todo } from './api';

export function TodoList() {
  const [todos, setTodos] = useState<Todo[] | null>(null);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [reloadKey, setReloadKey] = useState(0);
  const [title, setTitle] = useState('');
  const [addError, setAddError] = useState<string | null>(null);

  useEffect(() => {
    let ignore = false;
    setLoadError(null);
    fetchTodos().then(
      (data) => {
        if (!ignore) setTodos(data);
      },
      (e: Error) => {
        if (!ignore) setLoadError(e.message);
      },
    );
    return () => {
      ignore = true;
    };
  }, [reloadKey]);

  async function handleAdd() {
    setAddError(null);
    try {
      const todo = await addTodo(title);
      setTodos((prev) => [...(prev ?? []), todo]);
      setTitle('');
    } catch (e) {
      setAddError((e as Error).message);
    }
  }

  if (loadError) {
    return (
      <div>
        <p role="alert">読み込みに失敗しました（{loadError}）</p>
        <button onClick={() => setReloadKey((k) => k + 1)}>再読み込み</button>
      </div>
    );
  }
  if (!todos) return <p>読み込み中…</p>;

  return (
    <div>
      <ul>
        {todos.map((t) => (
          <li key={t.id}>{t.title}</li>
        ))}
      </ul>
      <label>
        やること
        <input value={title} onChange={(e) => setTitle(e.target.value)} />
      </label>
      <button onClick={handleAdd}>追加</button>
      {addError && <p role="alert">{addError}</p>}
    </div>
  );
}

// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw/http';
import type { Todo } from '../api';

export const handlers = [
  http.get('https://api.example.com/todos', () => {
    return HttpResponse.json<Todo[]>([
      { id: 1, title: '牛乳を買う' },
      { id: 2, title: '本を返す' },
    ]);
  }),

  http.post<never, { title?: string }>('https://api.example.com/todos', async ({ request }) => {
    const { title } = await request.json();
    // 本物の API と同じように、空のタイトルは 400 で断る
    if (!title?.trim()) {
      return HttpResponse.json({ message: 'タイトルを入れてください' }, { status: 400 });
    }
    return HttpResponse.json<Todo>({ id: 3, title }, { status: 201 });
  }),
];

// src/mocks/node.ts
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

// vitest.setup.ts
import '@testing-library/jest-dom/vitest';
import { cleanup } from '@testing-library/react';
import { afterAll, afterEach, beforeAll } from 'vitest';
import { server } from './src/mocks/node';

// ハンドラーのない通信があったら、エラーにする
beforeAll(() => server.listen({ onUnhandledFrame: 'error' }));
afterEach(() => {
  cleanup();
  // テストの中で server.use() した上書きを、次のテストに持ち越さない
  server.resetHandlers();
});
afterAll(() => server.close());

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    include: ['src/**/*.test.tsx'],
    setupFiles: ['./vitest.setup.ts'],
  },
});

// src/TodoList.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw/http';
import { expect, test } from 'vitest';
import { server } from './mocks/node';
import { TodoList } from './TodoList';

test('一覧を表示する', async () => {
  render(<TodoList />);
  expect(await screen.findByText('牛乳を買う')).toBeInTheDocument();
  expect(screen.getByText('本を返す')).toBeInTheDocument();
});

test('サーバーが500を返すと、エラーを表示する', async () => {
  server.use(
    http.get('https://api.example.com/todos', () => {
      return new HttpResponse(null, { status: 500 });
    }),
  );
  render(<TodoList />);
  expect(await screen.findByRole('alert')).toHaveTextContent('読み込みに失敗しました（HTTP 500）');
});

test('つながらないときも、エラーを表示する', async () => {
  server.use(
    http.get('https://api.example.com/todos', () => {
      return HttpResponse.error();
    }),
  );
  render(<TodoList />);
  expect(await screen.findByRole('alert')).toHaveTextContent('読み込みに失敗しました');
  console.log('表示された文:', screen.getByRole('alert').textContent);
});

表示された文: 読み込みに失敗しました（fetch failed）

test('1回目だけ失敗し、再読み込みで一覧が出る', async () => {
  server.use(
    http.get(
      'https://api.example.com/todos',
      () => new HttpResponse(null, { status: 503 }),
      { once: true },
    ),
  );
  const user = userEvent.setup();
  render(<TodoList />);
  await user.click(await screen.findByRole('button', { name: '再読み込み' }));
  expect(await screen.findByText('牛乳を買う')).toBeInTheDocument();
});

test('追加すると、一覧の最後に加わる', async () => {
  const user = userEvent.setup();
  render(<TodoList />);
  await user.type(await screen.findByLabelText('やること'), '花に水をやる');
  await user.click(screen.getByRole('button', { name: '追加' }));
  expect(await screen.findByText('花に水をやる')).toBeInTheDocument();
  expect(screen.getAllByRole('listitem')).toHaveLength(3);
});

test('空のまま追加すると、サーバーのエラー文を表示する', async () => {
  const user = userEvent.setup();
  render(<TodoList />);
  await user.click(await screen.findByRole('button', { name: '追加' }));
  expect(await screen.findByRole('alert')).toHaveTextContent('タイトルを入れてください');
});

$ npx vitest run --reporter=verbose
 ✓ src/TodoList.test.tsx > 一覧を表示する 87ms
 ✓ src/TodoList.test.tsx > サーバーが500を返すと、エラーを表示する 100ms
 ✓ src/TodoList.test.tsx > つながらないときも、エラーを表示する 23ms
 ✓ src/TodoList.test.tsx > 1回目だけ失敗し、再読み込みで一覧が出る 60ms
 ✓ src/TodoList.test.tsx > 追加すると、一覧の最後に加わる 88ms
 ✓ src/TodoList.test.tsx > 空のまま追加すると、サーバーのエラー文を表示する 42ms

      Tests  6 passed (6)

 ✓ src/TodoList.test.tsx > 一覧を表示する 97ms
 ✓ src/TodoList.test.tsx > サーバーが500を返すと、エラーを表示する 115ms
 ✓ src/TodoList.test.tsx > つながらないときも、エラーを表示する 19ms
 × src/TodoList.test.tsx > 1回目だけ失敗し、再読み込みで一覧が出る 1068ms
   → Unable to find an element with the text: 牛乳を買う. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
 × src/TodoList.test.tsx > 追加すると、一覧の最後に加わる 1009ms
   → Unable to find a label with the text of: やること
 × src/TodoList.test.tsx > 空のまま追加すると、サーバーのエラー文を表示する 1007ms
   → Unable to find role="button" and name "追加"
      Tests  3 failed | 3 passed (6)

[MSW] Error: intercepted a request without a matching request handler:
  • GET https://api.example.com/todos
If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/http/intercepting-requests
 × src/TodoList.test.tsx > 一覧を表示する 1040ms
   → Unable to find an element with the text: 牛乳を買う. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

TypeError: Failed to parse URL from /todos