title: Test whether React component has rendered
body: <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>