Stub module imports in Cypress

visit-with-stubs.js

// cypress/support/commands.js
// ...
Cypress.Commands.add('visitWithStubs', (url, stubs) => {
  if (!stubs) return cy.visit(url);
  cy.visit(url, {
    onBeforeLoad(win) {
      Object.entries(stubs).forEach(([name, stubFunction]) => {
        let target = undefined;
        // attach getters and setters for this name on window
        Object.defineProperty(win, name, {
          // on set, stub the object
          set: (object) => {
            target = object;
            stubFunction(target);
          },
          // on get, return the stubbed object
          get: () => target,
        });
      });
    },
  });
});


//
// usage:
//

// in your code, expose the import on window
import ImportedThing from 'expensive-module';
window.ImportedThing = ImportedThing
const result = ImportedThing.expensiveFunction()

// in your test, stub the function
describe('visitWithStubs', () => {
  it('lets you stub stuff', () => {
    cy.visitWithStubs('/path/to/somewhere', {
      ImportedThing: (ImportedThing) => {
        cy.stub(ImportedThing, 'expensiveFunction').returns(mockResult).as('stubbedFunction');
      },
    });
    cy.get('@stubbedFunction').should('have.been.called').and('have.returned', mockResult);
  });
});