Comment tester stopPropagation () dans la bibliothèque de tests React

Introduction: test stopPropagation() dans React

La mise en œuvre correcte stopPropagation() est vitale lorsque vous traitez des événements de clic imbriqués dans React. Au lieu de vérifier directement l'appel de stopPropagation(), concentrez-vous sur le test de son résultat: l'événement se propage ou non?

Cet article compare deux approches:

✅ Tester l'effet de stopPropagation() (propagation des événements).

✅ se moquant de la méthode stopPropagation().

✅ Déterminer quelle méthode est supérieure et quand utiliser chacun.

Meilleure approche: test de propagation des événements

La méthode optimale teste l'effet de stopPropagation() en enroulant le composant dans un parent <div> avec un gestionnaire onClick. Nous vérifions ensuite si l'événement bouillonne au parent.

Exemple: Empêcher la propagation

<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>

Pourquoi cela fonctionne:

1. le gestionnaire de parent <div> onClick (onOuterClick) agit comme un auditeur.
2. Si stopPropagation() fonctionne correctement dans FormElementsList, cliquer sur un élément ne doit pas déclencher onOuterClick.
3. expect(onOuterClick).toHaveBeenCalledTimes(0) confirme la prévention réussie des événements.

Alternative: moquerie stopPropagation()

Alternativement, vous pouvez dire directement l'appel de stopPropagation() en se moquant de l'événement et en suivant l'appel de la fonction.

Exemple: moqueur 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>

Pourquoi cela fonctionne:

• jest.spyOn(event, "stopPropagation") surveille l'appel de la fonction.
• dispatchEvent(event) déclenche manuellement le clic.
• expect(event.stopPropagation).toHaveBeenCalled() assure l'exécution de stopPropagation().

Choisir la bonne méthode

Méthode PROS TH> contre Test de propagation des événements teste le comportement réel de l'utilisateur ne confirme pas directement

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

appel Mocking

confirme directement appel teste l'implémentation, pas le comportement table>

Recommandation stopPropagation()

Prioriser les tests de comportement réel sur les détails de la mise en œuvre pour une meilleure maintenabilité. La méthode de propagation des événements est généralement préférée. Utilisez la moquerie uniquement lorsque vous avez absolument nécessaire pour vérifier l'appel spécifique à .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!