赛普拉斯存根似乎产生来自实际服务器的响应

Cypress stubbing seems to yield response from actual server

在现有项目中试用 Cypress,我遇到了对路由响应存根的问题。此文档文章中解释了该概念:https://docs.cypress.io/api/commands/route.html#Without-Stubbing

这是一个最小的非工作示例。我正在尝试获取一个空对象作为响应主体:

describe('The new event page', () => {

  it('responds with the stub', () => {
    cy.server();
    cy.route('/dummypath', {});
    cy.request('GET', '/dummypath');
  });

});

存根路由清楚地显示在 GUI 中:

但响应是 404:

...正文如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /dummypath</pre>
</body>

我认为 404 响应是由我的实际服务器而不是 cy.server() 发送的。实际服务器是 localhost:3000 上的 运行,我在我的 cypress.json 文件中将其指定为 baseUrl

有人见过类似的东西吗?我是否忽略了代码中的任何明显错误?

PS: 当我将端口号更改为其他某个未使用的端口时,错误会变为网络错误(这可能是预料之中的)。

 CypressError: cy.request() failed trying to load:

http://localhost:3002/dummypath

We attempted to make an http request to this URL but the request failed without a response.

We received this error at the network level:

  > Error: connect ECONNREFUSED 127.0.0.1:3002

-----------------------------------------------------------

The request we sent was:

Method: GET
URL: http://localhost:3002/dummypath

-----------------------------------------------------------

Common situations why this would fail:
  - you don't have internet access
  - you forgot to run / boot your web server
  - your web server isn't accessible
  - you have weird network configuration settings on your computer

cy.request() 向指定的 url 发出实际的 HTTP 请求。在您不想加载实际应用程序的情况下应该使用此命令。例如,您可能想检查服务器上的端点。

cy.route() 用于处理在您正在测试的应用程序中发出的 HTTP 请求。

如果您想对正在 在您的被测应用程序 中发出的 HTTP 请求的响应存根,您可能希望结合使用 cy.route().wait()。例如,为了确保当我们访问我们的应用程序时,我们的应用程序向 /dummypath 发出 GET 请求,并且对该请求的响应是我们存根的 {},我们会写:

describe('The new event page', () => {

  it('responds with the stub', () => {
    cy.server();
    cy.route('/dummypath', {}).as('getDummy');
    cy.visit('http://localhost:3002');         // the url to visit in your app
    cy.wait('@getDummy').its('responseBody')
      .should('be.an', 'object')
      .and('be.empty');
  });

});