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

Question

我正在使用 cypress 编写测试，但有一个问题并没有出现在每个测试中。在某些情况下它有效，我不知道为什么。所以……

问题:

我在 beforeEach 中为它定义了一个路由和别名:

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

如果在页面加载时发生 http 请求， stub 可以正常工作。但是，如果我执行响应单击事件的请求(模态对话框打开并执行 http 请求)，它只会出现在未被标记为 stub 的命令中，并且遵循 cy.wait('@columnPresetEmpty') 失败并导致请求超时。

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

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

我做错了什么？

Answer 1

问题可能是 cypress 还不能完全处理 fetch 调用。你可以通过以下方式禁用它，但要确保你有 fetch polyfill。然后，这将发出 cypress 可以观察到的 XHR 请求。

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

阅读更多: https://github.com/cypress-io/cypress/issues/95#issuecomment-281273126