React Testing LibraryとMirageでアプリのネットワークリクエストをモックする

開発とテストの間でMirageサーバーを共有するために集中化する準備ができたら、React Testing Libraryで記述したテストで共有サーバーを使用するには、次の手順に従います。

このガイドは、ReactアプリでReact Testing Libraryを既に使用している人を対象としています。

ステップ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/ディレクトリの下にあることを確認してください。これにより、ファイルへの変更が再ビルドをトリガーします。

ステップ3：テストで共有サーバーを使用する

makeServer関数をインポートし、beforeEach関数とafterEach関数を使用してサーバーを起動およびシャットダウンします。次に、テストを使用してMirageにデータをシードするか、Mirageを必要な状態にするためのその他の変更を加えます

// src/__tests__/App.test.js
import React from "react"
import { render, waitForElement } from "@testing-library/react"
import App from "../App"
import { makeServer } from "../server"

let server

beforeEach(() => {
  server = makeServer()
})

afterEach(() => {
  server.shutdown()
})

it("shows the users from our server", async () => {
  server.create("user", { name: "Luke" })
  server.create("user", { name: "Leia" })

  const { getByTestId } = render(<App />)
  await waitForElement(() => getByTestId("user-1"))
  await waitForElement(() => getByTestId("user-2"))

  expect(getByTestId("user-1")).toHaveTextContent("Luke")
  expect(getByTestId("user-2")).toHaveTextContent("Leia")
})

各テストは独自の分離されたMirageサーバーインスタンスを取得し、行った状態またはサーバーの変更はテスト間でリークしません。

サーバーがtest環境でインスタンス化されていることを確認してください。（上記のmakeServer関数の例では、environmentをデフォルトでtestにしています。）

これで、Mirageサーバーの独自の分離されたインスタンスを持つテストを引き続き記述できるようになり、テストごとに必要なとおりに変更できます。

テストの詳細については、アプリケーションテストガイドを参照してください。