web-dev-qa-db-ja.com

酵素は小道具によってコンポーネントを見つけていません

Enzymeでテストしているコンポーネントは次のようになっています。

<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">
  // ...

私はそこでStyleButtonコンポーネントの存在を検出しようとしています：

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

ただし、コンポーネントは返されません。文字列 "StyleButton"を検索するだけですべてのStyleButtonを見つけることができますが、プロパティセレクターを単独で使用するなど、プロパティで見つけることはできません。

私がそこに貼り付けた最初のコードブロックは、RichTextEditorのマウントのデバッグ出力からのものなので、StyleButtonは間違いなくそこにあります。

何か案は？

ありがとう。

reactjsjsxenzyme
14
whalabi

ドキュメントでは、コンポーネントの名前とpropsを混合するオプションはありません：

  • CSSセレクター
  • コンポーネントコンストラクタ
  • コンポーネント表示名
  • オブジェクトプロパティセレクター

findWhere を使用できます。

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

リッチテキストエディターをマウントするコード行！

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

findは別のReactWrapperを返すので、それらをそのようにチェーンできます：mount(<RichTextEditor />).find({label:"UL"}).find(StyleButton)

注：順序は重要です。

@romanlvのコメントに触発されましたが、この構文はより明確です。

0
TMG