Scopri i segreti per creare componenti React accessibili con React Testing Library e Jest

Rendere i componenti accessibili garantisce che tutti gli utenti, inclusi quelli con disabilità, possano utilizzare l'applicazione in modo efficace ed equo. Usiamo React Testing Library e assicuriamoci che i componenti siano accessibili.

Componente da testare

Per prima cosa dobbiamo creare un componente da testare. Per questo esempio, creeremo un pulsante On/Off, che ogni volta che viene cliccato, si attiva e richiama il genitore, con una prop dal genitore che determina lo stato del pulsante.

import React from 'react';
import PropTypes from 'prop-types';

const A11yButtonComponent = ({ isOn = false, onClick= () => {} }) => {
  return (
    <div>
      <button aria-label={isOn ? 'Turn off' : 'Turn on'} onClick={onClick}>
        {isOn ? "ON": "OFF"}
      </button>
    </div>
  );
};

A11yButtonComponent.propTypes = {
  isOn: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
};

export default A11yButtonComponent;

Test di base: verificare che la funzionalità funzioni

Ora scriviamo un test di base utilizzando Jest e importando le funzioni dal framework React Testing Library.

import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import A11yButtonComponentfrom './a11y-button.component';

describe('A11yButtonComponent', () => {
  it('click button and fire parent callback', () => {
    const handleClickMock = jest.fn();
    render(<A11yButtonComponent isOn={true} onClick={handleClickMock} />);
    
    expect(handleClickMock).toBeCalledTimes(0);
    fireEvent.click(screen.getByRole('button'));
    expect(handleClickMock).toBeCalledTimes(1);
  });
});

Test A11y: assicurati che le etichette Aria siano accurate

Ora possiamo aggiungere test che assicurano che il nostro componente sia accessibile. Innanzitutto, controlliamo che le etichette aria esistano e corrispondano al contenuto del pulsante.

it('displays ON text and aria label when isOn is true', () => {
    const handleClickMock = jest.fn();
    render(<A11yButtonComponent isOn={true} onClick={handleClickMock} />);

    const button = screen.getByRole('button');
    expect(button).toHaveTextContent('ON');
    expect(button).toHaveAttribute('aria-label', 'Turn off');
  });

  it('displays OFF text and aria label when isOn is false', () => {
    const handleClickMock = jest.fn();
    render(<A11yButtonComponent isOn={false} onClick={handleClickMock} />);

    const button = screen.getByRole('button');
    expect(button).toHaveTextContent('OFF');
    expect(button).toHaveAttribute('aria-label', 'Turn on');
  });

Conclusione

È importante rendere accessibili le nostre applicazioni Web per garantire un accesso equo a tutti gli utenti, ma è anche un requisito legale in molti paesi e, in ultima analisi, porta a una migliore esperienza utente per tutti.

Buona fortuna e buona programmazione!

Questo articolo è stato creato con l'assistenza di ChatGPT, un modello di linguaggio sviluppato da OpenAI.

Altri contenuti su PlainEnglish.io .

Iscriviti alla nostra newsletter settimanale gratuita . Seguici su Twitter , LinkedIn , YouTube e Discord .

Ti interessa scalare l'avvio del tuo software ? Scopri Circuito .