title: How to add unit tests in jest for dynamically loading components using react.lazy
body: <p>I have a component which is using react.lazy and suspense to dynamically render a component</p>
  
  <p>Can someone please suggest how can we test this component using jest </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { lazy, Suspense } from "react";
  
  const Component2 = lazy(() =&gt; import("./Component2"));
  class Component1 extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isClicked: false
      };
    }
    click = () =&gt; {
      this.setState({ isClicked: true });
    };
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;component1 &lt;/div&gt;
          &lt;button onClick={this.click}&gt;get component2&lt;/button&gt;
          {this.state.isClicked &amp;&amp; (
            &lt;Suspense fallback={&lt;div&gt;loading...&lt;/div&gt;}&gt;
              &lt;Component2 /&gt;
            &lt;/Suspense&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  export default Component1;</code></pre>
  </div>
  </div>
  </p>
  
  <p>codesandbox link for that : <a href="https://codesandbox.io/s/xenodochial-currying-ufxwb" rel="nofollow noreferrer">https://codesandbox.io/s/xenodochial-currying-ufxwb</a></p>
  
  <p>Adding some tests here </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> import React from 'react';
  import Enzyme, { shallow } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  import Component1 from '../src/Component1.js';
  Enzyme.configure({ adapter: new Adapter() })
  describe('MyComponent', () =&gt; {
    it('should render correctly i mode', () =&gt; {
      const component = shallow(&lt;Component1 /&gt;);
      expect(component).toMatchSnapshot();
    });
  
    it('should not have component2', () =&gt; {
      const component = shallow(&lt;Component1 /&gt;);
      expect(component.find('Component2').exists()).toEqual(true);
    })
  
    it('should contain button getComponent2 and should have component2', ()=&gt; {
      const component = shallow(&lt;Component1 /&gt;);
      expect(component.instance().state.isClicked).toEqual(false);
      expect(component.find('button').exists());
      const button = component.find('button');
      button.simulate("click");
      expect(component.instance().state.isClicked).toEqual(true);
      expect(component.find('Component2').exists()).toEqual(true);
   
    });  
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this example Component2 is dynamically rendered and lazily loaded
  i tried to write tests for that
  const button = component.find('button');
      button.simulate("click");
      expect(component.instance().state.isClicked).toEqual(true);
      expect(component.find('Component2').exists()).toEqual(true);</p>
  
  <p>as the above ,but the tests are not successful
  Please suggest how can we do it with jest and enzyme</p>