Escribir pruebas para Axe DevTools para Web para JavaScript en el navegador

Escribir pruebas con Axe DevTools

Requisitos previos

Para probar páginas con Axe DevTools, primero necesitas importarlo e inicializarlo en tu proyecto. Si no has completado este paso aún, consulta esta guía para saber cómo hacerlo.

Esta guía muestra a los usuarios cómo integrar esta librería de Axe DevTools con la biblioteca de pruebas de React

Con la herramienta importada e inicializada en tu archivo de pruebas, añadir pruebas de accesibilidad es tan simple como esto:

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 prueba renderiza un componente dentro de la utilidad de contenedores de la biblioteca de pruebas de React, y luego Axe DevTools lo escanea en busca de violaciones de accesibilidad. Este ejemplo espera cero violaciones de accesibilidad de cualquier tipo, pero esto se puede modificar según las necesidades de tu organización. Para saber más sobre cómo utilizar los resultados de los análisis, lee la guía sobre el objeto de resultados que se devuelve después de un análisis.

Archivo de ejemplo

Este archivo de ejemplo que usa Axe DevTools con la biblioteca de pruebas de React debería ayudar a contextualizar cómo se utiliza la herramienta.

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 pasos

Ahora que has completado con éxito un análisis de accesibilidad, estás listo para avanzar a temas de escaneo más avanzados como generación de informes y uso del objeto de resultados.

Solución de problemas

Si tienes problemas para obtener resultados de escaneo, contacta directamente a tu representante de Deque, comunícate con nosotros a través de nuestra mesa de ayuda, o envíanos un correo electrónico. Estaremos encantados de ayudarte.