Mirage を使った React Native Testing Library でのモック API リクエスト

Mirage サーバーを使用して、@testing-library/react-native、Jest Native、および Jest Expo を使用して、さまざまなサーバーシナリオ下で React Native アプリをテストします。

このガイドでは、アプリが既に React Native Testing Library、Jest Native、および Expo を使用して設定されていることを前提としています。 react-test-renderer と react-native-testing-library の両方でも動作するはずです。

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

まず、Mirage がインストールされていることを確認してください。

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

ステップ 2: テスト環境の設定

Mirage で動作するように Jest 環境を更新する必要があります。

まず、XMLHttpRequest のポリフィルをインストールします。

# Using npm
npm install --save-dev xmlhttprequest

# Using Yarn
yarn add --dev xmlhttprequest

次に、プロジェクトのルートに新しい jest.setup.js ファイルを作成します。このファイルを使用して global 変数をパッチし、XMLHttpRequest、self、および window のサポートを追加します。

// jest.setup.js
global.self = global
global.window = {}
global.XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest

最後に、jest.config.js を使用して、作成した環境を Jest にロードさせます。

// jest.config.js
const jestPreset = require("@testing-library/react-native/jest-preset")

module.exports = {
  preset: "jest-expo",
  setupFiles: [...jestPreset.setupFiles],
  setupFilesAfterEnv: ["./jest.setup.js"],
}

ここで、Jest にテスト環境の設定後に jest.setup.js を実行するように指示しています。

ステップ 3: テスト内で Mirage サーバーの作成

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

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

let server

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

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

各テストの後で server.shutdown() を呼び出しているので、Mirage はクリーンアップを行い、他のテストにリークしません。

より完全な例については、GitHub の Mirage React Native デモを参照してください。

Mirage の強力なテスト機能の詳細については、アプリケーションテストガイドをお読みください。

開発