使用 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 有机会清理自身，不会泄漏到其他测试中。

要了解更多关于测试的信息，请 阅读应用程序测试指南。