Getting the most out of jest-axe

Jest-axe is a custom matcher (the bit that does the checking in your test) for testing accessibility. It’s a handy way to catch a11y errors in our components.

To get the most value from it, though, we need to be a little careful about how we use it.

We’ll go from ‘iHaveNoIdea’ to ‘toHaveNoViolations’ in 20 minutes.

Transcript

1. Getting the most out of jest-axe
2. Most important thing With a little more effort jest-axe can be a lot more useful
3. Agenda 1. What is jest-axe? 2. How do we set it up? 3. What could we test? 4. What else could we do?
4. Steve Barnett Technical Digital Accessibility Analyst at Xero Wellington, Aotearoa New Zealand naga.co.za
5. Agenda ! 1. What is jest-axe? 2. How do we set it up? 3. What could we test? 4. What else could we do?
6. What is jest? “Jest is a delightful JavaScript Testing Framework with a focus on simplicity.” — jestjs.io
7. What is jest-axe? Custom Jest matcher for axe for testing accessibility expect(1 + 2).toBe(3);
8. Agenda ✔ 1. What is jest-axe? ! 2. How do we set it up? 3. What could we test? 4. What else could we do?
9. # ! Installation $ npm install --save-dev jest-axe
10. // ! Configuration. Option 1: per component // component.test.js import { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations);
11. // ! Configuration. Option 2: with helpers // testutils.js import { configureAxe } from 'jest-axe'; const axe = configureAxe({ rules: { region: { enabled: false } } }); export default axe;
12. Axe manifesto "It returns zero false positives" — deque.com/axe (axe is probably right)
13. // ! Configuration. Option 2: with helpers // testutils.js import { toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations);
14. // ! Test! // component.test.js // imports and things it('should not have any a11y errors', async () => { // render or mount the component into const container expect(await axe(container)).toHaveNoViolations(); }) // what's in the expect depends on your // framework and testing setup
15. Agenda ✔ 1. What is jest-axe? ✔ 2. How do we set it up? ! 3. What could we test? 4. What else could we do?
16. What could we test? Test everything? Probably no. Test nothing? Definitely no. Take the middle way. (Hint: UI changed? jest-axe it!)
17. // ! Add a jest-axe when we... // Have a mount or render? // " Probably yes. it('should be accessible', async () => { const component = mount(<Accordion isOpen />); // some other tests checking classes and text and things expect(await axe(component.html())).toHaveNoViolations(); });
18. // ! Add a jest-axe when we... // Have lots of mounts or renders in one file? // " Probably yes, in a cheeky afterEach. let component; afterEach(async () => { if (!component) { return; } expect(await axe(component.html())).toHaveNoViolations(); } // ... lots of tests with mount
19. Add a jest-axe... For every variant (colours, states)? Probably yes. For every Boolean prop? We probably have two tests, so probably yes twice. Could use the afterEach trick.
20. Add a jest-axe? Changing an ARIA attribute? Very probably yes. Special shout-out: errors! aria-invalid, aria-describedby
21. How much interaction could we test? Every (click, keyboard) interaction? Probably no. None of the interactions? Probably no. Take the middle way. (Hint: use ARIA attributes as selectors)
22. Add a jest-axe? For the same stuff as we put in storybook (storybook.js.org)? Very probably yes! (Storybook does bits of UI in isolation)
23. Add the accessibility addon for Storybook? Yes please! Runs axe on your stories Keep jest-axe, though!
24. We have a design system, but it doesn't have jest-axe Chat to some peeps about getting it in
25. We have a design system, and it has jest-axe Still worth adding jest-axe to our stuff! 1. We might pick up bugs the DS hasn’t spotted 2. We might pick up where we’re not implementing the DS quite right
26. Agenda ✔ 1. What is jest-axe? ✔ 2. How do we set it up? ✔ 3. What could we test? ! 4. What else could we do?
27. What else could we do? Manual testing: keyboard; zoom; screen reader.
28. What else could we do? Involve people with disabilities in our research and usability testing.
29. Recap ✔ 1. What is jest-axe? ✔ 2. How do we set it up? ✔ 3. What could we test? ✔ 4. What else could we do?
30. Most important thing With a little more effort jest-axe can be a lot more useful
31. Thanks for listening!