斷言

一般來說，大多數測試可能會針對您的應用程式 UI 進行斷言。在訪問路由並與應用程式互動後，以及在 Mirage 處理任何請求之後，您將斷言您的 UI 處於您期望的狀態。

但有時即使 UI 看起來一致，您的應用程式也可能存在錯誤的網路請求。

為了處理這類問題，您可以在測試中針對 Mirage 伺服器的狀態進行斷言，與 UI 斷言並行。這將使您更有信心您的 JavaScript 應用程式正在將正確的資料發送到後端。

針對 Mirage 的資料庫進行斷言

斷言您的應用程式正在將正確資料發送到後端的最簡單方法是針對 Mirage 的資料庫進行斷言。如果正確的資料到達那裡，您將不僅確信來自您的 JavaScript 應用程式的 JSON 有效負載是正確的，而且您的 Mirage 路由處理器的行為也符合您的期望。

這是一個使用 Cypress 的範例

it("can change the movie title", function () {
  let movie = server.create("movie", { title: "Some movie" })

  cy.visit(`/movies/${movie.id}`)
    .contains("Edit")
    .click()
    .get("input.title")
    .type("Updated movie")
    .contains("Save")
    .click()

  // Assert against our app's UI
  cy.get("h1").should("contain", "Updated movie")

  // Also check that the data was "persisted" to our backend
  assert.equal(server.db.movies[0].title, "Updated movie")
})

這是提高您應用程式正在發送您期望資料信心的好方法。

針對 Mirage 模型進行斷言

針對 Mirage 的 ORM 模型進行斷言也很有用，以驗證模型關係的更新等內容

it("can add a tag to a post", function () {
  let programming = server.create("tag", { name: "Programming" })
  let post = server.create("post")

  cy.visit(`/posts/${post.id}/edit`)
    .get(".tags")
    .select("Programming")
    .contains("Save")
    .click()

  cy.get(".toast").should("contain", "Saved!")
  expect(post.reload().tagIds).to.include(programming.id)
})

Mirage 模型上的 reload 方法將使用自它們實例化以來任何新的資料庫資料重新水合它們，允許您驗證您的路由處理器邏輯是否如預期工作。

針對模型進行斷言基本上是驗證 Mirage 資料庫資料是否正確的另一種方法。

針對已處理的請求和響應進行斷言

您也可以針對在測試期間發出的實際 HTTP 請求和響應進行斷言。

為此，請使用 trackRequests 組態選項啟用 Mirage 的請求追蹤功能

createServer({
  trackRequests: true,
})

預設情況下，請求追蹤是停用的，以避免在長時間開發過程中出現記憶體問題。

現在 Mirage 將追蹤每個請求（以及關聯的響應），並透過 server.pretender.handledRequests 提供給您。這樣您就可以在測試結束時針對該陣列中的請求進行斷言。

it("can filter the table", function () {
  server.createList("movie", 5, { genre: "Sci-Fi" })
  server.createList("movie", 3, { genre: "Drama" })

  cy.visit("/").get(".tags").select("Sci-Fi")

  // Assert against our app's UI
  cy.get("tr.movie").should("have.length", 5)

  // Also assert against the HTTP request count & query
  let requests = server.pretender.handledRequests
  expect(requests).to.have.lengthOf(1)
  expect(requests[0].queryParams).to.deep.equal({ "filter[genre]": "Sci-Fi" })
})

一般來說，我們建議針對 Mirage 的資料庫和您的 UI 進行斷言，因為您的應用程式 HTTP 請求的具體細節應被視為您實際有興趣驗證的行為的實作細節。但當然有充分的理由可以深入了解並針對 HTTP 資料進行斷言。

有了這些，您就完成了指南的主要部分！繼續閱讀以查看一些進階用例和組態選項，或前往 API 文件以了解有關 Mirage 各種類別的更多資訊。

整合與單元測試

GraphQL