Tests schrijven voor Axe DevTools for Web voor Browser JavaScript

Tests schrijven met Axe DevTools

Vereisten

Om pagina's te testen met Axe DevTools, moet het eerst geïmporteerd en geïnitialiseerd worden in je project. Als je deze stap nog niet hebt voltooid, bekijk deze gids om te zien hoe je dit doet.

Deze gids laat gebruikers zien hoe deze Axe DevTools-bibliotheek kan worden geïntegreerd met de react testing library

Met de tool geïmporteerd en geïnitialiseerd in je testbestand, is het toevoegen van tests voor toegankelijkheid zo eenvoudig als dit:

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

Deze testcase rendert een component binnen de container-utility van de react testing library, en vervolgens scant Axe DevTools het op toegankelijkheidsinbreuken. Dit voorbeeld verwacht geen enkele vorm van toegankelijkheidsinbreuken, maar dit kan worden aangepast aan de behoeften van je organisatie. Om meer te leren over hoe je de resultaten van de scans kunt gebruiken, lees de gids die volledig over het resultatenobject gaat die na een scan wordt geretourneerd.

Voorbeeldbestand

Dit voorbeeldbestand met Axe DevTools en de React testing library zou moeten helpen om te begrijpen hoe de tool wordt gebruikt.

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

Volgende Stappen

Nu je met succes een toegankelijkheidsscan hebt voltooid, ben je klaar om verder te gaan met meer geavanceerde scanthema's zoals rapporten genereren en het resultatenobject gebruiken.

Probleemoplossing

Als je problemen hebt met het verkrijgen van scanresultaten, neem dan direct contact op met je Deque-vertegenwoordiger, bereik ons via onze supportdesk, of stuur ons een e-mail. We helpen je graag verder.