酶没有通过 props 找到组件
Enzyme is not finding component by props
我有一个正在使用 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" 找到所有 StyleButtons,但我无法通过 属性 找到,包括仅使用 属性 选择器本身。
我粘贴的第一个代码块来自安装 RichTextEditor 的调试输出,所以 StyleButton 肯定在那里。
有什么想法吗?
谢谢。
在文档中没有将 name of component 与 props:
混合的选项
- CSS 选择器
- 组件构造函数
- 组件显示名称
- 对象属性选择器
您可以使用 findWhere:
wrapper.findWhere(n => n.name() === 'StyleButton' && n.prop('label') === 'UL')
因为 find
returns 另一个 ReactWrapper
你可以这样链接它们:
mount(<RichTextEditor />).find({label:"UL"}).find(StyleButton)
注意:顺序很重要。
受@romanlv 的评论启发,但我发现这种语法更清晰。
安装富文本编辑器的代码行!
mount(<RichTextEditor />).find('StyleButton').find('[label="UL"]');
我有一个正在使用 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" 找到所有 StyleButtons,但我无法通过 属性 找到,包括仅使用 属性 选择器本身。
我粘贴的第一个代码块来自安装 RichTextEditor 的调试输出,所以 StyleButton 肯定在那里。
有什么想法吗?
谢谢。
在文档中没有将 name of component 与 props:
混合的选项- CSS 选择器
- 组件构造函数
- 组件显示名称
- 对象属性选择器
您可以使用 findWhere:
wrapper.findWhere(n => n.name() === 'StyleButton' && n.prop('label') === 'UL')
因为 find
returns 另一个 ReactWrapper
你可以这样链接它们:
mount(<RichTextEditor />).find({label:"UL"}).find(StyleButton)
注意:顺序很重要。
受@romanlv 的评论启发,但我发现这种语法更清晰。
安装富文本编辑器的代码行!
mount(<RichTextEditor />).find('StyleButton').find('[label="UL"]');