$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. 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