Abilyo by WebAbility

Jest / Vitest

Component-level accessibility testing for unit test suites.

Install

npm install -D @webability/jest

Usage

import { render } from '@testing-library/react'
import { analyzeDOM, matchers } from '@webability/jest'
 
expect.extend(matchers)
 
test('Button is accessible', () => {
  render(<Button onClick={save}>Save</Button>)
  const result = analyzeDOM()
  expect(result).toBeAccessible()
})
 
test('no critical violations in form', () => {
  render(<LoginForm />)
  const result = analyzeDOM()
  expect(result).toHaveNoViolations('critical')
})

API

FunctionDescription
analyzeDOM(root?)Analyze rendered DOM. Optional root element to scope.
matchers.toBeAccessible()Passes if zero issues found.
matchers.toHaveNoViolations(severity?)Filter by severity level.

What It Checks

  • Images without alt text
  • Buttons without accessible names
  • Form inputs without labels
  • Empty links
  • Heading hierarchy skips
  • Invalid ARIA roles
  • Interactive elements without keyboard access
  • Missing page language

Vitest

Same API — configure jsdom environment:

vitest.config.ts
export default {
  test: {
    environment: 'jsdom',
  },
}

On this page