$30 off During Our Annual Pro Sale. View Details »

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.

Steve Barnett

November 10, 2021
Tweet

More Decks by Steve Barnett

Other Decks in Programming

Transcript

  1. Agenda 1. What is jest-axe? 2. How do we set

    it up? 3. What could we test? 4. What else could we do?
  2. Agenda ! 1. What is jest-axe? 2. How do we

    set it up? 3. What could we test? 4. What else could we do?
  3. What is jest? “Jest is a delightful JavaScript Testing Framework

    with a focus on simplicity.” — jestjs.io
  4. What is jest-axe? Custom Jest matcher for axe for testing

    accessibility expect(1 + 2).toBe(3);
  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. // ! Configuration. Option 1: per component // component.test.js import

    { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations);
  7. // ! Configuration. Option 2: with helpers // testutils.js import

    { configureAxe } from 'jest-axe'; const axe = configureAxe({ rules: { region: { enabled: false } } }); export default axe;
  8. // ! Configuration. Option 2: with helpers // testutils.js import

    { toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations);
  9. // ! 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
  10. Agenda ✔ 1. What is jest-axe? ✔ 2. How do

    we set it up? ! 3. What could we test? 4. What else could we do?
  11. What could we test? Test everything? Probably no. Test nothing?

    Definitely no. Take the middle way. (Hint: UI changed? jest-axe it!)
  12. // ! 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(); });
  13. // ! 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
  14. 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.
  15. Add a jest-axe? Changing an ARIA attribute? Very probably yes.

    Special shout-out: errors! aria-invalid, aria-describedby
  16. 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)
  17. 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)
  18. We have a design system, but it doesn't have jest-axe

    Chat to some peeps about getting it in
  19. 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
  20. Agenda ✔ 1. What is jest-axe? ✔ 2. How do

    we set it up? ✔ 3. What could we test? ! 4. What else could we do?
  21. Recap ✔ 1. What is jest-axe? ✔ 2. How do

    we set it up? ✔ 3. What could we test? ✔ 4. What else could we do?