Gathering detailed insights and metrics for vitest-axe
Gathering detailed insights and metrics for vitest-axe
Custom Vitest matcher for testing accessibility with aXe. Forked from jest-axe.
Installations
npm install vitest-axeDeveloper
chaance
Developer Guide
BETA
Module System
ESM
Min. Node Version
Typescript Support
Yes
Node Version
16.18.0
NPM Version
8.19.2
Statistics
60 Stars
61 Commits
7 Forks
1 Watching
1 Branches
5 Contributors
Updated on 20 Nov 2024
Languages
TypeScript (80.75%)
JavaScript (19.25%)
Total Downloads
Cumulative downloads
Total Downloads
1,675,452
Last day
10.9%
8,901
Compared to previous day
Last week
9.4%
44,437
Compared to previous week
Last month
14.9%
182,886
Compared to previous month
Last year
424.7%
1,396,159
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Versions
vitest-axe
Custom Vitest matcher for testing accessibility with aXe
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 tohappy-dom.
Installation
This module should be installed as one of your project's devDependencies:
1# with npm 2npm install --save-dev vitest-axe 3# yarn 4yarn add --dev vitest-axe 5# pnpm 6pnpm 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.
1// vitest-setup.js 2import "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:
1// vitest-setup.js 2import * as matchers from "vitest-axe/matchers"; 3import { expect } from "vitest"; 4expect.extend(matchers);
Extend in individual tests
1import { axe, toHaveNoViolations } from "vitest-axe"; 2 3expect.extend(toHaveNoViolations); 4 5it("should have no axe violations", async () => { 6 const html = "<html><!-- accessible markup! --></html>"; 7 expect(await axe(html)).toHaveNoViolations(); 8});
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.
1import "vitest"; 2import type { AxeMatchers } from "vitest-axe/matchers"; 3 4declare module "vitest" { 5 export interface Assertion extends AxeMatchers {} 6 export interface AsymmetricMatchersContaining extends AxeMatchers {} 7}
Further reading:
Usage
1import { axe } from "vitest-axe"; 2 3it("should demonstrate this matcher's usage", async () => { 4 const render = () => '<img src="#"/>'; 5 // pass anything that outputs html to axe 6 const html = render(); 7 expect(await axe(html)).toHaveNoViolations(); 8});
No vulnerabilities found.
No security vulnerabilities found.