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?

Thanks.

回答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')

回答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.

回答3:

Line of code to mount rich text editor!

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

来源：https://stackoverflow.com/questions/40776121/enzyme-is-not-finding-component-by-props

标签

reactjs

jsx

enzyme