为什么cypress中的stub对于页面加载后调用的路由可能不起作用

Question

我正在使用cypress编写测试，但是有一个问题并非在每个测试中都出现。在某些情况下，它可以工作，我不知道为什么。所以...

问题：

我在beforeEach中定义了一条路由和别名：

beforeEach(function () {
  cy.server()
  cy.route('GET', '/favourites?funcName=columnPreset', []).as('columnPresetEmpty')
  cy.visit('#/search')
})

如果在页面加载时发生http请求，则Stub可以正常工作。 但是，如果我执行对点击事件的响应请求（模式对话框打开并执行http请求），它只会出现在未被误解的命令中，并且紧随cy.wait('@columnPresetEmpty')之后，请求超时。

 it('does not work', function () {
   cy.get('[data-test=button-gridSettings]').click()
   cy.wait('@columnPresetEmpty')
 })

同时，在其他测试中，我具有几乎相似的功能，只需单击按钮即可执行请求，而无需打开新的模态窗口。这是唯一的区别。

我在做什么错了？

Answer 1

问题可能是赛普拉斯无法完全处理fetch呼叫。您可以通过以下方式禁用它，但请确保已获取polyfill。然后，这将发出赛普拉斯可以观察到的XHR请求。

cy.visit('#/search', {
    onBeforeLoad: (win) => {
        win.fetch = null
    }
})

在此处阅读更多内容： https://github.com/cypress-io/cypress/issues/95#issuecomment-281273126

Answer 2

有关信息，我在搜索模式（在Vue应用程序中）上进行了尝试，效果很好。

我做了什么：

• 在应用程序的静态文件夹

中创建了一个名为 test-get-in-modal.txt 的虚拟文件。

• 在模式代码内添加了class MyConfig extends ArcRendererConfig { var stroke; MyConfig() : this.stroke = StyleFactory.style.black; } ，因此它仅在模式打开后运行

规范中的

• 在http.get('test-get-in-modal.txt')中做了cy.server()，cy.route('GET', 'test-get-in-modal.txt', []).as('testGetInModal')

在before()中

• 添加了it()，成功了

• 已更改为cy.wait('@testGetInModal')，但失败了

---

我能看到的唯一区别是，我cy.route('GET', 'not-the-file-you-are-looking-for.txt'...位于cy.visit()之前的页面，这不是文档记录的模式，但在这种情况下似乎还可以。

Answer 3

我找到了导致这种行为的原因。问题不在于模态窗口本身，而是在第二个请求的promise的回调中调用了执行第二个请求的代码。像这样：

fetch('/initData')
  .then(loadView)

然后loadView函数执行第二次提取。

因此，当我从promise的回调中删除loadView时，两个请求对于cypress都是可见的。