整合與單元測試

雖然 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 模擬伺服器進行斷言的常見方法。

應用程式測試

斷言