Cypress Spying on Vue components

Question

I'm trying to write an e2e test using Cypress on my Vue app. I want to test if request on form submit returns correct value. I know i need to use cy.spy. I also know I neet to spy on fetch method but I have no idea which object to tie it to.

From documantation:

The object that has the method to be wrapped.

Which for me would be the component I'm trying to test? I'm not sure if I'm interpreting this argument correctly. Can anyone explain?

EDIT: My guess is that I need to use methods? But if I try to import them into my test_spec.js I get Cannot find module...

user2571599 user2571599 · Accepted Answer · 2021-01-12T13:55:12

To spy over a response, you can use the route command instead of 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
        }
    });
});

Cypress Spying on Vue components

1 Answers