断言

一般来说，您的大多数测试可能都会断言您的应用程序 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 的各种类。