title: React & Jest, how to test changing state and checking for another component
body: <p><a href="https://facebook.github.io/react/docs/test-utils.html" rel="noreferrer">React - Test Utilities Docs</a></p>
  
  <p>I have a <strong>Login</strong> component which will display a <strong>Notification</strong> component if <code>this.state.error</code> is true.</p>
  
  <p>I'm now writing a Jest test to test this.</p>
  
  <pre><code>import React from 'react'
  import ReactTestUtils from 'react-dom/test-utils';
  import { shallow } from 'enzyme'
  import toJson from 'enzyme-to-json'
  import Login from './Login'
  import Notification from '../common/Notification'
  
  describe('&lt;Login /&gt; component', () =&gt; {
      it('should render', () =&gt; {
          const loginComponent = shallow(&lt;Login /&gt;);
          const tree = toJson(loginComponent);
          expect(tree).toMatchSnapshot();
      });
  
      it('should contains the words "Forgot Password"', () =&gt; {
          const loginComponent = shallow(&lt;Login /&gt;);
          expect(loginComponent.contains('Forgot Password')).toBe(true);
      });
  
      // This test fails
      it('should render the Notification component if state.error is true', () =&gt; {
          const loginComponent = ReactTestUtils.renderIntoDocument(
              &lt;Login /&gt;
          );
  
          const notificationComponent = ReactTestUtils.renderIntoDocument(
              &lt;Notification /&gt;
          );
  
          loginComponent.setState({
              error: true
          }, expect(ReactTestUtils.isDOMComponent(notificationComponent)).toBe(true));
      });
  });
  </code></pre>
  
  <h3>However currently the test is failing, and I'm not sure why</h3>
  
  <p><a href="https://i.stack.imgur.com/xFZrA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xFZrA.png" alt="enter image description here"></a></p>
  
  <p>In the last part of my code I've also tried this to no avail</p>
  
  <pre><code>loginComponent.setState({
          error: true
      }, expect(ReactTestUtils. isElement(notificationComponent)).toBe(true));
  </code></pre>
  
  <p><a href="https://facebook.github.io/react/docs/test-utils.html" rel="noreferrer">https://facebook.github.io/react/docs/test-utils.html</a></p>
  
  <h3>The render() of my Login component</h3>
  
  <pre><code>render() {
      const usernameError = this.state.username.error;
      const error = this.state.error;
      const errorMsg = this.state.errorMsg;
  
      return (
          &lt;div className="app-bg"&gt;
              { error &amp;&amp;
                  &lt;Notification message={ errorMsg } closeMsg={ this.closeMessage }/&gt;
              }
              &lt;section id="auth-section"&gt;
                  &lt;header&gt;
                      &lt;img src="static/imgs/logo.png"/&gt;
                      &lt;h1&gt;tagline&lt;/h1&gt;
                  &lt;/header&gt;
  </code></pre>
  
  <h3>Also tried this method for testing for the Notification component after setting state.error to true</h3>
  
  <pre><code>it('should render the Notification component if state.error is true', () =&gt; {
      const loginComponent = ReactTestUtils.renderIntoDocument(
          &lt;Login /&gt;
      );
  
      const notificationComponent = ReactTestUtils.renderIntoDocument(
          &lt;Notification /&gt;
      );
  
      // loginComponent.setState({
      //  error: true
      // }, expect(ReactTestUtils.isDOMComponent(notificationComponent)).toBe(true));
  
      const checkForNotification = () =&gt; {
          const login = shallow(&lt;Login /&gt;);
          expect(login.find(Notification).length).toBe(1);
      };
  
      loginComponent.setState({
          error: true
      }, checkForNotification());
  });
  </code></pre>
  
  <p>But that test also failed.</p>
  
  <p>Also tried <code>const login = mount(&lt;Login /&gt;);</code></p>
  
  <hr>
  
  <p>Anyone else running into a problem using Jest and the React Test Utilities?</p>