Write Tests for Axe DevTools for Web for Browser JavaScript

Writing tests with Axe DevTools

Prerequisites

In order to import and initialize Axe DevTools for Web, it needs to be installed first. If you haven't yet, read the guide on how to install it from your artifact repository, or from Deque's Agora.

Importing and Initializing

The browser package is meant to run inside a bundled test suite, so it is imported with ES module syntax in both JavaScript and TypeScript. @axe-devtools/browser ships its own type declarations, so there is no separate @types/ package to install.

JavaScript

import { AxeDevTools } from '@axe-devtools/browser';

TypeScript

The import statement is the same. Add the AxeResults type from axe-core when you want to annotate the results a scan returns:

import { AxeDevTools } from '@axe-devtools/browser';
import type { AxeResults } from 'axe-core';

Initializing

Once you've imported the browser package, initialize it with the ruleset you want to test against. The statement is the same in both languages:

AxeDevTools.init('wcag2');

The ruleset argument is required, and TypeScript checks it against the supported ruleset ids: wcag2, wcag21, wcag22, wcag2aaa, wcag21aaa, wcag22aaa, 508, en301549, ttv5, and rgaav4.

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.