Enzyme is not finding component by props

Question

I've got a component I'm testing with Enzyme that looks like the following:

<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">
  // ...

I'm trying to detect the presence of the StyleButton component there like so:

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

But no components are returned. I can find all the StyleButtons by just searching for the string "StyleButton" but I can't find by property, including just by using the property selector on its own.

The first code block I pasted up there is from the debug output of mounting the RichTextEditor, so the StyleButton is definitely there.

Any ideas?

Thanks.

Answer 1

In the docs there is no option to mix name of component with props:

• CSS Selectors
• Component Constructors
• Component Display Name
• Object Property Selector

You can use findWhere:

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

Answer 2

Since find returns another ReactWrapper you could chain them that way: mount(<RichTextEditor />).find({label:"UL"}).find(StyleButton)

Note: the order matters.

Inspired by @romanlv's comment, but I find this syntax clearer.