为什么需要 Mock 数据？
在前端开发中，我们常常需要进行接口测试。然而，有些接口可能需要调用外部的 API 或者访问数据库等资源，这会导致测试的不确定性和不可重复性。另外，如果这些接口的数据是动态的，那可能需要频繁的手动输入数据，这很费时费力，也容易出错。因此，使用 Mock 数据可以解决这些问题，保证测试的可重复性以及增加效率。
Cypress 中的 Mock 数据
Cypress 可以在测试中拦截 AJAX 调用，以便我们可以使用 Mock 数据来替代实际的请求。Cypress 提供了一些 API 来实现 Mock 数据，包括 cy.route()、cy.stub() 和 cy.intercept()。
使用 cy.route()
cy.route() 是 Cypress 中最古老和最简单的假数据方案。它允许我们捕获和重复异步网络请求来模拟服务器响应。以下是一个简单例子：
-- -------------------- ---- ------- ------------ ---------- ------- ------ ---- -------------------------------- --------- -- --- -------------------------------- ---------------------
这段代码将拦截 https://api.example.com/users 的 GET 请求，并返回一个空数组的响应。cy.wait() 是为了等待响应完成。这种方式对于简单的场景很有用，但对于多个请求的场景来说不太方便。
使用 cy.stub()
另一种方式是使用 cy.stub()，它可以让我们操作并拦截代码中不同函数的调用。以下是一个例子：
cy.stub(someObject, 'someMethod').returns({ foo: 'bar' });这段代码将拦截 someObject.someMethod() 方法的调用，并且将返回 { foo: 'bar' }。这种方式非常方便，但是在使用时需要注意，需要在测试代码中手动引入要拦截的对象和方法，这可能会产生重复的测试代码。
使用 cy.intercept()
cy.intercept() 是 Cypress 4.0 中的一个新特性，它可以帮助我们更好地管理假数据。 cy.intercept() 允许我们在测试开始之前或动态地创建和修改路由，为请求添加断言和定制响应。以下是一个简单示例：
cy.intercept('GET', 'https://api.example.com/users', {
statusCode: 200,
body: []
})
cy.visit('https://example.com')这段代码将拦截 https://api.example.com/users 的 GET 请求，并返回一个包含空数组的响应。通常，我们需要先定义这个拦截器，然后再进行实际的测试。
与 cy.route() 不同的是，cy.intercept() 支持全局配置和动态修改配置，因此它非常适合在测试过程中动态生成 Mock 数据。
示例代码
接下来，我们将以一个简单的例子展示如何使用 Mock 数据进行接口测试：
-- -------------------- ---- -------
---------------- -- -- -
---------- -- -- -
---------------------- - -------- ---- ---
-------------------
----------------------------------
-------------------------------------
----------------------------
-------------------------- --------------
---
---------- -- -- -
---------------------- - -------- ----- ---
-------------------
----------------------------------
-------------------------------------------
----------------------------
------------------------------------- --------
---
---我们在此处定义了两个测试：登录成功 和 登录失败。在每个测试中，我们都使用 cy.intercept() 设置了 /login 的 Mock 数据，并分别测试了登录成功和失败的场景。
结论
Mock 数据可以帮助我们更有效地测试前端代码。我们可以使用 Cypress 提供的不同方式来拦截网络请求并返回定制化的响应，从而避免测试中出现不确定性和依赖外部 API 或资源。cy.route() 可以用来处理简单的场景，cy.stub() 可以更好地管理测试代码的重复性，而 cy.intercept() 则可以提供更灵活的假数据方案。我们可以根据具体的测试需求来选择最合适的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee72c06fbf96019721df75