React Testing Library is one of the most popular testing libraries for React. With its quick setup and straightforward usage, it is easy to understand why its popularity has grown. With that growth comes the question: can we automate accessibility tests with it? The answer is yes, so let’s find out how.

Accessibility Automation Setup

When setting up component test cases for accessibility, there are two primary ways to organize them. Using Jest, the most commonly used testing framework with React, we can look at both approaches.

The first approach includes accessibility as part of the component’s complete test suite. This groups the tests so accessibility becomes part of the normal UI test cases.

describe('Footer Component', () => {
  test('Functionality - Component has loaded', () => {});
  test('Functionality - List number', () => {});
  test('Accessibility check', async () => {});
});

The second approach treats accessibility tests as a separate test group. Accessibility receives its own describe block containing automated and regression tests.

describe('Functional - Footer Component', () => {
  test('Functionality - Component has loaded', () => {});
  test('Functionality - List number', () => {});
});

describe('Accessibility - Footer Component', () => {
  test('Axe scan', async () => {});
  test('Expand/collapse ARIA', () => {});
});

Accessibility Testing with Axe

One quick and effective way to bring accessibility testing into React tests is to use the open-source axe-core library.

Axe-core checks for roughly one-third of accessibility issues and is widely used throughout the industry. Its setup is quick and relatively painless.

First, install the latest axe-core integration:

npm i axe-core@latest

Next, import axe-core into your project:

import * as axe from 'axe-core';

Now add a test named “Accessibility check” to your test specification:

test('Accessibility check', async () => {});

Axe-core requires HTML content to scan. React Testing Library’s render() function provides that content through the container object.

const { container } = render(<Footer />);

Finally, run axe-core against the container and assert that its violations array is empty:

test('Accessibility check', async () => {
  const { container } = render(<Footer />);
  const results = await axe.run(container);
  expect(results.violations.length).toBe(0);
});

You now have a quick axe scan of your component running in your test suite.

Note: React Testing Library does not fully render CSS, so color contrast will not be tested by this setup.

Accessibility Regression Tests

In addition to using axe-core, we can write specific regression tests that protect the accessible functionality of a component or page.

One example is checking that the pressed state of a toggle button is properly set. If a button toggles its state using the aria-pressed attribute, a regression test can confirm that the attribute changes correctly when the component is used.

Many other regression tests can help protect accessible functionality beyond what a general automated scan can detect.

Conclusion

React Testing Library is excellent for creating simple and effective automated tests for React components. Making accessibility part of those tests helps teams:

  • Enforce accessible coding practices
  • Build the importance of accessibility into development workflows
  • Create a culture of accessibility learning
  • Shape the definition of done for accessibility

The only question now is: when will you start adding accessibility test cases?