[React ARIA Testing] Test Accessibility of Rendered React Components with jest-axe

While not all of accessibility testing of a web application can be automated, much of it can be and quite easily using axe-core and jest-axe. Let’s see how to integrate this with React Testing Library to help catch common accessibility issues.

import React from 'react'
import 'jest-axe/extend-expect'
import { axe } from 'jest-axe'
import { render } from '@testing-library/react'

function InaccessibleForm() {
  return (
    <form>
      <input placeholder="email" />
    </form>
  )
}

function AccessibleForm() {
  return (
    <form>
      <label htmlFor="username">Username</label>
      <input id="username" placeholder="username" />
    </form>
  )
}

test('inaccessible forms fail axe', async () => {
  const { container } = render(<InaccessibleForm />)
  expect(await axe(container)).not.toHaveNoViolations()
})

test('accessible forms pass axe', async () => {
  const { container } = render(<AccessibleForm />)
  expect(await axe(container)).toHaveNoViolations()
})