Test whether React component has rendered
<p>I have a React component that I am trying to test using Enzyme/Jest. I am trying to figure out what the most appropriate test would be to ensure the component has rendered.</p>

<p>My component has a prop <code>shouldRender</code> that, if false, will cause the component to not render. My component looks like this:</p>

<pre><code>import React from 'react';

const propTypes = {
  shouldRender: React.PropTypes.bool,
};

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      foo: 'bar',
    };
  }

  render() {
    if (!this.props.shouldRender) {
      return null;
    }

    return (
      &lt;div&gt;
        &lt;span&gt;My component&lt;/span&gt;
      &lt;/div&gt;
    );
  }
}

MyComponent.propTypes = propTypes;

export default MyComponent;
</code></pre>

<p>I have a test that looks like this:</p>

<pre><code>import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../MyComponent';

describe('MyComponent', () =&gt; {
  it('Should render if we want it to', () =&gt; {
    const component = shallow(&lt;MyComponent shouldRender /&gt;);

    expect(component).toBeDefined(); // Passes
  });

  it('Should not render if we do not want it to', () =&gt; {
    const component = shallow(&lt;MyComponent /&gt;);

    expect(component).not.toBeDefined(); // Does not pass, as component isn't undefined.
  });
});
</code></pre>

<p>I'd like the second test to fail, as the component isn't rendering. Is there a better way to go about testing whether or not a component has rendered?</p>

<p>Happy to provide any more information if it is needed.</p>

<p>Thanks!</p>