Instructions for Cypress Component Testing and JavaScript
Configuring your component tests with Cypress and JavaScript
-
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.js
, import thecypressConfig()
function from the@axe-core/watcher
package and wrap your config with it. Set thetestingTypes
array to includecomponent
:const { defineConfig } = require('cypress'); const { cypressConfig } = require('@axe-core/watcher'); const API_KEY = process.env.API_KEY module.exports = 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.js
), import the@axe-core/watcher
packagecypressCommands
and callaxeWatcherFlush()
after each test:require('@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
).