Failing a Test on console.error in Cypress
Tags: javascript, testing, todayilearned
Published: 2021-01-12 15:02:03

*This post originally ran on my [personal website](https://www.lostcreekdesigns.co/writing/failing-a-test-on-console.error-in-cypress).*

We recently switched over to [Cypress](https://www.cypress.io/) for our end to end testing at my job. We were previously using a combination of Mocha and Puppeteer that made our tests so flakey to the point we just turned them off. This flake has totally disappeared and all things considered it was a relatively easy process to port all of our tests. If you have not had a chance to use Cypress I highly recommend checking it out.

As part of this process of porting tests over, I realized that Cypress was not failing our tests on `console.error` statements. There are two easy workarounds for this though: 1) add a small bit of logic to the `cypress/support/index.js` file or 2) the `cypress-fail-on-console-error` package. Both options are totally valid. We ended up opting for option 1 because it worked for us and meant we didn't have to add another dev dependency to our project.

## Method 1 - Update commands.js

The first method is to add the following logic to `cypress/support/index.js`. This solution was adapted from Ryan Yost's post, [Advanced Cypress Tips](https://www.ryanjyost.com/advanced-cypress-tips/).

```js
// /cypres/support/index.js
Cypress.on("window:before:load", win => {
  cy.stub(win.console, "error").callsFake(msg => {
    // log out to the terminal
    cy.now("task", "error", msg)
    // log to Command Log and fail the test
    throw new Error(msg)
  })
})
```

Here is a walk through of what is going on.

- we use [Cypress.on()](https://docs.cypress.io/api/events/catalog-of-events.html#Event-Types) to listen for the `window:before:load` event to hook into and modify the `window` before any of our app's code runs
- we stub out the `console.error` method and attach `callsFake` so that we can ensure our desired logic gets run
- `cy.now()` is a bit of a hack here that Ryan Jost discusses in his [blog post](https://www.ryanjyost.com/advanced-cypress-tips/) but it allows us to ensure the error gets logged out to the terminal. More info on `cy.now()` can be found [here](https://docs.cypress.io/guides/guides/debugging.html#Run-Cypress-command-outside-the-test)
- and lastly we intercept the contents of the `console.error` and throw them as a proper error.

## Method 2 - Use the cypress-fail-on-console-error package

This method is pretty straightforward as well and has some additional configuration options that you can read about in the [project repo.](https://github.com/nils-hoyer/cypress-fail-on-console-error#readme)

Install the package

```bash
# npm
npm install cypress-fail-on-console-error --save-dev

# yarn
yarn add cypress-fail-on-console-error -D
```

Then make a small tweak to `cypress/support/index.js`.

```js
// /cypress/support/index.js
import failOnConsoleError from "cypress-fail-on-console-error"

failOnConsoleError()
```

That's it!

If you have any questions or comments please reach out below! If you found this post useful, please retweet or share! You also can [sign up for updates](https://www.lostcreekdesigns.co/newsletter/) for whenever I release a new post.