Écrire des tests pour le navigateur JavaScript avec axe DevTools for Web

Écrire des tests avec axe DevTools

Prérequis

Afin de tester des pages avec axe DevTools, vous devez d'abord l'importer et l'initialiser dans votre projet. Si vous n'avez pas encore terminé cette étape, consultez ce guide pour savoir comment procéder.

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, l'ajout de tests d'accessibilité est aussi simple que ceci :

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 affiche un composant à l'intérieur de l'utilitaire de conteneur de la bibliothèque de tests React, puis axe DevTools l'analyse pour détecter les violations d'accessibilité. Cet exemple n'attend aucune violation d'accessibilité de quelque nature que ce soit, mais cela peut être modifié en fonction des besoins de votre organisation. Pour en savoir plus sur la façon d'utiliser les résultats des analyses, lisez le guide sur l'objet de résultats qui est renvoyé après une analyse.

Exemple de fichier

Cet exemple de fichier utilisant axe DevTools avec la bibliothèque de tests React devrait aider à contextualiser la manière dont l'outil est utilisé.

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

Prochaines étapes

Maintenant que vous avez terminé avec succès une analyse d'accessibilité, vous êtes prêt à passer à des sujets d'analyse plus avancés tels que 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 de l'analyse, contactez directement votre représentant Deque, contactez-nous via notre service d'assistance ou envoyez-nous un e-mail. Nous serons heureux de vous aider.