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

Mirageを使って、React Testing Libraryで書かれたテスト内で直接、個々のAPIエンドポイントをモックしましょう。

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

ステップ1: Mirageをインストールする

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

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

ステップ2: テスト内でサーバーを作成する

テストファイル内で、MirageからServerをインポートし、サーバーを作成し、コードが必要とするAPIエンドポイントをモックします。

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

let server

beforeEach(() => {
  server = createServer()
//  If your API is at a different port or host than your app, you'll need something like:
//  server = createServer({
//    environment: "test",
//    urlPrefix: "http://api.acme.com:3000",
//  })
})

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

it("shows the users from our server", async () => {
  server.get("/users", () => [
    { id: 1, name: "Luke" },
    { id: 2, 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")
})

<App />コンポーネントがレンダリングされ、Reactが/usersへのネットワークリクエストを行うと、Mirageはそれをインターセプトし、上記のデータで応答します。

各テストの後でserver.shutdown()を呼び出していることに注意してください。これにより、Mirageは自身をクリーンアップし、他のテストにリークしないようになります。

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