title: Fetch testing using jest
body: <p>I have implemented fetch and test case as following, but it gives me an error.</p>
  
  <p><strong>Main.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  class Main extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        testData: []
      };
    }
  
    componentDidMount() {
      fetch(`http://testurl.com/testData`)
        .then(response =&gt; response.json())
        .then(result =&gt; this.setState({ testData: result }));
    }
  
    render() {
      const { testData } = this.state;
  
      return (
        &lt;div className="main"&gt;
          {testData.data &amp;&amp; (
            &lt;section&gt;
              &lt;CustomComponent movies={testData.data} /&gt;
            &lt;/section&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  export default Main;
  </code></pre>
  
  <p><strong>Main.test.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { mount, shallow } from 'enzyme';
  import { fetchMock } from 'fetch-mock';
  import Main from "../src/Main";
  import testData from './_mockData_/testData'
  
  it('should render without crashing', () =&gt; {
      const div = document.createElement('div');
      ReactDOM.render(&lt;Main /&gt;, div);
      ReactDOM.unmountComponentAtNode(div);
    });
  
  describe('should renders Main correctly', () =&gt; {
      fetch('http://testurl.com/testData').then(res =&gt; {
          expect(res.data).toEqual(testData)
    })
  });
  </code></pre>
  
  <p>Even i tried using <a href="http://www.wheresrhys.co.uk/fetch-mock/" rel="nofollow noreferrer">http://www.wheresrhys.co.uk/fetch-mock/</a> but not make any difference.</p>
  
  <pre><code>describe('should renders Main correctly', () =&gt; {
      fetchMock.get('http://testurl.com/testData').then(res =&gt; {
          expect(res.data).toEqual(testData)
    })
  });
  </code></pre>
  
  <p>Always i got following error.</p>
  
  <blockquote>
    <p><strong>ReferenceError: fetch is not defined</strong></p>
  </blockquote>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p><strong>Edited:</strong></p>
  
  <p>As per comment I edited my code as following but no luck.</p>
  
  <pre><code>import testData from './_mockData_/testData'
  
  describe('Main', () =&gt; {
      it('renders without crashing', () =&gt; {
          const tree = shallow(&lt;Main /&gt;);
          expect(tree).toMatchSnapshot();
        });
  
        beforeEach(() =&gt; {
          fetch.resetMocks()
        })
  
        it('calls API and returns data to me', () =&gt; {
          fetch.mockResponseOnce(JSON.stringify({ someData: testData }))
  
          //assert on the response
          fetch(`http://testurl.com/testData`).then(res =&gt; {
            expect(res.data).toEqual(testData)
          })
  
          //assert on the times called and arguments given to fetch
          expect(fetch.mock.calls.length).toEqual(1)
          expect(fetch.mock.calls[0][0]).toEqual('http://testurl.com/testData')
        })
  });
  </code></pre>
  
  <p>Got following error:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'then' of undefined</p>
  </blockquote>