Cypress XHR 被存根但立即中止

Question

我有一个与 API 网关连接的 React 应用程序 (CRA)。它检查API，如果有公告，则显示该组件。

我的 Cypress 测试正在尝试拦截页面 API 调用并将其替换为固定装置，因此它始终为 true，然后我将检查该组件是否在 DOM 中：

it.only('Show component if there is an announcement', () => {
    cy.server();
    cy.route(
      'GET',
      'THIS_IS_THE_API',
      'fixture:announcement.json',
    );
  });

而且夹具超级简单：

{
  "title": "Heading 2",
  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
}

页面上调用 API 的函数是 Axios async/await 调用。 Axios 是在 XHR 之上制作的，因此不兼容不应该成为问题。

当我运行测试时，XHR 在尝试执行任何操作之前立即中止。测试结果表明请求已被存根：

服务器端的 CORS 设置尚未设置，因此我使用的是 Chrome，并且为 DEV 禁用了安全性，但即使在普通浏览器上，在 CORS 错误之前仍然需要一段时间，即使如此，调用也不会正在流产。

测试似乎被某些东西阻止了运行，但我读过和尝试过的所有内容都表明我做得很好。我找不到任何教程或任何不同的教程！

Answer 1

聚会迟到但您的电话没有被拦截：

这意味着拦截了 0 个请求，否则您会看到一个数字等于被拦截的请求数。

会检查 api 的 url 以确保其匹配。