title: Bypass fetch call in React component
body: <p>I am attempting to write a test for a react component that sends out a fetch GET request after mounting. The test just needs to check if the component has rendered and when fetch runs I get this: <code>ReferenceError: fetch is not defined</code>. I have searched around and cant seem to find anything that will fix my problem. I am using jest and Test Utils for testing the components. </p>
  
  <p>My component code:</p>
  
  <pre><code>export class Home extends Component {
      constructor(props) {
          ...
      }
      componentDidMount() {
          fetch('/some/path', {
              headers: {
                  'Key1': 'Data1',
                  'Key2': Data2
              }
          }).then(response =&gt; {
              if (response.status == 200) {
                  response.json().then((data) =&gt; {
                      this.context.store.dispatch(setAssets(data))
                  }
                  );
              } else {
                  return (
                      &lt;Snackbar
                          open={true}
                          message={"ERROR: " + str(response.status)}
                          autoHideDuration={5000}
                      /&gt;
                  );
              }
          }).catch(e =&gt; {});
             ...
          );
      }
      componentWillUnmount() {
          ...
      }
      logout(e) {
          ...
      }
      render() {
          return (
              &lt;div&gt;
                  &lt;AppBar
                      title="Title"
                      iconElementLeft={
                          &lt;IconButton&gt;
                              &lt;NavigationClose /&gt;
                          &lt;/IconButton&gt;
                      }
                      iconElementRight={
                          &lt;IconMenu
                              iconButtonElement={
                                  &lt;IconButton&gt;
                                      &lt;MoreVertIcon /&gt;
                                  &lt;/IconButton&gt;
                              }
                              targetOrigin={{
                                  horizontal: 'right',
                                  vertical: 'top'
                              }}
                              anchorOrigin={{
                                  horizontal: 'right',
                                  vertical: 'top'
                              }}
                          &gt;
                              &lt;MenuItem&gt;
                                  Help
                              &lt;/MenuItem&gt;
                          &lt;/IconMenu&gt;
                      }
                  /&gt;
                  {
                      this.context.store.getState().assets.map((asset, i) =&gt; {
                          return (
                              &lt;Card
                                  title={asset.title}
                                  key={i+1}
                              /&gt;
                          );
                      })
                  }
              &lt;/div&gt;
          );
      }
  }
  
  Home.contextTypes = {
      store: React.PropTypes.object
  }
  
  export default Home;
  </code></pre>
  
  <p>My Test Code:</p>
  
  <pre><code>var home
  
  describe('Home', () =&gt; {
      beforeEach(() =&gt; {
          let store = createStore(assets);
          let a = store.dispatch({
                           type: Asset,
                           assets: [{
                                      'id': 1, 
                                      'title': 'TITLE'
                                   }],
                         });
          store.getState().assets = a.assets
  
          home = TestUtils.renderIntoDocument(
              &lt;MuiThemeProvider muiTheme={getMuiTheme()}&gt;
                  &lt;Provider store={store}&gt;
                      &lt;Home /&gt;
                  &lt;/Provider&gt;
              &lt;/MuiThemeProvider&gt;
          );
      });
      it('renders the main page, including cards and appbar', () =&gt; {}
  </code></pre>
  
  <p>It errors when trying to render Home into document.</p>
  
  <p>I have tried <a href="https://www.npmjs.com/package/fetch-mock" rel="nofollow">fetch-mock</a> but this only allows for mock calls for API testing, which I'm not trying to do and doesn't mock the fetch calls in my component.</p>
  
  <p>Mocking Home wont work because its the component I am trying to test. Unless there's a way to mock the <code>componentDidMount()</code> function that I have missed.</p>
  
  <p>I just need a workaround for the fetch call. Any ideas??</p>
  
  <p><strong>EDIT:</strong> I'm using React's JSX for the component and JS for the test</p>