title: Enzyme mount not calling useEffect; react-testing-library render not calling useEffect
body: <p>I'm trying out testing React hooks with Enzyme's mount.  It looks like the React hook useEffect is not being called.  </p>
  
  <p>This is my functional component: </p>
  
  <pre><code>export function HelloFetch() {
    type HelloData = { Message: any }
    const initialHelloData : HelloData = { Message: "" };
    const url = `https://localhost:1000/api/hello`;
  
    const [helloData, setHelloData] = useState(initialHelloData);
  
    useEffect(() =&gt; {
      fetch(
        url,
        {
          method: "GET"
        }
      )
      .then(res  =&gt; res.json() )
      .then(response =&gt; {
        setHelloData(response)
        console.log(response)
      })
       . catch(error =&gt; console.error(error));
    });
  
    return (
      &lt;div&gt;
          &lt;div&gt;
            &lt;p&gt;Fetch: &lt;/p&gt;{helloData.Message}
          &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>The api should return "hello, world", which it does in postman.  It also looks fine in the browser.  </p>
  
  <pre><code>{"Message":"Hello, world"}
  </code></pre>
  
  <p>This is my test code: </p>
  
  <pre><code>describe('Hello', () =&gt; {
      const helloFetchComponent = mount(&lt;HelloFetch /&gt;);
  
      it(' using fetch api should contain "Hello, world"', () =&gt; {
        expect(helloFetchComponent.html()).toContain("Hello, world");
      });
  }
  </code></pre>
  
  <p>I'm getting this error: </p>
  
  <pre><code>Expected substring: "Hello, world"
  Received string:    "&lt;div&gt;&lt;div&gt;&lt;p&gt;Fetch: &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;" 
  </code></pre>
  
  <p>I tried testing it with the react-testing-library's render method.  </p>
  
  <pre><code>test('renders hello world app', () =&gt; {
    const { getByText } = render(
      &lt;HelloFetch /&gt;
    );
  
    expect(getByText('Hello')).toBeInTheDocument();
  });
  </code></pre>
  
  <p>This is the error I get: </p>
  
  <pre><code>renders hello world app
  
      Unable to find an element with the text: Hello. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;div&gt;
          &lt;p&gt;
            Fetch:
          &lt;/p&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I'm not sure what I missed.  </p>
  
  <p>Edit: Reposting my comments to @Florian here for better formatting.  </p>
  
  <p>I switched from fetch to axios. I have the following: </p>
  
  <pre><code>describe('Hello', () =&gt; { 
      it(' using axios should contain "mock Hello, world"', () =&gt; { 
          const mock = new MockAdapter(axios); 
          const mockData : HelloData = { Message: "mock Hello, world"}; 
          mock.onGet(helloUrl).reply(200, mockData); 
          let component = mount(&lt;HelloAxios /&gt;); 
          expect(component.html()).toContain("mock Hello, world"); 
      }) 
  }) 
  </code></pre>
  
  <p>The component doesn't contain data from the api even though the api is working correctly.</p>
  
  <p>The following does work: </p>
  
  <pre><code>axios.get(helloUrl).then(function (response) { 
      expect(response.data.html()).toContain("mock Hello, world"); 
  });
  </code></pre>
  
  <p>I don't know how to get <code>mount</code> working with <code>MockAdapter</code>. </p>