使用 React Testing Library 和 Mirage 模拟应用程序的网络请求

一旦你准备好集中你的 Mirage 服务器以在开发和测试之间共享它，请按照以下步骤在使用 React Testing Library 编写的测试中使用共享服务器。

本指南适用于已经在 React 应用程序中使用 React Testing Library 的人员。

步骤 1：安装 Mirage

首先，确保你已将 Mirage 添加到项目中

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

步骤 2：定义你的服务器

定义共享服务器的常见位置是 src/server.js

// src/server.js
import { createServer, Model } from "miragejs"

export function makeServer({ environment = "test" } = {}) {
  let server = createServer({
    environment,

    models: {
      user: Model,
    },

    seeds(server) {
      server.create("user", { name: "Bob" })
      server.create("user", { name: "Alice" })
    },

    routes() {
      this.namespace = "api"

      this.get("/users", (schema) => {
        return schema.users.all()
      })
    },
  })

  return server
}

在使用 Create React App 构建的应用程序中，确保此文件位于 src/ 目录下，以便对它的更改会触发重建。

步骤 3：在测试中使用共享服务器

导入你的 makeServer 函数，并使用 beforeEach 和 afterEach 函数启动和关闭你的服务器。然后，使用你的测试来用数据填充 Mirage，或进行其他更改以将 Mirage 置于你需要的状态

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

let server

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

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

it("shows the users from our server", async () => {
  server.create("user", { name: "Luke" })
  server.create("user", { 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")
})

每个测试都会获得自己的独立 Mirage 服务器实例，你所做的任何状态或服务器修改都不会泄漏到其他测试中。

确保你的服务器使用 test 环境进行实例化。（在上面的示例 makeServer 函数中，我们将 environment 默认设置为 test。）

你现在可以继续编写测试，这些测试拥有自己的独立 Mirage 服务器实例，允许你根据每个测试的需求来修改它。

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

上一个

使用 React Testing Library 测试组件