Cypress Error "Attempted to wrap warn which is already wrapped"-CodePudding

End goal: Test for warnings and errors on the console using Cypress and Typescript.

Current Error Message: Attempted to wrap warn which is already wrapped.

Code:

  describe.only("Unauthenticated User", () => {
    it("No Console Errors for /", () => {
      cy.visit("/", { 
        onBeforeLoad(win) { cy.spy(win.console, 'error').as('onBeforeLoadSpyWinConsoleError') },
        onl oad(win) { cy.spy(win.console, 'error').as('onLoadSpyWinConsoleError') } 
      });
      cy.get('@onBeforeLoadSpyWinConsoleError').should('have.callCount', 0); 
      cy.get('@onLoadSpyWinConsoleError').should('have.callCount', 0); 
    });
    it("No Console Warns for /", () => {
      cy.visit("/", { 
        onBeforeLoad(win) { cy.spy(win.console, 'warn').as('onBeforeLoadSpyWinConsoleWarn') },
        onl oad(win) { cy.spy(win.console, 'warn').as('onLoadSpyWinConsoleWarn') } 
      });
      cy.get('@onBeforeLoadSpyWinConsoleWarn').should('have.callCount', 0); 
      cy.get('@onLoadSpyWinConsoleWarn').should('have.callCount', 0); 
    });
  });

Could someone please offer not only a solution to fix the error, but also some suggestions to remove the code duplication? Any documentation would be great to understand the error more in depth.

CodePudding user response：

onBeforeLoad | function | Called before your page has loaded all of its resources.

onLoad | function | Called once your page has fired its load event.

https://docs.cypress.io/api/commands/visit

My best guess is that you don't need to onBeforeLoad() and onLoad(), as these are in reference to when Cypress does something, and not the webpage doing something. As in, what does Cypress do before your page is loaded, or what does Cypress do when your page is loading. So by instantiating the same cy.spy() during onBeforeLoad() and onLoad(), you're trying to do the same thing twice. My assumption is that the cy.spy() to look for errors is already instantiated, and would catch any errors logged, whether they appear before the application is loaded or after.

CodePudding user response：

I refactored the code and only offered onBeforeLoad() as a means to look for console errors and warnings.

I wrote this function:

function checkConsole(page: string, type: keyof Console){
  cy.visit(page, { onBeforeLoad(win) { cy.spy(win.console, type).as(type) }});
  cy.get(`@${type}`).should('have.callCount', 0); 
}

And passed it into my tests like so:

  describe("Unauthenticated User", () => {
    it("No Console Errors for /", () => checkConsole("/", "error"));
    it("No Console Warns for /", () => checkConsole("/", "warn"));
  });

This destructured the code enough, but not too much so others will not understand.

CodePudding user response：

Spys are "listeners" and will persist throughout the test. You should be fine with beforeLoad only

  describe.only("Unauthenticated User", () => {
    it("No Console Errors for /", () => {
      cy.visit("/", { 
        onBeforeLoad(win) { cy.spy(win.console, 'error').as('onBeforeLoadSpyWinConsoleError') },
      });
      cy.get('@onBeforeLoadSpyWinConsoleError').should('have.callCount', 0); 
    });
    it("No Console Warns for /", () => {
      cy.visit("/", { 
        onBeforeLoad(win) { cy.spy(win.console, 'warn').as('onBeforeLoadSpyWinConsoleWarn') },
      });
      cy.get('@onBeforeLoadSpyWinConsoleWarn').should('have.callCount', 0); 
    });
  });