Write Unit Tests for Accessibility Using jest-axe and enzyme
We can add accessibility testing to our jest unit tests with jest-axe which gives us:
- An easy way to automate accessibility auditing.
- The flexibility to audit at any level of our code, as low as an element and as high as a component representing an entire page of our app.
- A safety net for any accessibility regressions.
Here we'll see how to use jest-axe with enzyme to render the components for jest-axe to audit for accessibility.
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
Resources
- jest-axe: https://github.com/nickcolley/jest-axe
- enzyme: https://enzymejs.github.io/enzyme
Instructor: [0:00] To get started using Jest-aXe with Enzyme, we'll need to either, npm install or yarn add jest-axe, enzyme, and the Enzyme adapter for whichever version of React you're using -- I'm using React 16 -- and save those to your development dependencies.
[0:20] Now that those are installed, we'll need to configure Enzyme to work with Jest. You'll need to create a setup file, if you don't have one already. Here, I'm adding a setup test file in my source directory. In that file, we'll need to import configure from Enzyme, and we'll need to import the adapter that we just installed. We're going to pass a new instance of that adapter into the configure function.
[0:47] Now that we have our setup test file created, this will automatically run before our test suite. Now we can go ahead and write our unit test. Here, I've got the beginning of a unit test for my Login page component. What we'll need to do is, we'll need to import the mount function from Enzyme. That'll allow us to render the component we want to test.
[1:06] Then we'll need to import aXe, and to have no violations from jest-axe. We're already importing the Login page component that we're going to be testing for accessibility. Next, we'll need to extend Jest's expect function with jest-axe's, to have no violations. That's what we'll use to actually verify that the component that we're testing doesn't have any accessibility violations.
[1:31] Let's write this test. We'll need to pass the component we want to test, our Login page, to Enzyme's mount component. Then, we'll need to get the DOM node from our mounted Login page, and pass that to aXe, which will scan our component for any accessibility violations.
[1:49] Let's run this test and see what we get. We run our test suite with the command, npm run test. You see it finds our login test, and here, we can see that it failed. Scrolling up, here we can see the results we got, and output some very thorough details on which elements violated accessibility. I'm going to go ahead and fix all these findings, and then we can run it again and see what we get.
[2:11] Now that I've made those changes, let's go ahead and run this test again and see what it looks like. This time it passed.