🐈

Orvalでmswのモックを生成して動かしてみる

あお

2023/11/05に公開

はじめに

Orvalにはmswとfakerを使ったモックを生成する機能があるそうなので使ってみたいと思います。

インストールなど

以下の記事を参考にプロジェクトを作成、ライブラリをインストールします。

Orvalの設定

クライアントはreact-query
mockをtrueにします。

import { defineConfig } from "orval";

export default defineConfig({
  backend: {
    input: {
      target: "./openapi/openapi.oas3.yml",
    },
    output: {
      target: "./src/api/backend.ts",
      clean: true,
      client: "react-query",
      mock: true,
    },
  },
});

Hooksの生成

以下のコマンドでHooksを生成します。

npx orval

page.tsxにHooksを組み込む

以下の記事のようにページを作成します。

mswを起動するようにする。

現状では、モックサーバーを立てなければ、リクエストに失敗してエラーの画面が表示されます。
そこで、mswを使ってhttpのモックを有効にします。

ライブラリをインストールする

以下のコマンドでインストールします。

npm i @faker-js/faker

次に、package.jsonを直接編集してdependenciesに以下の行を追加します。

"msw": "1.3.2"

2023-10-23にmswがバージョン2になり、破壊的な変更が入ったため、バージョンを直接指定してインストールします。

インストールを行います。

npm i

mswのService Wokerを生成する

npx msw init public/ --save

mockの設定を追加する

Service Woker起動のコードの追加

src/mockに3つファイルを追加していきます。

src/mock/browser.ts

import { setupWorker } from "msw";
import { getApiMSW } from "@/api/backend";

export const worker = setupWorker(...getApiMSW());

src/mock/server.ts

import { getApiMSW } from "@/api/backend";
import { setupServer } from "msw/node";

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

src/mock/index.ts

async function initMocks() {
  if (typeof window === "undefined") {
    const { server } = await import("./server");
    server.listen();
  } else {
    const { worker } = await import("./browser");
    worker.start();
  }
}

initMocks();

export {};

MSWのプロバイダー作成

NEXT_PUBLIC_API_MOCKING環境変数がenabledだとMSWのMockが起動するようになっています。

src/app/MswProvider.tsx

"use client";

if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") {
  require("../mock");
}

export default function MswProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return children;
}

MSWのプロバイダーを登録する

src/app/layout.tsx

import "./globals.css";
import AxiosProvider from "./AxiosProvider";
import ReactQueryProvider from "./ReactQueryProvider";
import MswProvider from "./MswProvider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <MswProvider>
      <AxiosProvider>
        <ReactQueryProvider>
          <html>
            <body>{children}</body>
          </html>
        </ReactQueryProvider>
      </AxiosProvider>
    </MswProvider>
  );
}

実行してみる

.envファイルや.env.localなどに環境変数を設定して起動します。

NEXT_PUBLIC_API_MOCKING = enabled

npm run dev

すると、以下のように、MSWのMockingが起動します!

終わりに

Orvalを使うとモックまで生成できて便利でした!😊

コラボスタイル DevelopersPublication

私達は『ワークスタイルの未来を切り拓く』という理念のもとワークフローの本質を追求し、新しいワークスタイルを提案するとともに、コラボスタイルが率先して時代に適したワークスタイルを常にバージョンアップし発信していきます。