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?

[ashrafnazar]

I still get this issue, but the workaround provided by @brandonlenz does the trick.

Does indeed feel hacky though