酶没有通过道具找到成分答案

【问题标题】：Enzyme is not finding component by props酶没有通过道具找到成分
【发布时间】：2017-04-08 03:37:05
【问题描述】：

我正在使用 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”找到所有样式按钮，但我无法通过属性找到，包括仅使用属性选择器。

我粘贴的第一个代码块来自安装 RichTextEditor 的调试输出，所以 StyleButton 肯定在那里。

有什么想法吗？

谢谢。

【问题讨论】：

标签： reactjs jsx enzyme

【解决方案1】：

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

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

【讨论】：

您还应该在示例中添加说明。

【解决方案2】：

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

注意：顺序很重要。

受到@romanlv 评论的启发，但我发现这种语法更清晰。

【讨论】：

【解决方案3】：

在文档中没有将 组件名称 与 props 混合的选项：

CSS 选择器
组件构造函数
组件显示名称
对象属性选择器

你可以使用findWhere:

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

【讨论】：

天哪，你是对的。我混淆了组件+属性的标签+属性css选择器。我以为我在其他源代码中看到了类似的东西，但事实并非如此。谢谢。
你可以结合find和findWhere：wrapper.find('StyleButton').findWhere(n => n.prop('label') === 'UL')
尝试了上面的评论，但没有像答案那样工作。