Cara Menguji Stoppropagation () di Perpustakaan Ujian React

Pengenalan: Ujian

dalam React stopPropagation()

dengan betul melaksanakan

adalah penting apabila berurusan dengan peristiwa klik bersarang di React. Bukannya mengesahkan panggilan langsung stopPropagation(), fokus pada ujian hasilnya: adakah acara menyebarkan atau tidak? stopPropagation()

Artikel ini membandingkan dua pendekatan:

✅ Menguji kesan

(penyebaran peristiwa). stopPropagation()

✅ Mengejar kaedah

. stopPropagation()

✅ Menentukan kaedah mana yang lebih baik dan bila menggunakan setiap.

Pendekatan Terbaik: Ujian Penyebaran Acara

Kesan Ujian Kaedah Optimal

dengan membungkus komponen dalam ibu bapa stopPropagation() dengan pengendali <div>. Kami kemudian menyemak sama ada peristiwa gelembung sehingga ibu bapa. onClick Contoh

: Mencegah penyebaran

<code class="language-javascript">import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { FormElementsList } from "@/components/FormElementsList";

it("prevents event propagation on click", async () => {
  const onOuterClick = jest.fn();

  render(
    <div onClick={onOuterClick}>
      <FormElementsList />
    </div>
  );

  const textInputElement = screen.getByText("Text Input");
  await userEvent.click(textInputElement);

  expect(onOuterClick).toHaveBeenCalledTimes(0); // Event propagation prevented
});</code>

Kenapa ini berfungsi:

ibu bapa
1. 's <div> handler () bertindak sebagai pendengar. onClick onOuterClick jika
berfungsi dengan betul dalam
2. , mengklik elemen tidak boleh mencetuskan stopPropagation(). FormElementsList onOuterClick
mengesahkan pencegahan acara yang berjaya.
3. expect(onOuterClick).toHaveBeenCalledTimes(0)
Alternatif: Mengejar

stopPropagation() Sebagai alternatif, anda boleh mengesahkan panggilan langsung

dengan mengejek acara dan menjejaki panggilan fungsi.

stopPropagation()

Contoh: mengejek

stopPropagation()

Kenapa ini berfungsi:

<code class="language-javascript">import { render, screen } from "@testing-library/react";
import { FormElementsList } from "@/components/FormElementsList";

it("calls stopPropagation() on click", async () => {
  render(<FormElementsList />);

  const textInputElement = screen.getByText("Text Input");

  const event = new MouseEvent("click", { bubbles: true });
  jest.spyOn(event, "stopPropagation");

  textInputElement.dispatchEvent(event);

  expect(event.stopPropagation).toHaveBeenCalled();
});</code>

memantau panggilan fungsi.

• jest.spyOn(event, "stopPropagation") secara manual mencetuskan klik.
• dispatchEvent(event) Memastikan
's pelaksanaan.
• expect(event.stopPropagation).toHaveBeenCalled() stopPropagation() memilih kaedah yang betul
kaedah pro cons Penyebaran acara ujian Menguji tingkah laku pengguna sebenar tidak secara langsung mengesahkan panggilan Mocking
secara langsung mengesahkan panggilan pelaksanaan ujian, bukan tingkah laku

Method	Pros	Cons
Testing Event Propagation	Tests actual user behavior	Doesn't directly confirm stopPropagation() call
Mocking stopPropagation()	Directly confirms stopPropagation() call	Tests implementation, not behavior

Cadangan
Mengutamakan ujian tingkah laku sebenar ke atas butiran pelaksanaan untuk pemeliharaan yang lebih baik. Kaedah penyebaran acara umumnya lebih disukai. Gunakan mengejek hanya apabila benar -benar diperlukan untuk mengesahkan panggilan khusus ke

. stopPropagation()

Atas ialah kandungan terperinci Cara Menguji Stoppropagation () di Perpustakaan Ujian React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!