Cypress 監視 Vue 組件

Question

我正在嘗試在我的 Vue 應用程序上使用 Cypress 編寫一個 e2e 測試。 我想測試表單提交的請求是否返回正確的值。 我知道我需要使用cy.spy 。 我也知道我需要監視fetch方法，但我不知道要綁定哪個 object。

從文檔：

有包裝方法的object 。

對我來說，哪個是我要測試的組件？ 我不確定我是否正確解釋了這個論點。 誰能解釋一下？

編輯：我的猜測是我需要使用methods ？ 但是，如果我嘗試將它們導入到我的test_spec.js ，我會得到Cannot find module...

Answer 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
        }
    });
});