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

Question

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

问题：

我在 beforeEach:

中定义了路由和别名

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

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

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

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

我做错了什么？

Answer 1

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

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

Answer 2

有关信息，我在我的搜索模式（在 Vue 应用程序中）上试用了它，它工作正常。

我做了什么：

cy.server()

cy.route('GET', 'test-get-in-modal.txt', []).as('testGetInModal')

我能看到的唯一区别是我 cy.visit() cy.server() 之前的页面，这不是记录的模式，但在这种情况下似乎没问题。

Answer 3

我找到了造成这种行为的原因。问题不在模态 window 本身，而是执行第二个请求的代码在另一个请求的 promise 回调中被调用。类似于：

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

并且 loadView 函数执行了第二次获取。

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

Why stub in cypress may not work for route called after page was loaded