title: How to test snapshots with Jest and new React lazy 16.6 API
body: <p>I have to components imported with the new React <code>lazy</code> API (16.6). </p>
  
  <pre><code>import React, {PureComponent, lazy} from 'react';
  
  const Component1 = lazy(() =&gt; import('./Component1'));
  const Component2 = lazy(() =&gt; import('./Component2'));
  
  class CustomComponent extends PureComponent {
    ...
    render() {
  
    return (
      &lt;div&gt;
        &lt;Component1 /&gt;
        &lt;Component2 /&gt;
      &lt;/div&gt;
    );
   }
  }
  </code></pre>
  
  <p>In my tests, I'm doing the snapshots of this component. It's a very straightforward test:</p>
  
  <pre><code>import { create } from 'react-test-renderer';
  
  const tree = await create(&lt;CustomComponent /&gt;).toJSON();
  
  expect(tree).toMatchSnapshot();
  </code></pre>
  
  <p>In the logs, the test is failing with this error:</p>
  
  <pre><code>A React component suspended while rendering, but no fallback UI was specified.
  
  Add a &lt;Suspense fallback=...&gt; component higher in the tree to provide a loading indicator or placeholder to display.
  </code></pre>
  
  <p>Do I have to wrap in every single test suite with <code>&lt;Suspense&gt;...</code>?</p>
  
  <pre><code>it('should show the component', async () =&gt; {
    const component = await create(
      &lt;React.Suspense fallback={&lt;div&gt;loading&lt;/div&gt;}&gt;
       &lt;CustomComponent /&gt; 
      &lt;/React.Suspense&gt; 
    ); 
    const tree = component.toJSON(); 
  
    expect(tree).toMatchSnapshot(); 
  
  };
  </code></pre>
  
  <p>If I do that, I only see in the snapshot the <code>fallback</code> component.</p>
  
  <pre><code>+ Array [ + &lt;div&gt; + loading + &lt;/div&gt;, + ]
  </code></pre>
  
  <p>So, which is the best way to do it?</p>