Cypress XHR 被存根但立即中止

Question

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

我的 Cypress 测试正在尝试拦截页面 API 调用并将其替换为固定装置，因此它始终为真，然后我将检查该组件是否在 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 以确保其匹配。