赛普拉斯不匹配路线答案

【问题标题】：Cypress not matching routes赛普拉斯不匹配路线
【发布时间】：2019-01-11 14:26:14
【问题描述】：

我正在尝试编写一个模拟慢速 API 的 cypress 测试，所以在阅读了一些文档后我想出了这个：

before(function() {
    cy.server({delay: 5000});
});

beforeEach(() => {
    cy.route({
        method: "GET",
        url: "**/api/**"
    });
    cy.visit("http://localhost:9000");
});

这应该会给API 的所有请求增加 5 秒的延迟，对吧？

我看到的问题是，即使有大量对*/api/* 的调用，它也不匹配任何请求。然而，cypress GUI 确实看到了路线......它只是不匹配。

这可能是什么原因？

【问题讨论】：

当您运行测试时，您应该会在 GUI 中看到实际路由，我通常所做的就是将该路由复制为匹配器并且它可以工作。
@munHunger 你解决过这个问题吗？

标签： testing mocking cypress

【解决方案1】：

如果你输入整个路由，就像它在 cypress 日志中出现的那样，你可能会发现它有效。

minimatch 似乎没有很好地实现前瞻 globbing。它在/ char 上很好地界定了界限，但在? 或# 上却不是很好，所以如果你试图容纳查询字符串，这可能是你遇到困难的地方。

您可以在控制台中使用Cypress.minimatch 来查看发生了什么。有关如何执行此操作的更多信息in the docs。

赛普拉斯也接受正则表达式。像/\/api\// 这样的东西应该适合你。

【讨论】：

我同意你的观点，它应该可以工作，但由于某种原因它不能。我已经尝试过使用正则表达式和添加绝对 URL，但没有任何效果
你能提供一个你试图匹配的 URL 的例子吗？

【解决方案2】：

对我来说，我的模式对于我的 POST 请求是正确的，但问题是我没有覆盖默认响应。我只是希望 API 会返回 500 错误，但除非我指定响应，否则它会调用真正的 API 端点。文档说默认响应是一个空对象，但由于某种原因，除非我提供一个值，否则它会通过调用。一旦我提供了响应，赛普拉斯 GUI 就会显示它正在正确地停止调用。

更改自：

cy.route({
    method: "POST",
    url: /my-endpoint/,
    status: 500,
});

到

cy.route({
    method: "POST",
    url: /my-endpoint/,
    response: {},
    status: 500,
});

对我有用。

【讨论】：

很高兴找到格雷格。奇怪的是，我得出了类似的结论，但我试图弄清楚如何返回一个空的正文内容，因为只返回一个空字符串似乎与不指定响应具有相同的行为。似乎某处必须有一个虚假的检查。
此文档页面直接说明了此行为。 “如果您不传递对路由的响应，赛普拉斯将通过请求而不进行存根。我们仍然可以等待请求稍后解决。” docs.w3cub.com/cypress/api/commands/route.html
看来我用虚假值描述的问题仍然导致路由被忽略已在 v4.11.0 中为可能遇到相同问题的任何其他人解决。

【解决方案3】：

您是直接提出 XHR 请求，还是使用fetch？ Cypress 网络存根/模拟仅适用于实际的 XHR 请求（获取是它自己的请求类型）。

有一个open issue（3 岁以上）关于这个，并且埋在里面有一个很好的链接到一些solutions，包括下面这个，它非常有效。

编辑：或者，您可以将 axios 用于您的 HTTP 请求，它发送实际的 XHR 请求而不是 fetch 请求，因此不需要赛普拉斯配置。我认为生成的代码也更干净。

  let polyfill;

  // grab fetch polyfill from remote URL, could be also from a local package
  before(() => {
    const polyfillUrl = 'https://unpkg.com/unfetch/dist/unfetch.umd.js'
    cy.request(polyfillUrl)
      .then((response) => {
        polyfill = response.body
      })
  })

  beforeEach(() => {
    cy.visit('/', {
      onBeforeLoad (win) {
        delete win.fetch
        // since the application code does not ship with a polyfill
        // load a polyfilled "fetch" from the test
        win.eval(polyfill)
        win.fetch = win.unfetch
      },
    })
  });

【讨论】：

不知道为什么这被否决了。对于我们这些不知道 Cypress 不模拟原生 fetch（仅限 XHR）的人来说，这个小帮手真是神来之笔！

【解决方案4】：

我假设你的匹配器不工作并且你的请求没有说 (XHR STUB)

如果您使用的是 GUI，您应该会看到如下所示的请求

(XHR) GET 200 /YOUR_API/YOUR_ROUTE

复制那个 (/YOUR_API/YOUR_ROUTE) 并且它应该匹配

如果在你存根之后应该说 (XHR STUB)

【讨论】：