Cypress 是一个强大的端到端测试工具，它提供了丰富的测试功能和易于编写的测试脚本。在前端开发中，模拟 Fetch 请求是一个非常常见的需求。本文将介绍如何在 Cypress 中模拟 Fetch 请求，帮助您更好地进行前端开发和测试。
前置知识
在了解如何模拟 Fetch 请求之前，您需要熟悉以下知识点：
- Cypress 基础知识
- Fetch 请求的工作原理
- JavaScript 中的 Promise 和 async/await
模拟 Fetch 请求的方法
使用 cy.server() 和 cy.route()
Cypress 提供了 cy.server() 和 cy.route() 的 API，可以拦截和模拟 XMLHttpRequest 和 Fetch 请求。具体方法如下：
-- -------------------- ---- ------- -- -- ------- - ------ ----------- -- ---- --- - ----- -- --------------- -------------------------- -- -- ----- -- ----------------- -- ------------ ---------------------------- -- - -------------------------------------------------- ------- --
上述代码中，我们使用 cy.server() 启用了 Cypress 的 server，然后使用 cy.route() 监听了一个包含 /api/user URL 的 GET 请求，并给它起了一个名字 getUser。在测试中，我们通过 cy.visit() 发送了一个 Fetch 请求，等待该请求的返回，然后通过 cy.wait() 等待名为 getUser 的请求返回，并断言了返回结果的属性。
使用 cy.intercept()
Cypress 6.0 版本之后，推出了更加强大的 API cy.intercept()，其支持更多的请求类型，并提供了更多的配置选项。具体方法如下：
-- -------------------- ---- ------- -- ---- --- - ----- ------- ------------------------- - -------- ----------- ---------------- -- -- ----- -- ----------------- -- ------------ ---------------------------- -- - -------------------------------------------------- ------- --
上述代码中，我们使用 cy.intercept() 拦截了一个包含 /api/user URL 的 Fetch 请求，然后使用 { fixture: 'user.json' } 选项模拟了请求的响应，并给它起了一个名字 getUser。在测试中，我们通过 cy.visit() 发送了一个 Fetch 请求，等待名为 getUser 的请求返回，并断言了返回结果的属性。
模拟请求扩展
为了模拟特定的请求，您可以使用 cy.intercept() 提供的其他选项。下面是一些示例：
模拟请求失败
cy.intercept('/api/user', { statusCode: 404 }).as('getUser')这段代码会拦截 /api/user URL 的请求并模拟返回状态码为 404。
模拟请求超时
cy.intercept('/api/user', (req) => {
req.timeout = 1000
}).as('getUser')这段代码会拦截 /api/user URL 的请求并将其超时时间设置为 1 秒钟。
模拟请求重定向
cy.intercept('/api/user', (req) => {
req.redirect('https://example.com')
}).as('getUser')这段代码会拦截 /api/user URL 的请求并将其重定向到 https://example.com。
总结
本文介绍了在 Cypress 中模拟 Fetch 请求的两种方法，分别是使用 cy.server() 和 cy.route()，以及使用 cy.intercept()。无论您选择哪种方法，都可以帮助您更好地进行前端开发和测试。在实际应用中，您可以根据实际需求选择不同的配置选项，以达到您的测试目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ee7c39f6b2d6eab387b5df