使用 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：設定您的測試環境

我們需要更新我們的 Jest 環境以使用 Mirage。

首先，安裝 XMLHttpRequest 的 polyfill

# 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 使用 jest.config.js 載入我們剛建立的環境。

// 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 強大的測試功能，請閱讀應用程式測試指南。

開發