title: Why do I have to invoke promise.then() myself to test ES6 promises?
body: <p>This is a followup question to <a href="https://stackoverflow.com/questions/44085091/how-to-test-state-update-from-an-async-request-on-a-react-component-constructor">this one</a> (it's not necessary to read that question to answer this one).</p>
  
  <p>Take the following React component as example:</p>
  
  <pre><code>class Greeting extends React.Component {
      constructor() {
          fetch("https://api.domain.com/getName")
              .then((response) =&gt; {
                  return response.text();
              })
              .then((name) =&gt; {
                  this.setState({
                      name: name
                  });
              })
              .catch(() =&gt; {
                  this.setState({
                      name: "&lt;unknown&gt;"
                  });
              });
      }
  
      render() {
          return &lt;h1&gt;Hello, {this.state.name}&lt;/h1&gt;;
      }
  }
  </code></pre>
  
  <p>Using Jest, here's how we could assert that <code>name</code> equals to some text returned from the <code>getName</code> request:</p>
  
  <pre><code>test("greeting name is 'John Doe'", () =&gt; {
      const fetchPromise = Promise.resolve({
          text: () =&gt; Promise.resolve("John Doe")
      });
  
      global.fetch = () =&gt; fetchPromise;
  
      const app = shallow(&lt;Application /&gt;);
  
      return fetchPromise.then((response) =&gt; response.text()).then(() =&gt; {
          expect(app.state("name")).toEqual("John Doe");
      });
  });
  </code></pre>
  
  <p>But the following doesn't feel right:</p>
  
  <pre><code>return fetchPromise.then((response) =&gt; response.text()).then(() =&gt; {
      expect(app.state("name")).toEqual("John Doe");
  });
  </code></pre>
  
  <p>I mean, I'm somewhat replicating the implementation in the test file.</p>
  
  <p>It doesn't feel right that I have to invoke <code>then()</code> or <code>catch()</code> directly in my tests. Especially when <code>response.text()</code> also returns a promise and I have two chained <code>then()</code>s just to assert that <code>name</code> is equal to <code>John Doe</code>.</p>
  
  <p>I come from Angular where one could just call <code>$rootScope.$digest()</code> and do the assertion afterwards.</p>
  
  <p>Isn't there a similar way to achieve this? Or is there another approach for this?</p>