Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting the most out of jest-axe

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.

28a7165396905ffabc4d1f45609efc39?s=128

Steve Barnett

November 10, 2021
Tweet

More Decks by Steve Barnett

Other Decks in Programming

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!