title: Test case for conditional rendering with hooks in react-jest
body: <p>I am pretty new to the React world. Here's what I have in react-hooks.</p>
  
  <pre><code>export default function MyComponent() {
   const [data, setData] = useState(null);
  
   useEffect( () =&gt; {
     getData().then(setData)
   }, []);
  
   return(
     data ? &lt;AnotherComponent /&gt; : &lt;LoadingComponent /&gt;
   );
  }
  </code></pre>
  
  <p><strong>getData()</strong> is in another component with 'fetch'.</p>
  
  <pre><code>export function getData() {
    return fetch('/api/v2/user').then(response =&gt; {
      if(response.status === 200) {
        return response.json()
      } else {
        return {};
      }
    });
  }
  </code></pre>
  
  <p>I am using Jest/Enzyme as a testing framework and want to test the scenario with mock data so I can test LoadingComponent is not present in DOM. This is what I am trying but it seems mock values are not being returned.</p>
  
  <pre><code>const mockValues = {
   data: {}
   count: 10
   result: []
  };
  
  jest.mock('../DataService');
  
  const mockService = require('../DataService');
  mockService.getData = jest.fn().mockResolvedValue(mockValues);
  
  ...
  const component = mount(&lt;MyComponent /&gt;);
  expect(component.html()).toEqual(expect.not.stringContaining('LoadingComponent')); 
  </code></pre>
  
  <p>I see the "mount" works fine but it seems mock values are not being returned and hence LoadingComponent is present.</p>