工作流程提示

Mirage 的設計宗旨是能無縫整合到您的應用程式中，如果您遵循了其中一個快速入門指南，您的專案中可能已經有一個最小的設定。

一旦您熟悉了編寫 Mirage 程式碼，請遵循以下提示來優化您的開發人員體驗，並確保您和您的團隊能充分利用 Mirage。

在開發和測試之間集中和共享您的伺服器

雖然您可以使用 Mirage 直接在您的元件或測試檔案中建立一次性的伺服器，但通常最好集中您的模擬伺服器定義，以便您可以在開發和測試環境之間共享它。畢竟，在生產環境中，您的應用程式將會與一個實作單一 API 契約的單一伺服器對話！因此，使用單一伺服器定義可協助您在 Mirage 使用的任何地方維護一致的模擬 API 契約。

因此，如果您已經有一個您為了開發或測試而啟動的 Mirage 伺服器，請將它移到一個明確指出它將在開發環境和您的測試中使用的位置。

定義您的共享伺服器的常見位置是 src/server.js

└── src
    ├── App.js
    ├── App.test.js
    └── server.js

接下來，從您的 server.js 檔案中，匯出一個您可以用來啟動 Mirage 伺服器的函式

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

export function makeServer({ environment = 'test' }) {
  return createServer({
    environment,

    models: {
      movie: Model,
    },

    routes() {
      this.namespace = "api"

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

在這裡，我們定義了我們的 makeServer 函式，以接受帶有 environment 鍵的選項參數。test 環境會關閉 Mirage 的人工延遲，忽略任何初始的 seeds()，並停用主控台的記錄。由於您可能會在多個測試中導入 makeServer，但在開發中只有一個地方，因此將環境預設為 test 是一個合理的選擇。當然，您可以自訂此函式以採用對您的專案有意義的任何其他參數。

現在，您可以匯入此函式以在開發中啟動 Mirage。

例如，在 React 應用程式中，index.js 通常是「引導」檔案，因此您可以在那裡啟動 Mirage

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

makeServer({ environment: "development" })

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

現在，當您像平常一樣開發您的 React 應用程式時，Mirage 將會開始執行（npm run start）。

在您的生產環境中，您可能不希望 Mirage 執行（因為您的應用程式將需要發出真實的網路請求），因此您可能會得到類似這樣的結果

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

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

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

process.env.NODE_ENV 在設定中是一個常見的全域變數，它會公開您應用程式的建置環境，並且可以用於有條件地啟動 Mirage。

理想情況下，如果您不在生產環境中使用 Mirage，您應該確保 Mirage 的程式庫程式碼以及您的伺服器定義程式碼不會包含在您的生產套件中（除非您正在建置原型並希望啟用它）。如何達成這一點將取決於您的建置工具設定，但在許多情況下，加入像上面顯示的檢查將會自動從您的建置中刪除 Mirage。

您也可以在測試中使用您新的集中式伺服器定義。在測試中匯入您的 makeServer 函式，並在每次測試之前使用它來啟動 Mirage

// tests/home-test.js
import { startMirage } from "./mirage"

describe("homepage", function () {
  let server

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

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

  it("shows the movies", function () {
    server.createList("movie", 10)

    cy.visit("/")

    cy.get("li.movie").should("have.length", 10)
  })
})

Mirage 伺服器實例有一個 shutdown 方法，您需要在每次測試後呼叫它來清除您的環境。

請注意，即使您的測試使用了共用的伺服器定義，您仍然可以進行一次性的修改，以便測試您的應用程式在非典型情況下的行為。例如，如果您想測試您的應用程式如何回應 500 伺服器錯誤，您不需要變更全域的 Mirage 伺服器定義，而只需在測試中修改單個 API 路由即可。

// tests/home-test.js
import { startMirage } from "./mirage"
import { Response } from "miragejs"

describe("homepage", function () {
  let server

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

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

  it("shows an error if the server is down", function () {
    // Override the existing /movies route handler, just for this test
    server.get("/movies", () => new Response(500))

    cy.visit("/")

    cy.get("h1").should("contain", "Whoops! Our site is down.")
  })
})

因為您會在每個測試中關閉伺服器並啟動新的伺服器，所以這些修改只會應用於您進行修改的測試中。

現在，您有一個單一的地方可以定義和擴展您的 Mirage 伺服器，並且可以在測試中輕鬆使用它。