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. El fragmento siguiente es JavaScript y se compila sin cambios en un archivo .tsx de TypeScript; la sección Archivo de ejemplo proporciona la prueba completa en ambos lenguajes.

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 contenedor 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 su organización. Para ver más sobre cómo usar los resultados de los escaneos, lea la guía sobre el objeto de resultados que se devuelve después de un escaneo.

Archivo de Muestra

Este archivo de muestra utiliza Axe DevTools con la biblioteca de pruebas de React y debería ayudar a contextualizar cómo se usa la herramienta. La misma prueba se muestra en JavaScript y en TypeScript. La API de Axe DevTools es idéntica en ambos; la versión TypeScript se coloca en un archivo .tsx y anota el contenedor y los resultados del análisis.

JavaScript

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

TypeScript

import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import { AxeDevTools } from '@axe-devtools/browser';
import type { AxeResults } from 'axe-core';
import "babel-polyfill"

describe('Bad Component', () => {

  beforeEach((done: jest.DoneCallback) => {
    AxeDevTools.init('wcag2', () => {
      done();
    });
  });

   test('Component has no accessibility violations, w/ attest reporter', (done: jest.DoneCallback) => {
     const container: HTMLElement = render(<Badcomp></Badcomp>).container;
     AxeDevTools.run(container, (err, results: AxeResults) => {
        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.