Render Components with ReactDOM to Write Tests with Jest and jest-axe
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 ReactDOM to render components for jest-axe to audit for accessibility.
Resources
- https://github.com/nickcolley/jest-axe
Instructor: [0:00] To get started with jest-axe, we'll need to npm install or yarn add it to our development dependencies. Now that that's installed, let's go ahead and write a unit test. Here, I have the beginning of a unit test that I'm going to write for my login page. I'm already importing React. For this unit test, we're going to be using ReactDOM to render the component that we are testing.
[0:26] Here, I'm importing my component that I want to test. What we'll need to do is we'll need to import axe and the toHaveNoViolations function from jest-axe. Now that we've imported those functions, we're going to extend Jest's expect() function with the toHaveNoViolations() function, so that we can use it as an expectation.
[0:51] Since we're using ReactDOM to render the component that we want to test, I'm going to go ahead and create a div that I can render my login page component into. I'm going to use ReactDOM to render my login page component. My login component takes a history prop. We're going to stub that out with a Jest mock function, and we're going to have that rendered into the div I created above.
[1:19] We can go ahead and test this component to make sure it has no accessibility violations. We do that by passing the axe function the element we want to test. We're passing it that login page div that I created that's containing the login page component that I want to test for accessibility. We can write an expectation on this Results object that we got back from the axe function to verify that there were no violations.
[1:45] Let's run this test and see it in action. I'm going to run my test suite by running npm run test. There, you can see it picked up my login test, and here are our results. We can see here that we have one failure. Because axe was able to scan the entire component that was passed to it and all children within that component, there could be multiple violations found from this one test.
[2:09] In our results, we see each element that had a violation is listed. We've got an input here that had a violation. We see what the violation was. We've got a number of suggestions on how to fix that issue. Here's a link to more information about it, and then here's another element that had the same issue. Continue scrolling, and here is a third issue.
[2:35] Let's see how it looks if I go fix all of these violations and run it again. I've made some changes to my code. Let's run this test again and see what we get. There we go, it ran my login test again, and it passed.