DEV Community

Abdulqudus Abubakre
Abdulqudus Abubakre

Posted on

27 3 3 3 3

Automated Testing with jest-axe

When building web applications, ensuring accessibility should be as important as delivering features or fixing bugs. Automated testing tools like jest-axe make it easy to catch common accessibility issues early in development.

What is jest-axe?

jest-axe is a Jest matcher built on top of the axe-core accessibility engine. It allows you to test your rendered components for accessibility violations, integrating seamlessly with your existing Jest test suite.

Why Catch Accessibility Issues Early?

Addressing accessibility errors early in the development process is crucial for several reasons:

  1. Cost Efficiency: Fixing issues during development is significantly cheaper and faster than addressing them after deployment.
  2. Promotes Awareness: Regularly testing with tools like jest-axe helps developers become more mindful of accessibility considerations, influencing their decisions when writing HTML and designing components.
  3. Preventing Technical Debt: Early fixes prevent accessibility issues from snowballing into larger, harder-to-solve problems.

Setting Up jest-axe

First, install the package:

npm install --save-dev jest-axe
Enter fullscreen mode Exit fullscreen mode

Next, add it to your test file:

import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);
Enter fullscreen mode Exit fullscreen mode

Writing a Basic Test

Here’s an example of how you can test a simple component for accessibility:

import React from 'react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

function Button() {
  return <button>Click me</button>;
}

describe('Button component', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(<Button />);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
});
Enter fullscreen mode Exit fullscreen mode

Testing a Vue Component

If you’re working with Vue, jest-axe integrates just as easily. Here’s an example:

import { mount } from '@vue/test-utils';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

const Button = {
  template: '<button>Click me</button>'
};

describe('Button component (Vue)', () => {
  it('should have no accessibility violations', async () => {
    const wrapper = mount(Button);
    const results = await axe(wrapper.element);
    expect(results).toHaveNoViolations();
  });
});
Enter fullscreen mode Exit fullscreen mode

Benefits

  1. Catch Issues Early: jest-axe helps you identify and fix accessibility problems during development.
  2. Easy Integration: Works with Jest, no steep learning curve.
  3. Actionable Feedback: Provides detailed insights into violations.

Limitations

  • Automated tests can’t catch everything—manual audits are still necessary for nuanced issues like keyboard navigation or color contrast.
  • Studies show that automated tools can detect only about 30-50% of accessibility issues. For instance, they excel at identifying missing alt attributes but might miss issues with context or usability.

Wrapping Up

By adding jest-axe to your test suite, you’re taking a solid step towards building accessible web applications. However, remember that no tool can guarantee full accessibility. Combine automated testing with manual checks and user testing for the best results.

Happy testing!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
g1itcher profile image
G1itcher

For anyone wondering, there is a vitest version (vitest-axe)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay