afterEach block in @cypress/code-coverage/support.js executing concurrently with beforeEach test spec

[mhyrka]

I am trying to implement code-coverage with cypress as outlined here. Using cypress version 12.13.0 and @cypress/code-coverage version 3.10.7 as well as @cypress/webpack-preprocessor version 5.17.1. Additionally I'm using nyc (via npx) to instrument the code. What makes this more confusing is the fact that everything was working properly until it wasn't and I'm unable to get back to a working state.

• full error + stack trace:

TypeError: Cannot set property message of [object DOMException] which has only a getter

Because this error occurred during a `before each` hook we are skipping the remaining tests in the current suite: `Batches home page`
      at Object.modifyErrMsg (http://localhost:58274/__cypress/runner/cypress_runner.js:164139:15)
      at http://localhost:58274/__cypress/runner/cypress_runner.js:149900:84
      at onError (http://localhost:58274/__cypress/runner/cypress_runner.js:159638:42)
      at tryCatcher (http://localhost:58274/__cypress/runner/cypress_runner.js:18744:23)
      at Promise._settlePromiseFromHandler (http://localhost:58274/__cypress/runner/cypress_runner.js:16679:31)
      at Promise._settlePromise (http://localhost:58274/__cypress/runner/cypress_runner.js:16736:18)
      at Promise._settlePromise0 (http://localhost:58274/__cypress/runner/cypress_runner.js:16781:10)
      at Promise._settlePromises (http://localhost:58274/__cypress/runner/cypress_runner.js:16857:18)
      at _drainQueueStep (http://localhost:58274/__cypress/runner/cypress_runner.js:13451:12)
      at _drainQueue (http://localhost:58274/__cypress/runner/cypress_runner.js:13444:9)
      at ../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:58274/__cypress/runner/cypress_runner.js:13460:5)
      at Async.drainQueues (http://localhost:58274/__cypress/runner/cypress_runner.js:13330:14)

  2) <some logging>
         "after each" hook for "should display display the table":
     TypeError: Cannot read properties of undefined (reading 'KeyboardEvent')

This error occurred while creating the session. Because the session setup failed, we failed the test.

Because this error occurred during a `after each` hook we are skipping all of the remaining tests.
      at Object.eval [as setup] (webpack://asv-ui/./cypress/support/e2e.js:45:11)

• additional error info: What i learned from executing this in headed mode is that the test begins, the origin block where sso login occurs begins to execute, and before it can finish typing the username, the afterEach block in node_modules/@cypress/code-coverage/support.js executes against the same login command, which throws an error bc the original dom element we were using to type into has disappeared.

• my pertinent code changes:

// cypress/support/e2e.js
import '@cypress/code-coverage/support'
...
Cypress.Commands.add('login', () => {
  ...
  cy.wrap(getSecret(credentials))
    .then(res => JSON.parse(res.SecretString))
    .then(secret => {
      cy.session(args, () => {
        ...
        cy.origin(authOrigin, { args }, ({ <destructured args> }) => {
            // do sso login here
        })
      })
    })

// mytest.cy.js
describe('home page', function () {
  beforeEach(() => { 
    ...
    cy.login()
    cy.launchURL()
  })
...

// cypress.config.js
module.exports = defineConfig({
  video: false,
  screenshotOnRunFailure: false,
  e2e: {
    setupNodeEvents (on, config) { 
      ...
      on('file:preprocessor', preprocessor())
      require('@cypress/code-coverage/task')(on, config)
    }, 
    ..
    env: {
      codeCoverage: {
        exclude: ['cypress/**/*.*'],
      }
    }
    ...
}
...
// package.json 
...
"cypress-run": "npx nyc@15.1.0 --instrument cypress run && npx nyc@15.1.0 report --reporter=lcov --report-dir=./e2e-coverage --reporter=text-summary",
...  
"nyc": {
    "all": true,
    "exclude": [
      "cypress/**/*.*"
    ]
  }