DEV Community

Abdulqudus Abubakre
Abdulqudus Abubakre

Posted on

26 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 AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (1)

Collapse
 
g1itcher profile image
G1itcher

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

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay