web-dev-qa-db-fra.com

L'enzyme ne trouve pas de composant par les accessoires

J'ai un composant que je teste avec Enzyme qui ressemble à ceci:

<RichTextEditor name="name" onChange={[Function]} value="<p>what</p>" focus={false}>
  <div className="rich-text-editor">
  <div className="btn-group" role="group">
  <StyleButton active={false} icon="fa-list-ul" label="UL" onToggle={[Function]} style="unordered-list-item">
  // ...

J'essaie de détecter la présence du composant StyleButton comme ceci:

mount(<RichTextEditor />).find('StyleButton[label="UL"]')

Mais aucun composant n'est retourné. Je peux trouver tous les StyleButtons en recherchant simplement la chaîne "StyleButton" mais je ne peux pas trouver par propriété, y compris en utilisant le sélecteur de propriété seul.

Le premier bloc de code que j'ai collé là-haut provient de la sortie de débogage du montage du RichTextEditor, donc le StyleButton est définitivement là.

Des idées?

Merci.

reactjsjsxenzyme
14
whalabi

Dans la documentation, il n'y a pas d'option pour mélanger le nom du composant avec les accessoires :

  • Sélecteurs CSS
  • Constructeurs de composants
  • Nom d'affichage du composant
  • Sélecteur de propriétés d'objet

Vous pouvez utiliser findWhere :

 wrapper.findWhere(n => n.name() === 'StyleButton' && n.prop('label') === 'UL')
22
Lucas Katayama

Ligne de code pour monter un éditeur de texte riche!

mount(<RichTextEditor />).find('StyleButton').find('[label="UL"]');
0
A.Syvoplias

Puisque find renvoie un autre ReactWrapper vous pouvez les enchaîner de cette façon: mount(<RichTextEditor />).find({label:"UL"}).find(StyleButton)

Remarque: l'ordre est important.

Inspiré par le commentaire de @ romanlv, mais je trouve cette syntaxe plus claire.

0
TMG