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
   

   View Slide

2. Most important thing
   With a little more effort
   jest-axe can be
   a lot more useful
   

   View Slide

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?
   

   View Slide

4. Steve Barnett
   Technical Digital Accessibility Analyst at Xero
   Wellington, Aotearoa New Zealand
   naga.co.za
   

   View Slide

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?
   

   View Slide

6. What is jest?
   “Jest is a delightful JavaScript Testing Framework
   with a focus on simplicity.” — jestjs.io
   

   View Slide

7. What is jest-axe?
   Custom Jest matcher for axe for testing
   accessibility
   expect(1 + 2).toBe(3);
   

   View Slide

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?
   

   View Slide

9. #
   !
   Installation
   $ npm install --save-dev jest-axe
   

   View Slide

10. //
    !
    Configuration. Option 1: per component
    // component.test.js
    import { axe, toHaveNoViolations } from 'jest-axe';
    expect.extend(toHaveNoViolations);
    

    View Slide

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

    View Slide

12. Axe manifesto
    "It returns zero false positives"
    — deque.com/axe
    (axe is probably right)
    

    View Slide

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

    View Slide

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
    

    View Slide

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?
    

    View Slide

16. What could we test?
    Test everything? Probably no.
    Test nothing? Definitely no.
    Take the middle way.
    (Hint: UI changed? jest-axe it!)
    

    View Slide

17. //
    !
    Add a jest-axe when we...
    // Have a mount or render?
    //
    "
    Probably yes.
    it('should be accessible', async () => {
    const component = mount();
    // some other tests checking classes and text and things
    expect(await axe(component.html())).toHaveNoViolations();
    });
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

20. Add a jest-axe?
    Changing an ARIA attribute? Very probably yes.
    Special shout-out: errors!
    aria-invalid, aria-describedby
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

23. Add the accessibility addon for Storybook?
    Yes please!
    Runs axe on your stories
    Keep jest-axe, though!
    

    View Slide

24. We have a design system,
    but it doesn't have jest-axe
    Chat to some peeps about getting it in
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

27. What else could we do?
    Manual testing:
    keyboard;
    zoom;
    screen reader.
    

    View Slide

28. What else could we do?
    Involve people with disabilities in our research
    and usability testing.
    

    View Slide

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?
    

    View Slide

30. Most important thing
    With a little more effort
    jest-axe can be
    a lot more useful
    

    View Slide

31. Thanks for listening!
    

    View Slide