vitest-axe

Axe matchers for Vitest.

Install

npm

npm i -D axe-core @chialab/vitest-axe

yarn

yarn add -D axe-core @chialab/vitest-axe

pnpm

pnpm add -D axe-core @chialab/vitest-axe

Usage

Use a Vitest setup file to add the matchers to the test runner expectation API.
Also, make sure to include typings for the matchers in the tsconfig.json file.

vitest.config.ts

export default {
    test: {
        setupFiles: ['./test/setup.ts'],
    },
}

test/setup.ts

import matchers from '@chialab/vitest-axe';
import { expect } from 'vitest';

expect.extend(matchers);

tsconfig.json

{
    "compilerOptions": {
        // ...
        "types": ["@chialab/vitest-axe/matchers"]
    }
}

Example

import { run as axe } from 'axe-core';
import { describe, expect, test } from 'vitest';

describe('button', () => {
    test('accessibility', async () => {
        const button = document.createElement('button');
        expect(await axe(button)).toHaveNoViolations();
    });
});