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

Question

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

问题：

我在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

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

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

loadView函数执行了第二次提取。

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

Answer 3

有关信息，我在搜索模式(在Vue应用程序中(上试用了它，它运行良好。

我做了什么：

• 在应用程序的静态文件夹中创建了一个名为test-get-in-modal.txt的伪文件

• 在模态代码中添加了一个http.get('test-get-in-modal.txt')，因此它只在模态打开后运行

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

• 在it()中添加了继之后的cy.wait('@testGetInModal')

• 更改为cy.route('GET', 'not-the-file-you-are-looking-for.txt'...，如预期那样失败

---

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