22

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.

3 Answers 3

35

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')
3
  • Oh man, you're right. I confused the tag + property css selector for component + property. I thought I saw similar in other source code but it wasn't quite that. Thanks.
    – whalabi
    Commented Nov 24, 2016 at 4:28
  • 8
    you can combine find and findWhere: wrapper.find('StyleButton').findWhere(n => n.prop('label') === 'UL')
    – romanlv
    Commented Mar 15, 2017 at 13:59
  • Tried the above comment but didn't work like the answer does.
    – Batman
    Commented Jan 19, 2020 at 0:40
4

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.

2

Line of code to mount rich text editor!

mount(<RichTextEditor />).find('StyleButton').find('[label="UL"]');
1
  • You should also add an explanation with your example.
    – Ed Lucas
    Commented Mar 5, 2020 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.