whalabi whalabi - 1 year ago 110
React JSX Question

Enzyme is not finding component by props

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?


Answer Source

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')
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download