Testing Library ile Erişilebilir Komponent Testi

Erişilebilirlik testleri çoğu ekipte hâlâ “sonra yaparız” listesinde bekliyor. Oysa Testing Library tam da bu noktada devreye giriyor ve sizi kullanıcı gibi düşünmeye zorluyor. Birkaç yıl önce müşteri desteğine gelen “buton tıklanamıyor” şikayetlerinin üçte birinin ekran okuyucu kullanan kullanıcılardan geldiğini fark ettiğimde, test yaklaşımımı kökten değiştirmek zorunda kaldım. Bu yazıda o süreçten öğrendiklerimi paylaşacağım.

Testing Library Neden Farklı?

Enzyme kullandıysanız muhtemelen şöyle testler yazdınız:

wrapper.find('.btn-primary').simulate('click');
expect(wrapper.state('isOpen')).toBe(true);

Bu test tamamen implementasyon detaylarına bağlı. CSS class değişti mi? Test kırılır. State yönetimini Redux’a taşıdınız mı? Test kırılır. Peki kullanıcı gerçekten o butona tıklayabiliyor mu? Hiçbir fikriniz yok.

Testing Library’nin felsefesi şu: “Testleriniz, yazılımınızın nasıl kullanıldığına ne kadar benzerse, o kadar güven verirler.” Bu prensip erişilebilirlik ile doğrudan örtüşüyor çünkü ekran okuyucu kullanan biri de getByRole, getByLabelText gibi sorgularla içeriğe ulaşıyor. Aynı şekilde siz de testlerinizde bu sorgularla elemanlara ulaşıyorsunuz.

Kurulum ve Temel Yapılandırma

React projesi için kurulum oldukça basit:

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

jest-dom paketini kurmak kritik çünkü toBeInTheDocument(), toBeVisible(), toHaveAccessibleName() gibi erişilebilirlik odaklı matchers burada tanımlı.

setupTests.js dosyanıza şunu ekleyin:

import '@testing-library/jest-dom';

Eğer Vitest kullanıyorsanız vitest.config.ts içinde:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['./src/setupTests.ts'],
    globals: true,
  },
});

ARIA Rolleri ile Sorgu Yazmak

Testing Library’de eleman bulmak için en güvenilir yöntem getByRole. Bu sorgu, HTML elementlerinin implicit ARIA rollerini kullanıyor. Yani elemanı otomatik olarak button rolüne sahip,