Write Tests for Axe DevTools for Web 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. The snippet below is JavaScript, and it compiles unchanged in a TypeScript .tsx file; the Sample File section gives the full test in both languages.

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 organization'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. The same test is shown in JavaScript and in TypeScript. The Axe DevTools API is identical in both; the TypeScript version goes in a .tsx file and annotates the container and the scan results.

JavaScript

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();
     });
   });
});

TypeScript

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

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

  beforeEach((done: jest.DoneCallback) => {
    AxeDevTools.init('wcag2', () => {
      done();
    });
  });

   test('Component has no accessibility violations, w/ attest reporter', (done: jest.DoneCallback) => {
     const container: HTMLElement = render(<Badcomp></Badcomp>).container;
     AxeDevTools.run(container, (err, results: AxeResults) => {
        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.