酶不是通过属性找到组件的

Question

我有一个用酶测试的组件，看起来像下面这样：

<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“来查找所有的StyleButtons，但是我不能通过属性来查找，包括仅通过使用属性选择器本身。

我粘贴到那里的第一个代码块来自挂载RichTextEditor的调试输出，因此StyleButton肯定在那里。

有什么想法吗？

谢谢。

Answer 1

在文档中，没有将name of component与props混合使用的选项

• CSS Selectors
• Component Constructors
• Component显示名称
• 对象属性选择器

您可以使用findWhere

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

Answer 2

由于find返回另一个ReactWrapper，因此可以这样链接它们：mount(<RichTextEditor />).find({label:"UL"}).find(StyleButton)

注意:顺序很重要。

灵感来自@romanlv的评论，但我发现这个语法更清晰。

Answer 3

代码行挂载富文本编辑器！

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