Vitest-axe NPM

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.

Installation

This module should be installed as one of your project's devDependencies:

# with npm
npm install --save-dev vitest-axe
# yarn
yarn add --dev vitest-axe
# pnpm
pnpm add -D vitest-axe

Setup

Import `vitest-axe/extend-expect` module

The simplest way to use this library is to import vitest-axe/extend-expect from your test setup file.

// vitest-setup.js
import "vitest-axe/extend-expect";

Extend in test setup file

You can also import the matchers from vitest-axe/matchers then pass them to Vitest's expect.extend method yourself:

// vitest-setup.js
import * as matchers from "vitest-axe/matchers";
import { expect } from "vitest";
expect.extend(matchers);

Extend in individual tests

import { axe, toHaveNoViolations } from "vitest-axe";

expect.extend(toHaveNoViolations);

it("should have no axe violations", async () => {
	const html = "<html><!-- accessible markup! --></html>";
	expect(await axe(html)).toHaveNoViolations();
});

With TypeScript

If you imported the vitest/extend-expect module in your setup file, you should be good to go. Make sure your setup file is included in your tsconfig.json.

If you do not import the vitest/extend-expect module, you will need to augment Vitest's Assertion and AsymmetricMatchersContaining interfaces.

import "vitest";
import type { AxeMatchers } from "vitest-axe/matchers";

declare module "vitest" {
	export interface Assertion extends AxeMatchers {}
	export interface AsymmetricMatchersContaining extends AxeMatchers {}
}

Usage

import { axe } from "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();
});

axe-core chalk lodash-es

@infinitebrahmanuniverse/nolb-vites @everything-registry/sub-chunk-3063 @telegraph/vitest-config reach-ui-fork new-reach-ui

7 months ago

9 months ago

9 months ago

9 months ago

2 years ago