Escrever Testes para Axe DevTools para Web para JavaScript de Navegador

Escrevendo testes com Axe DevTools

Pré-requisitos

Para testar páginas com Axe DevTools, você primeiro precisa importá-lo e inicializá-lo em seu projeto. Se ainda não completou esta etapa, consulte este guia para saber como fazê-lo.

Este guia mostra aos usuários como integrar esta biblioteca Axe DevTools com a react testing library

Com a ferramenta importada e inicializada em seu arquivo de teste, adicionar testes para acessibilidade é tão simples quanto isso:

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

Este caso de teste renderiza um componente dentro do utilitário de contêiner da react testing library, e então o Axe DevTools o escaneia em busca de violações de acessibilidade. Este exemplo espera zero violações de acessibilidade de qualquer tipo, mas isso pode ser modificado para as necessidades da sua organização. Para ver mais sobre como usar os resultados das varreduras, leia o guia todo sobre o objeto de resultados que é retornado após uma varredura.

Arquivo Exemplo

Este arquivo exemplo usando Axe DevTools com a react testing library deve ajudar a contextualizar como a ferramenta é utilizada.

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

Próximos Passos

Agora que você completou com sucesso uma varredura de acessibilidade, está pronto para avançar para tópicos de varredura mais avançados, como gerando relatórios e usando o objeto de resultados.

Resolução de Problemas

Se você tiver problemas para obter resultados de varredura, entre em contato com seu representante Deque diretamente, ou nos alcance através do nosso suporte técnico, ou envie-nos um e-mail. Ficaremos felizes em ajudar.