7
votes

Comment trouver un élément par son texte dans Enzyme?

J'ai plusieurs boutons sur ma page:

const action2Button = wrapper.find('button[children="Action 2"]');
expect(action2Button).toHaveLength(1);
action2Button.simulate('click');

Comment puis-je sélectionner le bouton «Action 2» par son texte , pour pouvoir cliquer dessus? Je sais qu'il peut y avoir d'autres façons de sélectionner ce bouton, mais je cherche spécifiquement la meilleure façon de sélectionner un élément par son texte .

Une façon que j'ai trouvée est illustrée ci-dessous. Y a-t-il un meilleur moyen?

<div>
    <h1>Home</h1>
    <button>Action 1</button>
    <button>Action 2</button>
</div>

enzyme

0 commentaires

3 Réponses :

3
votes

Le meilleur moyen que je puisse trouver pour le faire, jusqu'à présent, est le suivant:

const button = wrapper.findWhere(node => {
  return (
    node.type() &&
    node.name() &&
    node.text() === "Action 2"
  );
});

Il doit y avoir un nom et un type pour éviter de trouver un nœud de texte.

Je suis sûr qu'il doit y avoir une meilleure façon de faire cela.

Mise à jour: je ne sais pas si Enzyme a changé depuis que j'ai répondu à cela. Je vois que vous pouvez maintenant éviter un nœud de texte en vérifiant que node.type() n'est pas indéfini. Je ne sais pas comment vous éviteriez un nœud parent avec le même texte.

0 commentaires

-1
votes

La réponse acceptée n'a pas fonctionné pour moi parce que node.children().length renvoie 1, ce que je suppose, c'est parce que c'est un nœud de texte, car node.children()[0] n'est pas défini. ðŸ¤ · â € â ™ ‚ï¸

const button = wrapper.findWhere(node => (
  node.name() === 'button'
  && node.children().length === 1
  && node.children()[0] === undefined
  && node.text() === 'Action 2'
));

0 commentaires

0
votes

La réponse acceptée n'a pas fonctionné non plus pour moi - il semble qu'au moins le type devrait être spécifié dans la déclaration de prédicat.

Donc, le suivant fonctionne pour moi:

const button = wrapper.findWhere(node => {
  return node.type() === 'button' && node.text() === "Action 2";
});

Mais je ne suis pas sûr que cette solution soit meilleure que celle initialement proposée par l'auteur.

0 commentaires