針對共享的 Mirage 伺服器開發 React 應用程式

當您準備好集中您的 Mirage 伺服器並在開發和測試之間共享它時，請按照下列步驟操作。

步驟 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/ 目錄下，以便對其進行的變更會觸發重新建置。

我們新增到函式簽章中的 environment 引數只是一種慣例。我們將其預設為 test，因為在大多數應用程式中，您會在開發模式下呼叫 makeServer 一次，但在 test 中多次呼叫（在您的各種測試檔案中）。

您可以自由地將簽章變更為您喜歡的任何內容。

步驟 3：在開發環境中啟動伺服器

開啟您的 React 應用程式的啟動檔案（在 Create React App 中為 src/index.js），匯入您的 makeServer 函式，並在開發環境中呼叫它

// src/index.js
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { makeServer } from "./server"

if (process.env.NODE_ENV === "development") {
  makeServer({ environment: "development" })
}

ReactDOM.render(<App />, document.getElementById("root"))

我們在這裡使用 process.env.NODE_ENV 環境變數，這是許多 React 應用程式環境中可用的常見全域變數。條件允許在生產環境中將 Mirage 進行 tree-shaken，因此它不會影響您的生產套件。

此外，請注意，我們在此處傳入 { environment: "development" }，以便 Mirage 的 seeds() 載入，並且有一些模擬延遲來幫助您在開發期間使用。

就是這樣！有了這段程式碼，每當您應用程式中的任何元件在開發時發出網路請求，Mirage 就會攔截該請求，並使用您伺服器定義中的資料做出回應。

現在，當您繼續在 React 應用程式上進行本機開發時，您可以有一個中心位置來定義和更新您的 Mirage 伺服器。

開發元件

使用 React Testing Library 測試元件