React Testing Library & Accessibility

Have you ever wondered how to test your React components in a way that mimics how users interact with them? If so, you might be interested in learning about React testing library, one of the most popular testing libraries for React. In this article, I will show you how to use React testing library to automate accessibility tests for your React components.

React testing library is a library that helps test React components without relying on their implementation details. It provides a testing experience as close as possible to natively using hooks from within a real component. React testing library builds on top of DOM Testing Library by adding APIs for working with React components. Its primary guiding principle is that the more tests resemble the way software is used, the more confidence they can give. For example, instead of testing props or state of a component, React testing library tests the actual DOM tree rendered by the component and simulates user events on it.

Automating accessibility tests with React testing library can help you ensure that your components are accessible to all users, including those who use assistive technologies such as screen readers or keyboards. Accessibility tests can check for things like proper use of semantic HTML elements, aria attributes, focus management, keyboard navigation, and color contrast. By using React testing library's queries and utilities, you can write accessibility tests that are easy to read and maintain.

Accessibility Automation Setup

Have you ever wondered how to test your React components for accessibility issues? If so, you might be interested in learning about how to use Jest and React testing library to automate accessibility tests for your components. In this article, I will show you how to set up component test cases for accessibility with Jest and React testing library using a library called jest-axe.

Jest is a JavaScript testing framework that allows developers to run tests on JavaScript and TypeScript code and integrates well with React. React testing library is a JavaScript testing utility built specifically to test React components without relying on their implementation details. Testing accessibility with Jest and React testing library can help you ensure that your components are accessible to all users, including those who use assistive technologies such as screen readers or keyboards. Accessibility tests can check for things like proper use of semantic HTML elements, aria attributes, focus management, keyboard navigation, and color contrast.

Jest-axe is a custom matcher for Jest that runs axe-core accessibility audits on your components and returns the violations as test failures. Axe-core is a library that provides automated accessibility testing for web applications . By using jest-axe with Jest and React testing library, you can easily test your components for accessibility issues and fix them before they affect your users.

describe('Footer Component', () => {

  test("Functionality - Component has loaded", () => {});

  test("Functionality - List number", () => {});

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

});

The second way is to treat the accessibility tests as a separate set of tests. This would mean making accessibility as its own "describe" group and putting all the automated tests and regression tests for accessibility underneath it.

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

The quick and most effective way to bring accessibility testing into your React tests using RTL is to use the open source library axe-core.

Axe-core checks for around 1/3 of accessibility issues, and widely used within the industry. Setup is quick and relatively painless to get going.

First download the latest axe-core integration

npm i axe-core@latest

Next in your project bring in the axe-core library

import * as axe from 'axe-core';

Now in your test spec, a test and call it "Accessibility check" like so:

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

Once the test case is made, lets make use of React Testing Libraries functionality. Since Axe-core requires HTML content to scan against we MUST give it pure HTML. We can do this is RTL by using the render() function and the {container} object.

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

Finally, we create a results object that runs axe-core against the container and we create an assertion that takes the results object and looks to see if there are any issues in the violations array.

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

Now we have a quick axe scan of our component up and running!

Note: React Testing Library will not render full on CSS, so color contrast will not be tested with the library.

Accessibility Regression Tests

On top of using axe-core we can go beyond just checking generically and write specific regression tests that ensure the accessible functionality of the component or page we created.

An example of this would be the pressed state of a toggle button being properly set. Let's say I have a button that toggles it's state and it uses aria-pressed attribute. We could write a regression test to check that functionality and ensure it is being properly set in the component.

There many other types of regression that that can be done to ensure accessible functionality. For more information on this please view Automated Accessibility part 3: Regression Tests

Conclusion

React Testing Library is wonderful for creating simple and effective automated tests for your react components. Ensuring accessibility is apart of those tests only helps to:

• Enforce accessible coding practices
• Help build the importance of a11y on your dev team
• Build a culture of accessibility learning
• Shape definition of done for a11y

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