We can add accessibility testing to our
jest unit tests with
jest-axe which gives us:
Here we'll see how to use
enzyme to render the components for
jest-axe to audit for accessibility.
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.