Cypress 是一个流行的前端自动化测试框架，它提供了一系列的 API 来模拟用户的行为和操作，以及对应用程序进行测试。其中，cy.route() API 可以用来模拟网络请求，并返回指定的响应数据。但是，在使用 cy.route() API 时，有时候会遇到 “cy.route() did not stub the XHR” 错误。本文将详细介绍这个错误的原因和解决方法。
错误原因
在使用 cy.route() API 进行网络请求模拟时，如果没有正确设置请求的 URL 和响应数据，就会导致这个错误的出现。具体来说，就是当 Cypress 发送请求时，没有找到匹配的 URL，就会出现 “cy.route() did not stub the XHR” 错误。
解决方法
为了避免这个错误的出现，我们需要正确设置 cy.route() API 的参数。下面是一个示例代码：
// javascriptcn.com 代码示例
describe('Test the login page', () => {
beforeEach(() => {
cy.server()
cy.route('POST', '/login', { success: true })
cy.visit('/login')
})
it('should display the login page', () => {
cy.get('h1').should('contain', 'Login')
})
it('should be able to login', () => {
cy.get('#username').type('testuser')
cy.get('#password').type('testpassword')
cy.get('#login-button').click()
cy.url().should('include', '/dashboard')
})
})在这个示例代码中，我们使用了 cy.server() API 来启动一个虚拟的服务器，然后使用 cy.route() API 来模拟一个 POST 请求，并返回一个成功的响应。在访问登录页面之前，我们先设置好了网络请求的模拟。这样，在登录页面中进行登录操作时，就会发送一个 POST 请求，并返回一个成功的响应。最后，我们使用 cy.url() API 来检查是否跳转到了仪表板页面。
需要注意的是，URL 的匹配是基于前缀的。例如，如果我们设置的 URL 是 /login，那么当发送的请求 URL 是 /login/submit 时，也会被匹配到。如果我们想要精确匹配，可以使用正则表达式。
cy.route({
method: 'POST',
url: /\/api\/login/,
response: { success: true },
})在这个示例代码中，我们使用了正则表达式来匹配请求的 URL。这样，只有当请求的 URL 是 /api/login 时，才会被匹配到。
总结
在 Cypress 测试中，cy.route() API 可以用来模拟网络请求，并返回指定的响应数据。但是，在使用 cy.route() API 时，如果没有正确设置请求的 URL 和响应数据，就会出现 “cy.route() did not stub the XHR” 错误。为了避免这个错误的出现，我们需要正确设置 cy.route() API 的参数。在设置 URL 时，需要注意 URL 的匹配是基于前缀的，如果需要精确匹配，可以使用正则表达式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656585bad2f5e1655dec19e0