前端应用中的数据请求已成为日常工作中必不可少的一部分。但在测试时，我们往往在真实数据与测试数据之间进行选择。在某些情况下，我们想要对请求返回的数据进行 Mock，并在 Cypress 测试中使用它们。Cypress 使 Mock 数据处理非常方便，本文将深入讲解如何在 Cypress 测试中进行 Mock 数据处理。
什么是 Mock 数据？
Mock 数据是指测试用例中的假数据。当我们将测试用例与真实环境分开时，就需要 Mock 数据来代替真实环境中的数据。这样可以避免依赖外部资源，减少测试所需的时间和复杂性，并使我们更加专注于测试。在前端应用中，常常用于模拟 Web API 的返回数据。
Cypress 中的 Mock 数据
Cypress 具有内置的 Mock 数据功能，可以通过 cy.route() 和 cy.intercept() 命令轻松地模拟 Web API 返回数据。这些命令可以帮助我们定义一个 Mock 数据，然后使其作为一个虚拟的 Web API 响应来对待。我们可以使用不同的数据来创建多个不同的 Mock API 响应。
cy.route()
cy.route() 命令提供了模拟 HTTP 请求-响应交换机制的能力。它允许我们捕获与请求匹配的 URL 和请求，并返回一个我们指定的 JSON 响应。我们可以使用 cy.route() 定义一个 Mock API，如下所示：
cy.route('GET', '/todos', [
{ id: 1, text: 'Buy milk', done: false },
{ id: 2, text: 'Feed cat', done: true },
{ id: 3, text: 'Write article', done: false },
]).as('getTodos');当我们调用以上代码时，cy.route() 会将所有的来自 /todos 的 GET 请求拦截，然后向我们指定的 JSON 响应进行匹配，并在调用 cy.wait('@getTodos') 时返回。通过调用 cy.wait() 命令，我们可以等待 Mock 请求完成，并检查我们的应用程序是否使用了正确的 API 来获取正确的数据。
cy.intercept()
如果我们使用的是 Cypress 6.0 及更高版本，则建议使用 cy.intercept()。它是 Cypress 的新 API，包含了所有 cy.route() 的功能，并增加了一些新的特性和功能。cy.intercept() 并不仅限于通过路由捕捉请求和响应，它提供了更好的操作性和控制性。
cy.intercept('GET', '/todos', (req) => {
req.reply([
{ id: 1, text: 'Buy milk', done: false },
{ id: 2, text: 'Feed cat', done: true },
{ id: 3, text: 'Write article', done: false },
]);
}).as('getTodos');通过 cy.intercept()，我们可以更容易地控制捕获请求，根据请求来选择当前响应，使用 cy.request() 请求 URL，以便使我们能够 Mock 数据，同时管理更多的应用程序状态。
提示：使用 cy.intercept() 更安全，更可靠，更易于使用。
Mock 数据的桩
Mock 桩是用于设置返回的数据 (或错误) 响应的一组规则、预期和行为的集合。在 Cypress 中，Mock 桩是由请求和响应的路由定义的。我们可以创建 Mock 桩来表示预期的请求，并且可以根据需要使用它们。
例如，考虑下面一个懒加载列表的应用程序。当用户滚动到列表的底部时，应用程序会向 API 发送一个 GET 请求，并使用得到的数据更新列表。我们可以使用以下代码来定制 Mock 数据：
-- -------------------- ---- -------
-------------- ------- ------ -- -- -
------------- -- -
------------------- ------------- ----- -- -
--------------- -- -
----------
------ -- --- -- ----- ------- -- - --- -- ----- ------- ---
------------- -----
---
---
------------------
--------------
---
--------- ---- -- -------- -- -- -
-----------------------------------
-------------------------------------------- ------------------ -----
--------------------------------- ---------
--------------------------------- ---------
---
---在此示例中，我们使用 cy.intercept() 定义了 Mock API，并在调用 cy.wait() 命令时使用了 alias。然后，我们向下滚动到列表的底部，并检查我们的应用程序是否使用正确的 API 路径来获取正确的数据。
最佳实践
在使用 Mock 数据时，我们应该注意以下几点：
在测试用例中实现 Mock。不要在应用程序中使用 Mock 数据进行单元测试，因为这样可能会导致您的测试过于发散，难以维护，并且无法发现潜在的问题。
限制 Mock 数据的范围。每个测试应仅 Mock 所需的 Web API。例如，如果您 Notion 页面中的一个组件需要向 Notion API 发送 POST 请求，则您应仅为该组件定义一个 Mock API。
使用 Mock 数据进行测试。在测试之前，生成 Mock 数据，然后使用它们进行测试。这可以确保测试稳定性和无状态性。
结论
借助 Cypress，我们在应用程序的测试中很容易使用 Mock 数据。我们可以使用 cy.route() 和 cy.intercept() 创建 Mock API，并使用它们来代替真实 API，从而避免测试过程中的意外情况。最后，我们需要遵循最佳实践并注意 Mock 数据的使用。这可以确保我们的测试用例稳定且容易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672050b82e7021665e01ab51