This library is a fork of jest-axe.
It shares that library's implementation and API. It is intended to make it
easier to include its matchers without clashes between Vitest and
Jest's environment or types.
See the README for the original package for usage details.
Important
There is currently a bug in Happy DOM related to its implementation of Node.prototype.isConnected. This causes compatibility issues with axe, which means that this library will not work if your Vitest environment is set to happy-dom.
This module should be installed as one of your project's devDependencies:
# with npm
npm install --save-dev @koralle/vitest-axe
# yarn
yarn add --dev @koralle/vitest-axe
# pnpm
pnpm add -D @koralle/vitest-axeYou can import the matcher from @koralle/vitest-axe then pass them to
Vitest's expect.extend method yourself:
// vitest-setup.js
import { toHaveNoViolations } from "@koralle/vitest-axe"
import { expect } from "vitest"
expect.extend({ toHaveNoViolations })import { axe, toHaveNoViolations } from "@koralle/vitest-axe"
expect.extend({ toHaveNoViolations })
it("should have no axe violations", async () => {
const html = "<html><!-- accessible markup! --></html>"
expect(await axe(html)).toHaveNoViolations()
})You will need to augment Vitest's Assertion and AsymmetricMatchersContaining interfaces.
import "vitest"
import type { AxeMatchers } from "@koralle/vitest-axe"
declare module "vitest" {
export interface Assertion extends AxeMatchers {}
export interface AsymmetricMatchersContaining extends AxeMatchers {}
}Further reading:
import { axe } from "@koralle/vitest-axe"
it("should demonstrate this matcher's usage", async () => {
const render = () => '<img src="#"/>'
// pass anything that outputs html to axe
const html = render()
expect(await axe(html)).toHaveNoViolations()
})