酶没有通过props找到成分

IT技术 reactjs jsx enzyme
2021-05-19 03:01:55

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

有任何想法吗?

谢谢。

3个回答

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

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

您可以使用findWhere

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

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

注意:顺序很重要。

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

一行代码挂载富文本编辑器!

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