使用 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 測試元件