[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 Form() {
  return (
    <Form>
      <label htmlFor="email">Email</label>
      <input id="email" placeholder="email" />
    </Form>
  )
}

test('the form is accessible', async () => {
  const { container } = render(<Form />)
  const result = await axe(container)
  expect(result).toHaveNoViolations()
})