Heim >Web-Frontend >js-Tutorial >So testen Sie StopPropagation () in der React -Testbibliothek
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.
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
<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>
Warum dies funktioniert:
<div>
onClick
Handler (onOuterClick
) fungiert als Hörer. stopPropagation()
in FormElementsList
ordnungsgemäß funktioniert, sollte das Klicken auf ein Element nicht onOuterClick
. expect(onOuterClick).toHaveBeenCalledTimes(0)
bestätigt eine erfolgreiche Ereignisprävention. stopPropagation()
Alternativ können Sie den Aufruf von stopPropagation()
direkt überprüfen, indem Sie das Ereignis verspotteten und den Funktionsaufruf verfolgen.
Beispiel: Verspottung stopPropagation()
<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>
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()
. 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 |
Empfehlung stopPropagation()
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!