共有 Mirage サーバーに対する React アプリの開発

Mirage サーバーを一元化し、開発とテストで共有する準備ができたら、以下の手順に従ってください。

ステップ 1: Mirage のインストール

まず、プロジェクトに Mirage を追加済みであることを確認してください。

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

ステップ 2: 共有サーバーの定義

共有サーバーを定義する一般的な場所は、src/server.js です。

// src/server.js
import { createServer, Model } from "miragejs"

export function makeServer({ environment = "test" } = {}) {
  let server = createServer({
    environment,

    models: {
      user: Model,
    },

    seeds(server) {
      server.create("user", { name: "Bob" })
      server.create("user", { name: "Alice" })
    },

    routes() {
      this.namespace = "api"

      this.get("/users", (schema) => {
        return schema.users.all()
      })
    },
  })

  return server
}

Create React App でビルドされたアプリでは、このファイルが src/ ディレクトリの下にあることを確認して、変更がリビルドをトリガーするようにしてください。

関数シグネチャに追加している environment 引数は、単なる規則です。ほとんどのアプリでは、開発モードでは makeServer を 1 回呼び出しますが、test では（さまざまなテストファイル全体で）何度も呼び出すため、デフォルトで test に設定しています。

シグネチャは自由に好きなように変更できます。

ステップ 3: 開発環境でのサーバーの起動

React アプリのブートストラップファイル（Create React App では src/index.js）を開き、makeServer 関数をインポートして、開発環境で呼び出します。

// src/index.js
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { makeServer } from "./server"

if (process.env.NODE_ENV === "development") {
  makeServer({ environment: "development" })
}

ReactDOM.render(<App />, document.getElementById("root"))

ここでは、多くの React アプリ環境で使用できる一般的なグローバル変数である process.env.NODE_ENV 環境変数を使用しています。この条件により、Mirage は本番環境でツリーシェイクされるため、本番バンドルに影響を与えません。

また、ここでは { environment: "development" } を渡しているため、Mirage の seeds() がロードされ、開発中に役立つシミュレートされたレイテンシが発生することに注意してください。

これで完了です。このコードを配置すると、アプリケーションのコンポーネントが開発中にネットワークリクエストを行うたびに、Mirage はそのリクエストをインターセプトし、サーバー定義のデータで応答します。

これで、React アプリのローカル開発を続けながら、Mirage サーバーを定義および更新するための中心的な場所ができました。