Kategoria:React

React Testing Library - testy accessibility

Testować accessibility możemy różnymi narzędziami i na różne sposoby... Warto wspomnieć o świetnych pluginach do ESlinta i Cypressa. Dzisiaj jednak na tapet bierzemy testy dostępności skupione na zakresie komponentu z pomocą biblioteki jest-axe.

W pierwszej kolejności tworzymy komponent Image:

type ImageProps = {
  accessible?: boolean;
};

export const Image = ({ accessible }: ImageProps) => {
  return <img src="/" alt={accessible ? 'alt' : undefined} />;
};

W zależności od przekazywanego propsa, Image będzie lub nie będzie "dostępny" (nie róbcie tego w domu 😬). W naszych testach chcemy to sprawdzić:

import { render, screen } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
import { Image } from './Image';

expect.extend(toHaveNoViolations);

describe('Image', () => {
  it('fails when the component is not accessible', async () => {
    const { container } = render(<Image accessible={false} />);
    const results = await axe(container);

    expect(results).not.toHaveNoViolations();
  });

  it('should have no violations when the component is accessible', async () => {
    const { container } = render(<Image accessible={true} />);
    const results = await axe(container);

    expect(results).toHaveNoViolations();
  });
});

Z biblioteki odpowiednio wyciągamy funkcję axe, która jest silnikiem sprawdzającym oraz matcher toHaveNoViolations.

To co jest naprawdę świetne to informacje o błędach podczas gdy nasz test nie przejdzie. Dostajemy szczegółowy opis czego dotyczy błąd oraz jak go naprawić:

Informacje w konsoli o błędzie wraz z instrukcjami jak ten błąd naprawić

Podsumowanie

Warto dodać, że takie testy nie gwarantują nam, że nasz komponent będzie w pełni dostępny, mogą jednak wskazać istotne problemy na poziomie samych testów. Jeśli chcesz się dowiedzieć więcej o testowaniu dostępności, to polecam sprawdzić dedykowany wpis na ten temat 🤩

Cały kod z dzisiejszego wpisu dostępny jest w repozytorium na GitHubie.

Do usłyszenia!