title: Mocking a component method with Jest
body: <p>I have a react component that uses <code>fetch</code> to talk to an API, it looks like this</p>
  
  <pre><code>class Customer extends Component {
    loadCustomer(id) {
      fetch(API + '/customers/' + id)
      .then((response) =&gt; response.json())
      .then((js) =&gt; {
         this.update(js);
      })
      .catch((error) =&gt; {
        console.error(error);
      }
    }
  }
  </code></pre>
  
  <p>I am trying to write jest tests for it like this</p>
  
  <pre><code>jest.mock(Customer, () =&gt; {loadCustomer: jest.fn()});
  
  describe('Customer', () =&gt; {
    it('renders customer', async  () =&gt; {
      const ret = `
      // sample json from the API
      `
      const result = Promise.resolve(ret);
      const tree = renderer.create(
        &lt;Customer customerId={125}/&gt;
      );
      loadCustomer.mockImplementation(() =&gt; result);
      await result;
      expect(tree.toJSON()).toMatchSnapshot();
    });
  });
  </code></pre>
  
  <p>This fails with</p>
  
  <pre><code> FAIL  tests/Customer.test.js
    ● Test suite failed to run
  
      TypeError: Cannot read property 'default' of undefined
  
        at Object.&lt;anonymous&gt; (tests/Customer.test.js:12:48)
  </code></pre>
  
  <p>The offending line being
  <code>jest.mock(Customer, () =&gt; {loadCustomer: jest.fn()});</code></p>
  
  <p>What am I missing here?</p>
  
  <p><strong>EDIT</strong><br/>
  If I change the offending line to 
  <code>jest.mock(Customer, () =&gt; ({loadCustomer: jest.fn()}));</code>
  I get</p>
  
  <pre><code>FAIL  tests/Customer.test.js
    ● Test suite failed to run
      TypeError: Cannot read property 'default' of undefined
  
        at Object.&lt;anonymous&gt; (tests/Customer.test.js:12:48)
        at process._tickCallback (internal/process/next_tick.js:103:7)
  </code></pre>
  
  <p><strong>EDIT</strong><br/>
  If I mock the <code>fetch</code> method like this</p>
  
  <pre><code>beforeEach(() =&gt; {
    global.fetch = jest.fn().mockImplementation(() =&gt; {
      var p = new Promise((resolve, reject) =&gt; {
        resolve({
          json: function() {
            return { // some json }
          }
       return p;
      });
    });
  });
  
  describe('Customer', () =&gt; {
    it('renders customer', async () =&gt; {
      const tree = renderer.create(
        &lt;Customer customerId={125}/&gt;
      ).toJSON();
      await tree;
      expect(tree).toMatchSnapshot();
    });
  });
  </code></pre>
  
  <p>Then the test does not wait for the fetch to complete.</p>