結合テストの基本 — 何と何を「結合」して確認するのか

// 例: フロントエンドの結合テスト
// → APIレスポンスはMSW（Mock Service Worker）でモック
// → コンポーネント同士の連携は本物のまま
 
import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
 
const server = setupServer(
  http.get('/api/users', () => {
    return HttpResponse.json([
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
    ]);
  })
);
 
beforeAll(() => server.listen());
afterAll(() => server.close());

// 関数Aは { userName: string } を返す
function fetchUser() {
  return { userName: 'Alice' };
}
 
// コンポーネントBは { name: string } を期待している
function UserCard({ user }: { user: { name: string } }) {
  return <div>{user.name}</div>; // undefined — キー名が違う
}

// APIの呼び出し完了前にレンダリングが走り、データがundefined
function UserProfile() {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);
 
  return <div>{user.name}</div>; // ← 初回レンダリングでエラー
}

// NG — 内部実装に依存
test('fetchUserが呼ばれてstateが更新される', () => { ... });
 
// OK — ユーザー行動を起点にする
test('ユーザー一覧ページにアクセスすると、ユーザー名が表示される', () => { ... });

beforeEach(() => {
  // 各テストの前にモックサーバーをリセット
  server.resetHandlers();
});

// NG — 固定時間で待つ（遅いし不安定）
await new Promise(r => setTimeout(r, 3000));
 
// OK — 条件を満たすまで待つ
await waitFor(() => {
  expect(screen.getByText('Alice')).toBeInTheDocument();
});