Enzyme is not finding component by props

reactjs jsx enzyme
whalabi picture whalabi · Nov 24, 2016 · Viewed 13.5k times · Source

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

Lucas Katayama picture Lucas Katayama · Nov 24, 2016

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

Related questions

Render HTML string as real HTML in a React component

Here's what I tried and how it goes wrong. This works: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> This doesn't: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> The description property is just …

Read More
Console logging for react?

I'm super new to React and I'm trying to get it set up for Meteor and piecing stuff together from other sources too. One of these other sources set up console logging for the app, but I'm going the ES6/…

Read More
How to Call a Function inside a Render in React/Jsx

I want to call a function inside some embedded html. I tried the following but the function isn't called. Would this be the incorrect way of calling a function inside a render method? import React, { Component, PropTypes } from 'react'; export …

Read More