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 d'accessibilité est aussi simple que cela :

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'utilitaire de conteneur de la bibliothèque de tests react, puis Axe DevTools le scanne pour détecter les violations d'accessibilité. Cet exemple prévoit zéro violation d'accessibilité de quelque sorte que ce soit, mais cela peut être modifié en fonction des besoins de votre organisation. Pour voir comment utiliser les résultats des scans, lisez le guide sur l'objet de résultats qui est retourné après un scan.

Fichier d'exemple

Ce fichier d'exemple utilisant Axe DevTools avec la bibliothèque de tests React devrait aider à contextualiser l'utilisation de l'outil.

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

É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.