集成和单元测试

虽然 Mirage 最初是为验收测试而设计的，但它在编写集成和单元测试时也能很好地工作。

重用全局服务器

假设您有一个数据获取组件，您想编写一个测试来验证它的行为。

您可以使用上一指南中介绍的 startMirage 约定，并像在应用测试中一样，针对您的全局服务器定义测试您的组件

// UserTable.test.js
import UserTable from "./UserTable"
import { startMirage } from "./mirage"

let server

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

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

it("fetches the list of countries", async () => {
  server.createList("user", 5)

  const { getByTestId } = render(<UserTable />)

  await waitForElement(() => getByTestId("users"))

  expect(getByTestId("user-row")).toHaveLength(5)
})

创建一次性服务器

您也可以为仅用于测试组件目的创建新的独立 Mirage 服务器。这对于组件库或可重用的数据获取组件，甚至用于测试数据获取钩子非常有效

// useQuery.test.js
import { createServer, Model } from "miragejs"
import React from "react"
import { useQuery } from "./useQuery"

function Movies() {
  const { data } = useQuery("get", "/api/movies")

  return (
    <>
      <h1>Movies</h1>
      {data.movies.map((movie) => (
        <p key={movie.id} data-testid="movie">
          {movie.title}
        </p>
      ))}
    </>
  )
}

let server

beforeEach(() => {
  server = createServer({
    environment: "test",
    models: {
      movie: Model,
    },
    routes() {
      this.namespace = "api"

      this.resource("movie")
    },
  })
})

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

it("can fetch data", async () => {
  server.createList("movie", 5)

  const { getByTestId } = render(<Movies />)

  await findByText("Movies")

  expect(getAllByTestId("movie")).toHaveLength(5)
})

现在您知道如何测试任何依赖于网络的东西，从单个组件到整个应用程序！

接下来我们将讨论一些针对 Mirage 模拟服务器进行断言的常见方法。