Scrivi test per axe DevTools per Web per browser JavaScript

Scrittura di test con axe DevTools

Prerequisiti

Per testare le pagine con axe DevTools, è necessario prima importarlo e inizializzarlo nel progetto. Se non hai ancora completato questo passaggio, consulta questa guida per sapere come farlo.

Questa guida mostra agli utenti come integrare questa libreria axe DevTools con la libreria di test React

Una volta importato e inizializzato lo strumento nel file di test, aggiungere test per l'accessibilità è semplice come segue:

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

Questo caso di test esegue il rendering di un componente all'interno dell'utilità contenitore della libreria di test React, quindi axe DevTools lo analizza per individuare violazioni di accessibilità. In questo esempio non sono previste violazioni dell'accessibilità di alcun tipo, ma è possibile modificarlo in base alle esigenze della propria organizzazione. Per saperne di più su come utilizzare i risultati delle scansioni, leggi la guida completa sull'oggetto risultati restituito dopo una scansione.

File di esempio

Questo file di esempio che utilizza axe DevTools con la libreria di test React dovrebbe aiutare a contestualizzare il modo in cui viene utilizzato lo strumento.

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

Prossimi passi

Ora che hai completato con successo una scansione di accessibilità, sei pronto a passare ad argomenti di scansione più avanzati come generazione di report e utilizzo dell'oggetto risultati.

Risoluzione dei problemi

In caso di problemi con l'ottenimento dei risultati della scansione, contattare direttamente il rappresentante Deque, contattarci tramite il nostro support desk o inviarci un'e-mail. Saremo lieti di aiutarti.