使用 cypress 存根网络请求

Question

我正在尝试在使用 cypress 编写的一些 UI 测试中模拟服务器。我可能犯了一些基本错误，并且可能不了解赛普拉斯如何存根请求。这是我直接从 expressjs 复制的示例应用程序 -

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello from /'));
app.get('/user', (req, res) => res.send('Hello from /user'));

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

然后用cypress写了一个简单的测试——

describe('Stubbed request', () => {
  it('sends whatever response you want', () => {
    cy.visit('http://localhost:3000/');
    cy.server();
    cy.route({
      method: 'GET',
      url: '/user',
      response: [],
    }).as('bar');

    cy.visit('http://localhost:3000/user'); // cy.request() has same behavior
    cy.wait('@bar');
  })
})

我希望得到的不是“来自用户/的你好”，而是得到一个空的响应，因为我已经用 cypress 将它存根了。甚至 cy.wait 也失败并显示消息 -“CypressError：重试超时：cy.wait() 超时等待 5000 毫秒，等待对路由的第一个请求：'bar'。没有发生任何请求。”我显然做错了什么。有人可以帮我理解我做错了什么吗？提前致谢。

Answer 1

您只能存根/监视在您的应用中创建的 XHR 请求。 cy.visit 永远不会提出这样的 xhr 请求。您也不能存根使用cy.request 发出的请求，因为此请求旨在独立于所有活动的网络存根工作。 这意味着，您可以存根 /users，但在您的测试中，您可以使用 cy.request 向该路由发出真正的请求。

在您的情况下，您必须使用 express 交付静态 html 网站，例如包含一个按钮。单击按钮后，您可以执行例如$.get(' /user')。然后这个请求将被存根。

目前我不在家，所以我无法提供可运行的示例。但是有了上面的提示，你应该能够做到这一点。如果您需要进一步的帮助，请告诉我。

你也可以看看cypress XHR API call validation in test cases。在这里，我提供了一个可运行的示例 fir stubbing 和 spying。