So testen Sie StopPropagation () in der React -Testbibliothek

Einführung: Testen stopPropagation() in React

korrekt implementiert stopPropagation() ist von entscheidender Bedeutung, wenn es sich um verschachtelte Klickereignisse in React befasst. Konzentrieren Sie sich auf das Testen seines Ergebniss anstatt den Aufruf von stopPropagation() direkt zu überprüfen: Verbreitet sich das Ereignis oder nicht?

Dieser Artikel vergleicht zwei Ansätze:

✅ Testen Sie den Effekt von stopPropagation() (Ereignisausbreitung).

✅ verspotten die stopPropagation() -Methode.

✅ zu bestimmen, welche Methode überlegen ist und wann sie jeweils verwendet werden.

Bester Ansatz: Testen der Ereignisausbreitung

Der Effekt des optimalen Methode testet stopPropagation(), indem die Komponente in ein übergeordnetes <div> mit einem onClick -Handler gepackt wird. Wir prüfen dann, ob die Ereignis an den Elternteil blüht.

Beispiel: Verhinderung der Ausbreitung

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

Warum dies funktioniert:

1. Das übergeordnete <div> onClick Handler (onOuterClick) fungiert als Hörer.
2. Wenn stopPropagation() in FormElementsList ordnungsgemäß funktioniert, sollte das Klicken auf ein Element nicht onOuterClick.
auslösen
3. expect(onOuterClick).toHaveBeenCalledTimes(0) bestätigt eine erfolgreiche Ereignisprävention.

Alternative: Mocking stopPropagation()

Alternativ können Sie den Aufruf von stopPropagation() direkt überprüfen, indem Sie das Ereignis verspotteten und den Funktionsaufruf verfolgen.

Beispiel: Verspottung stopPropagation()

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

Warum dies funktioniert:

• jest.spyOn(event, "stopPropagation") überwacht den Funktionsaufruf.
• dispatchEvent(event) löst den Klick manuell aus.
• expect(event.stopPropagation).toHaveBeenCalled() sorgt für die Ausführung von stopPropagation().

die richtige Methode auswählen

Methode pros cons Test Ereignisausbreitung testet das tatsächliche Benutzerverhalten bestätigt nicht direkt

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

call Spott

bestätigt direkt call Tests Implementierung, nicht Verhalten

Empfehlung stopPropagation()

Priorisieren Sie das Testen des realen Verhaltens gegenüber Implementierungsdetails, um eine bessere Wartbarkeit zu erhalten. Die Ereignisausbreitungsmethode wird im Allgemeinen bevorzugt. Verwenden Sie das Verspotten nur, wenn Sie unbedingt den spezifischen Aufruf nach überprüfen müssen.

Das obige ist der detaillierte Inhalt vonSo testen Sie StopPropagation () in der React -Testbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!