Instructions for Cypress Component Testing and TypeScript
Configuring your component tests with Cypress and TypeScript
-
In the root level of your testing folder, install the
@axe-core/watcher
package and all of its dependencies usingnpm
or your preferred package manager (for example,yarn
orpnpm
).npm install --save-dev @axe-core/watcher
-
In
cypress.config.ts
, import thecypressConfig()
function from the@axe-core/watcher
package and wrap your config with it. Set thetestingTypes
array to includecomponent
:import { defineConfig } from 'cypress'; import { cypressConfig } from '@axe-core/watcher'; const API_KEY = process.env.API_KEY export default defineConfig( cypressConfig({ axe: { apiKey: API_KEY, testingTypes: ['component'] }, // Your existing Cypress configuration code here component: { // Your component testing configuration // For example: // devServer: { // framework: 'react', // bundler: 'webpack', //}, }, }) );
-
In your Cypress component support file (commonly called cypress/support/component.ts), import the
@axe-core/watcher
packagecypressCommands
and callaxeWatcherFlush()
after each test:import '@axe-core/watcher/dist/cypressCommands'; afterEach(() => { cy.axeWatcherFlush(); });
-
You're all done. Run your component tests and check your results. Please note
@axe-core/watcher
only runs in Chrome and should only be used in Cypress run mode. It may be used with--headless=new
or--headed
(for example,cypress run --headed --browser=chrome-for-testing --component
).