Commands and types do not import properly

[brandonlenz]

What does not work? pa11y command types are not properly recognized if the library is configured correctly (according do the documentation) with the following error: TS2339: Property 'pa11y' does not exist on type 'cy & CyEventEmitter'.. Satisfying the typescript compiler deviates from setup instructions, and naturally prevents the tests from running.

How to reproduce? Create a new cypress typescript project. Follow the documentation for using cypress with custom commands and setting up @cypress-aduit/pa11y. In commands.ts, set up a custom commands such as

import '@cypress-audit/pa11y/'

Cypress.Commands.add('check_a11y', () => {
  cy.pa11y({
    runners: ['htmlcs'],
    standard: 'WCAG2AA',
  })
})

Make sure the supportFile also contains the following:

// Import commands.js using ES2015 syntax:
import './commands'

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Custom command to use pa11y with specific configurations
       * @example cy.check_a11y()
       */
      check_a11y(): Chainable<Element>
    }
  }
}

Expected behavior The exported types should be properly identified when importing the commands as the instructions suggest, and the tests should be able to run as properly configured.

Screenshots / Animated Gifs Importing /pa11y/commands: TS2339: Property 'pa11y' does not exist on type 'cy & CyEventEmitter'.

Importing /pa11y: however,

[brandonlenz]

Here's a hacky bandaid/workaround for now:

1. Create a custom.d.ts file in the root of your cypress project (cypress is a standalone app in our monorepo that lives next to client and server code):

project/
  e2e/
    cypress/
      ..
    custom.d.ts
    package.json
  client/
  server/

2. Copy and paste the contents of @cypress-audit/pa11y to custom.d.ts:

declare namespace Cypress {
  type AccessibilityStandard = 'Section508' | 'WCAG2A' | 'WCAG2AA' | 'WCAG2AAA'

  interface Options {
    actions?: string[]
    headers?: object
    hideElements?: string
    ignore?: string[]
    ignoreUrl?: boolean
    includeNotices?: boolean
    includeWarnings?: boolean
    level?: string
    method?: string
    postData?: string
    reporter?: string
    rootElement?: string
    runners?: string[]
    rules?: string[]
    screenCapture?: string
    standard?: AccessibilityStandard
    threshold?: number
    timeout?: number
    userAgent?: string
    wait?: number
  }

  interface Chainable<Subject> {
    /**
     * Runs a pa11y audit
     * @example
     * cy.pa11y(opts)
     */
    pa11y(opts?: Options)
  }
}

Type errors gone:

[dante01yoon]

I'm using only cypress-audit package,

same type problems with cy.lighthouse in spec files. I'm looking work around either. Should I define type explicitly in type in support/commands.ts ?

[devhid]

I think I had the same issue. Adding cypress-audit in the types option in tsconfig.json fixed this for me:

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "sourceMap": false,
    "outDir": "../../dist/out-tsc",
    "allowJs": true,
    "types": ["cypress", "node", "cypress-audit"], <--- Added `cypress-audit` here
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.js"],
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

[mfrachet]

I will take care of this one when coming back from vacation. Seems like something is not going super well with Cypress 10 🤔

[matthamil]

You should also be able add this at the top of that custom.d.ts and it should work, insofar as you are referencing custom.d.ts inside your tsconfig.json.

/// <reference types="@cypress-audit/lighthouse" />
/// <reference types="@cypress-audit/pa11y" />

[mfrachet]

Are you still facing this issue?