Question

我有一个我正在使用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绝对存在。

有什么想法吗？

感谢。

Answer 1

在文档中，没有选项可以将组件名称与道具混合使用：

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

您可以使用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

用于安装RTF编辑器的代码行！

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

酶不是通过道具找到成分

3 个答案: