Rédiger des tests pour Axe DevTools for Web pour JavaScript dans le navigateur

Écrire des tests avec Axe DevTools

Prérequis

Pour tester des pages avec Axe DevTools, vous devez d'abord l'avoir importé et initialisé dans votre projet. Si vous n'avez pas encore complété cette étape, consultez ce guide pour savoir comment le faire.

Ce guide montre aux utilisateurs comment intégrer cette bibliothèque Axe DevTools avec la bibliothèque de tests react

Avec l'outil importé et initialisé dans votre fichier de test, ajouter des tests pour l'accessibilité est aussi simple que cela. L'extrait ci-dessous est en JavaScript, et il se compile sans changement dans un fichier .tsx TypeScript ; la section Fichier d'exemple donne le test complet dans les deux langages.

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

Ce cas de test rend un composant à l'intérieur de l'outil de conteneur de la bibliothèque de tests React, puis Axe DevTools le scanne pour détecter les violations d'accessibilité. Cet exemple s'attend à zéro violation d'accessibilité de quelque nature que ce soit, mais cela peut être modifié selon les besoins de votre organisation. Pour en savoir plus sur l'utilisation des résultats des analyses, lisez le guide complet sur l'objet de résultats qui est retourné après une analyse.

Fichier Exemple

Ce fichier exemple utilisant Axe DevTools avec la bibliothèque de tests React devrait aider à contextualiser comment l'outil est utilisé. Le même test est montré en JavaScript et en TypeScript. L'API Axe DevTools est identique dans les deux ; la version TypeScript va dans un fichier .tsx et annote le conteneur ainsi que les résultats du scan.

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

Étapes suivantes

Maintenant que vous avez terminé avec succès une analyse d'accessibilité, vous êtes prêt à passer à des sujets d'analyse plus avancés comme génération de rapports et utilisation de l'objet de résultats.

Dépannage

Si vous rencontrez des difficultés pour obtenir les résultats des analyses, contactez directement votre représentant Deque, contactez-nous via notre assistance technique, ou envoyez-nous un email. Nous serons heureux de vous aider.