Write Tests for axe DevTools HTML for Browser JavaScript

Writing tests with axe DevTools

Prerequisites

In order to test pages with axe DevTools, you first need it imported and initialized in your project. If you haven't completed this step yet, view this guide on how to do it.

This guide shows users how to integrate this axe DevTools library with the react testing library

With the tool imported and initialized into your testing file, adding tests for accessibility is as simple as this:

test('Component has no accessibility violations', () => {
 const {container} = render(<Badcomp></Badcomp>);
 axeDevTools.run(container, (err, results) => {
    expect(results.violations.length).toBe(0);
    done();
 });
});

This test case renders a component inside react testing library's container utility, and then axe DevTools scans it for accessibility violations. This example expects zero accessibility violations of any kind, but this can be modified for your orgainization's needs. To see more on how to use the results of the scans, read the guide all about the results object that is returned after a scan.

Sample File

This sample file using axe DevTools with the React testing library should help contextualize how the tool is used.

import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import axeDevTools from '@axe-devtools/browser';
import "babel-polyfill"

describe('Bad Component', () => {

  beforeEach(function(done) {
    axeDevTools.init('wcag2', function() {
      done();
    });
  });

   test('Component has no accessibility violations, w/ attest reporter', (done) => {
     const {container} = render(<Badcomp></Badcomp>);
     axeDevTools.run(container, (err, results) => {
        expect(results.violations.length).toBe(0);
        done();
     });
   });
});

Next Steps

Now that you've successfully completed an accessibility scan, you're ready to move on to more advanced scanning topics like generating reports and using the results object.

Troubleshooting

If you have trouble with getting scan results, contact your Deque representative directly, reach us via our support desk, or send us an email. We'll be happy to help.