component-driven / cypress-axe

Test accessibility with axe-core in Cypress
MIT License
622 stars 86 forks source link

The 'task' event has not been registered in the setupNodeEvents method. You must register it before using cy.task() #171

Closed PhilAtKC closed 10 months ago

PhilAtKC commented 10 months ago

Hi all,

It's my first time using cypress-axe and I am trying to set up the extra logs for violationCallback. I am new to development, so bear with me if this is not the right place to post, or if I need to clarify more info. I will do my best to give as much information as possible. Please let me know if I can improve my github issue posting.

Cypress version: Version 13.6.0 (13.6.0.2421135) js/ts: Typescript Error message: The 'task' event has not been registered in the setupNodeEvents method. You must register it before using cy.task()

Screenshot:

Screenshot 2024-01-12 at 13 57 15

cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    screenshotOnRunFailure: false,
    viewportWidth: 1550,
    setupNodeEvents(on, config) {
      module.exports = (on, config) => {
        on('task', {
          log(message) {
            console.log(message)
            return null
          },
          table(message) {
            console.table(message)
            return null
          },
        })
      }
    },
  },
})

spec file

describe('Check page for accessibility', () => {
  // To log a11y violations in the terminal
  function terminalLog(violations) {
    cy.task(
      'log',
      `${violations.length} accessibility violation${
        violations.length === 1 ? '' : 's'
      } ${violations.length === 1 ? 'was' : 'were'} detected`
    )
    // pluck specific keys to keep the table readable
    const violationData = violations.map(
      ({ id, impact, description, nodes }) => ({
        id,
        impact,
        description,
        nodes: nodes.length,
      })
    )

    cy.task('table', violationData)
  }

  beforeEach(() => {
    //sign in with okta
    cy.signInWithOkta()
    cy.visit('/question')

    //assert successful login before continuing
    cy.url().should('equal', 'http://localhost:3000/question')

    cy.injectAxe()
  })

  //   it('Has no detectable a11y violations on load', () => {
  //     // Test the page at initial load
  //     cy.checkA11y()
  //   })

  it('Logs violations to the terminal', () => {
    cy.checkA11y(null, null, terminalLog)
  })
})

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "cypress-axe", "node"]
  },
  "include": ["**/*.ts"]
}

e2e.ts

// ***********************************************************
// This example support/e2e.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration

require('./commands')
import 'cypress-axe'
PhilAtKC commented 10 months ago

Never mind, I fixed it. The problematic line was module.exports = (on, config) => {. I didn't even need that.