在 React Native 测试库中使用 Mirage 模拟 API 请求

使用你的 Mirage 服务器，通过 @testing-library/react-native、Jest Native 和 Jest Expo 在不同的服务器场景下测试你的 React Native 应用程序。

本指南假设你的应用程序已使用 React Native 测试库、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.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 的强大测试功能，请阅读应用程序测试指南。

开发