Cypress 监视 Vue 组件答案

【问题标题】：Cypress Spying on Vue componentsCypress 监视 Vue 组件
【发布时间】：2020-06-24 12:56:55
【问题描述】：

我正在尝试在我的 Vue 应用程序上使用 Cypress 编写一个 e2e 测试。我想测试表单提交的请求是否返回正确的值。我知道我需要使用cy.spy。我也知道我需要监视 fetch 方法，但我不知道要将它绑定到哪个对象。

来自文档：

具有要包装的方法的object。

对我来说，我要测试的组件是哪一个？我不确定我是否正确解释了这个论点。谁能解释一下？

编辑：我的猜测是我需要使用methods？但如果我尝试将它们导入我的test_spec.js，我会得到Cannot find module...

【问题讨论】：

标签： vue.js cypress e2e-testing

【解决方案1】：

要监视响应，您可以使用 route 命令而不是 spy。 https://docs.cypress.io/api/commands/route.html

it('Example Test', function () {
    cy.visit('https://stackoverflow.com/');
    cy.server(); // cy.server needs to be invoked first in order to use cy.route command
    cy.route({
        url: `**/your/request/path/**`,
        method: 'POST',
        onResponse: (xhr) => {
            console.log(xhr);
            // here you can assert on xhr.response.body values
        }
    });
});

【讨论】：

如果你想用cy.route()捕捉fetch，你需要打开Experimental Fetch Polyfill，假设你使用的是旧版本的赛普拉斯。最新版本更改为cy.intercept()。