Testing fetch con Cypress

Cuando usamos Cypress y se está usando fetch veremos que no somos capaces de esperar a la ejecución de esas llamadas. Este fallo ocurre porque Cypress no puede espiar a fetch y debemos eliminarlo en Cypress.

Deberemos eliminarlo en cada spec que creemos, cargando un polyfill que puede espiarse, y llamándolo en cada llamada a cy.visit

describe('Spec description', () => {
    let polyfill;

    before(() => {
        const polyfillUrl = 'https://unpkg.com/unfetch/dist/unfetch.umd.js';
        cy.request(polyfillUrl)
            .then((response) => {
                polyfill = response.body
            });
    });

    let deleteFetch = () => ({
        onBeforeLoad(win)
        {
            delete win.fetch;
            win.eval(polyfill);
            win.fetch = win.unfetch;
        }
    });

De esta forma podremos hacer nuestros tests preocupandonos exclusivamente de añadir la llamada a deleteFetch()

it('Test description', () => {
    cy.server();

    cy.route({
        method: 'get',
        url: API_DOMAIN + '/products'
    }).as('productList');

    cy.visit('/', deleteFetch());

    cy.wait('@productList');

    ...

});