spy on win.console.error not working from beforeEach in cypress/support/index.js

[benrobot]

The call to cy.spy() on win.console.error not working from beforeEach in cypress/support/index.js

Current behavior:

A spy wrapped onto win.console.error does NOT observe a call from my app to console.error().

Desired behavior:

I intended for any call to console.error("something went wrong") within my app to cause the cypress test to capture it with the spy.

Steps to reproduce: (app code and test code)

My bad, I didn't know about the cypress-test-tiny repo until I started filling out this issue. Here's the steps to reproduce:

1. Run command git clone --single-branch --branch spying_on_win_console_error https://github.com/benrobot/cypress-example-kitchensink.git
2. Prepare to run (e.g. npm install, npm start, and npm run cy:open)
3. Run the test under spy_games/the_spy_who_had_nothing.spec.js

Versions

Cypress 3.4.0
Windows 10
Chrome 75

[jennifer-shehane]

This is because you are trying to spy on window before cy.visit() - there is no window in existence to spy on at that time.

Put the cy.visit() in the beforeEach before cy.window()

beforeEach(() => {
  cy.visit('http://localhost:8080/commands/spies-stubs-clocks')
  cy.window().then((win) => {
    cy.wrap(cy.spy(win.console, 'error')).as('spyWinConsoleError')
    cy.wrap(cy.spy(win.console, 'warn')).as('spyWinConsoleWarn')
  })
})

Please in the future try asking these types of questions in our community chat first, it can be helpful for debugging or answering questions on how to use Cypress.

[benrobot]

Thank you for the quick response.

I did post this question on the community chat before posting it here as an issue but I did not get a response:
https://gitter.im/cypress-io/cypress/archives/2019/07/21?at=5d350e1bf9af9a44ed6a5eeb

[nils-hoyer]

hey ben, maybe this module fits your needs: https://www.npmjs.com/package/cypress-fail-on-console-error

[borecz]

@jennifer-shehane @bahmutov

I am having an issue building a simple test that detects JS errors on a page.

I followed your suggestions above but, this simple tests won't work:

describe('Smoke - detect JS errors', () => {
  beforeEach(() => {
    cy.visit('/');
    cy.window().then(win => {
      cy.wrap(cy.spy(win.console, 'error')).as('spyWinConsoleError');
      cy.wrap(cy.spy(win.console, 'warn')).as('spyWinConsoleWarn');
    });
  });

  it('should spy window.confirm', () => {
    console.error('questo e errore');
    cy.get('@spyWinConsoleError').should('be.calledOnce');
  });
});

Can you please advise on this matter? Is it the best way how to create a smoke test for detection of errors in console?

[jennifer-shehane]

@borecz I think in your case the console.error is being called before the spy is setup. The example below works because the spy is set up onBeforeLoad of the visit.

it('should spy window.error', () => {
  cy.visit('index.html', {
    onBeforeLoad(win) {
      cy.spy(win.console, 'error').as('spyWinConsoleError');
      cy.spy(win.console, 'warn').as('spyWinConsoleWarn');
    },
  })
  console.error('questo e errore')
  cy.get('@spyWinConsoleError').should('be.calledOnce');
});

[borecz]

Hi @jennifer-shehane @bahmutov ,

thank you for your kind reply, unfortunately I was not able to replicate it successfully on my side, please have a look at this tiny repo.

here is the repo:

cypress-test-tiny.zip

[borecz]

@jennifer-shehane could you please the repo you used for the screenshot? Updating the url not to a local file also would help. Please check the repo I shared above, it uses your very same script but apparently there are many cases where this won't work. I could not make it work once to be honest.

[borecz]

Hi all, this perfectly answers the raised points:

https://stackoverflow.com/a/66180436/2254131

[bahmutov]

Spying on console methods is described in two recipes here https://github.com/cypress-io/cypress-example-recipes#stubbing-and-spying