Frontend Academy · Ders

@testing-library/react: render userEvent

Bileşenleri benzetilmiş bir DOM'da oluşturun, role ve etiket metnine göre sorgulayın, kullanıcı etkileşimlerini userEvent ile tetikleyin ve görünür çıktıyı doğrulayın.

@testing-library/react: render userEvent, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Testing Library Felsefesi

@testing-library, kullanıcıların kullanıcı arayüzüyle etkileşim kurma biçimine benzeyen testleri teşvik eder. CSS sınıf adları veya bileşen iç yapısı gibi uygulama ayrıntıları yerine role, etikete ve metne göre sorgulama yapın.

Testing Library'yi Kurma

React için Testing Library'yi ve kullanıcı etkileşimi benzetimi için userEvent paketini kurun.

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

render() — Bileşen Bağlama

render(<Component />), bileşeni benzetilmiş bir DOM'a bağlar. Öğeleri bulmak için sorgu işlevleri döndürür.

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

test('renders button with label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Öğeleri Sorgulama

Sorguları şu sırayla tercih edin: getByRole (erişilebilir), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue. Var olmadığını test ederken queryBy* kullanın. Eş zamanlı olarak gelen öğeler için findBy* kullanın.

// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');

// For text content:
screen.getByText('Welcome!');

// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Async appearance:
await screen.findByText('Data loaded');

userEvent — Kullanıcı Eylemlerini Benzetme

userEvent, yazma, tıklama ve klavyeyle gezinme gibi gerçek kullanıcı etkileşimlerini benzetir. Eski fireEvent'ten daha gerçekçidir.

import userEvent from '@testing-library/user-event';

test('typing in input', async () => {
  const user = userEvent.setup();
  render(<SearchInput />);

  const input = screen.getByRole('textbox', { name: /search/i });
  await user.type(input, 'react hooks');

  expect(input).toHaveValue('react hooks');
});

Form Gönderimini Test Etme

Form alanlarını doldurun ve gönderin. Sonucu, yani gönderimden sonra kullanıcının gördüklerini doğrulayın.

test('submitting the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.type(screen.getByLabelText('Password'), 'secret123');
  await user.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

jest-dom Özel Eşleştiricileri

@testing-library/jest-dom şu yararlı eşleştiricileri ekler: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass(), toHaveFocus().

Eş Zamanlı Bileşen Güncellemelerini Test Etme

Eş zamanlı olarak görünen öğeler için waitFor() veya findBy* kullanın (bir getirme işleminden ya da zaman aşımından sonra).

test('shows data after loading', async () => {
  render(<UserList />);

  expect(screen.getByRole('status')).toHaveTextContent('Loading');

  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

Yükleme ve Hata Durumlarını Test Etme

Farklı durumları test etmek için fetch yanıtını taklit edin. MSW (Mock Service Worker), testlerde API yanıtlarını taklit etmek için en iyi araçtır.

Erişilebilirlik Testleri

Testing Library doğal olarak erişilebilirliği teşvik eder; bir öğeyi role veya etikete göre sorgulayamıyorsanız, bu öğenin erişilebilir olma ihtimali düşüktür. Testlerde otomatik erişilebilirlik denetimleri için jest-axe kullanın.

Uygulama Ayrıntılarını Test Etmeyin

Şunlardan kaçının: CSS sınıf adlarına göre sorgulama yapmak, bileşenin iç durumunu içe aktarmak ve belirli yöntemlerin çağrıldığını test etmek. Davranışı kullanıcının bakış açısından test edin: kullanıcının ne gördüğünü ve etkileşim kurduğunda ne olduğunu denetleyin.

Hızlı Kontrol

Etkileşimli öğeleri bulmak için hangi Testing Library sorgu işlevi tercih edilmelidir?

Özet: @testing-library/react

render(), bileşenleri benzetilmiş bir DOM'a bağlar. Uygulama ayrıntıları yerine role, etikete ve metne göre sorgulama yapın. Gerçekçi kullanıcı etkileşimleri için userEvent.setup() kullanın. Eş zamanlı öğeler için findBy* kullanın. Okunabilir doğrulamalar için jest-dom kullanın. Testleri kullanıcının bakış açısından yapın: kullanıcının ne gördüğünü ve ne yaptığını denetleyin. Erişilebilir bileşenlerin test edilmesi daha kolaydır.

Sıkça Sorulan Sorular

“@testing-library/react: render userEvent” dersi ücretsiz mi?

Evet — “@testing-library/react: render userEvent” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“@testing-library/react: render userEvent” dersinde ne öğreneceğim?

Bileşenleri benzetilmiş bir DOM'da oluşturun, role ve etiket metnine göre sorgulayın, kullanıcı etkileşimlerini userEvent ile tetikleyin ve görünür çıktıyı doğrulayın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“@testing-library/react: render userEvent” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Jest Kurulumu ve Temel Testler
@testing-library/react: render userEvent
@testing-library/vue: bileşenleri bağlama
Modülleri ve API Çağrılarını Taklit Etme

← Frontend Academy Sayfasına Dön