mswのモックを利用したテストケースを作る

はじめに

こちらの記事で、Orvalを使ってmswのモックを生成して適応していきました。
https://zenn.dev/collabostyle/articles/136b117d2893c0

今回は、mswのモックを単体テストにも使っていきたいと思います。

事前準備

こちらの記事の続きになります。
https://zenn.dev/collabostyle/articles/136b117d2893c0

ライブラリインストール

npm i -D vitest jsdom @vitejs/plugin-react @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/testing-library__user-event

vitestコンフィグの作成

vitest.config.ts

/// <reference types="vitest" />
import react from "@vitejs/plugin-react";
import { defineConfig } from "vitest/config";
import * as path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    include: ["src/**/*.test.{js,ts,jsx,tsx}"],
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

テスト用ReactQueryプロバイダーの作成

src/lib/test-tool/TestReactQueryProvider.tsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import React from "react";

export default function TestReactQueryProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [queryClient] = React.useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

テストコードの作成

src/app/users/page.test.tsx

import { render, screen, waitFor } from "@testing-library/react";
import { beforeAll, expect, test } from "vitest";

import Page from "./page";
import TestReactQueryProvider from "@/lib/test-tool/TestReactQueryProvider";
import { server } from "@/mock/server";

beforeAll(() => {
  server.listen();
});

test("ページ表示", async () => {
  render(
    <TestReactQueryProvider>
      <Page />
    </TestReactQueryProvider>
  );

  await waitFor(
    () => {
      expect(screen.getByText("ユーザー")).toBeTruthy();
    },
    { timeout: 2000 }
  );
});

pacakge.jsonにコマンド追加する

scriptsに追加します。

    "test": "vitest",
    "test:ui": "vitest --ui",
    "coverage": "vitest run --coverage"

以上で完了です!

実行してみる

以下のコマンド実行するとテストUIが表示されいます。

npm run test:ui

テストごとの依存関係やコンソールログを見ることができます😊

おわりに

Orvalがmswのコードを一緒に生成してくれるため、テストコードの書き始めが非常に楽になりそうです😊