Frontend Academy · Pelajaran

@testing-library/react: render userEvent

Paparkan komponen dalam DOM simulasi, buat pertanyaan mengikut peranan dan teks label, cetuskan interaksi pengguna dengan userEvent, dan tegaskan output yang kelihatan.

Pelajaran 2 daripada 413 langkah

@testing-library/react: render userEvent ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Falsafah Testing Library

@testing-library menggalakkan ujian yang menyerupai cara pengguna berinteraksi dengan antara muka. Buat pertanyaan mengikut peranan, label dan teks — bukan mengikut butiran pelaksanaan seperti nama kelas CSS atau dalaman komponen.

Memasang Testing Library

Pasang Testing Library untuk React dan pakej userEvent untuk mensimulasikan interaksi pengguna.

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

render() — Lekapkan Komponen

render(<Component />) melekapkan komponen dalam DOM simulasi. Ia memulangkan fungsi pertanyaan untuk mencari elemen.

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

Membuat Pertanyaan Elemen

Utamakan pertanyaan mengikut susunan ini: getByRole (boleh dicapai), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue. Gunakan queryBy* apabila menguji ketidak wujudan. Gunakan findBy* untuk elemen tak segerak.

// 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 — Mensimulasikan Tindakan Pengguna

userEvent mensimulasikan interaksi pengguna sebenar: menaip, mengklik dan navigasi papan kekunci. Ia lebih realistik berbanding fireEvent yang lebih lama.

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

Menguji Penghantaran Borang

Isi medan borang dan hantar borang. Buat penegasan terhadap hasilnya — perkara yang dilihat pengguna selepas penghantaran.

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

Pemadan Tersuai jest-dom

@testing-library/jest-dom menambahkan pemadan berguna: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass(), toHaveFocus().

Menguji Kemas Kini Komponen Tak Segerak

Gunakan waitFor() atau pertanyaan findBy* untuk elemen yang muncul secara tak segerak (selepas fetch, selepas tamat masa).

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

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

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

Menguji Keadaan Pemuatan dan Ralat

Mock respons fetch untuk menguji keadaan yang berbeza. MSW (Mock Service Worker) ialah alat terbaik untuk membuat mock respons API dalam ujian.

Pengujian Kebolehcapaian

Testing Library secara semula jadi menggalakkan kebolehcapaian — jika anda tidak boleh membuat pertanyaan terhadap elemen mengikut peranan atau label, elemen itu mungkin tidak boleh dicapai. Gunakan jest-axe untuk audit kebolehcapaian automatik dalam ujian.

Jangan Uji Butiran Pelaksanaan

Elakkan: membuat pertanyaan mengikut nama kelas CSS, mengimport keadaan dalaman komponen dan menguji bahawa kaedah tertentu telah dipanggil. Uji tingkah laku dari perspektif pengguna: perkara yang dilihat pengguna dan perkara yang berlaku apabila mereka berinteraksi.

Semakan Pantas

Apakah fungsi pertanyaan Testing Library yang patut diutamakan untuk mencari elemen interaktif?

Jawab dalam pelajaran interaktif

Imbas Kembali: @testing-library/react

render() melekapkan komponen dalam DOM simulasi. Buat pertanyaan mengikut peranan, label dan teks — bukan butiran pelaksanaan. userEvent.setup() untuk interaksi pengguna yang realistik. findBy* untuk elemen tak segerak. jest-dom untuk penegasan yang mudah dibaca. Uji dari perspektif pengguna: perkara yang dilihat dan dilakukan oleh mereka. Komponen yang boleh dicapai lebih mudah diuji.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “@testing-library/react: render userEvent” percuma?

Ya — teks penuh “@testing-library/react: render userEvent” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “@testing-library/react: render userEvent”?

Paparkan komponen dalam DOM simulasi, buat pertanyaan mengikut peranan dan teks label, cetuskan interaksi pengguna dengan userEvent, dan tegaskan output yang kelihatan. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “@testing-library/react: render userEvent” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Persediaan Jest dan Ujian Asas
@testing-library/react: render userEvent
@testing-library/vue: memasang komponen
Memalsukan Modul dan Panggilan API

← Kembali ke Frontend Academy