title: How should I test React Hook "useEffect" making an api call with Typescript?
body: <p>I'm writing some jest-enzyme tests for a simple React app using Typescript and the new React hooks.</p>
  
  <p>However, I can't seem to properly simulate the api call being made inside the <code>useEffect</code> hook. </p>
  
  <p><code>useEffect</code> makes the api call and updates the <code>useState</code> state "data" with "setData". </p>
  
  <p>The object "data" is then mapped into a table to its corresponding table cells.</p>
  
  <p>This seems like it should be easy to tackle with a mocked api response and an enzyme mount, but I keep getting errors telling me to use <code>act()</code> for component updates. </p>
  
  <p>I tried using <code>act()</code> many ways but to no avail. I've tried replacing <code>axios</code> with fetch and using enzyme shallow and the react-test-library's render, but nothing seems to work.</p>
  
  <p><strong>The component:</strong> </p>
  
  <pre><code>import axios from 'axios'
  import React, { useEffect, useState } from 'react';
  
  interface ISUB {
    id: number;
    mediaType: {
      digital: boolean;
      print: boolean;
    };
    monthlyPayment: {
      digital: boolean;
      print: boolean;
    };
    singleIssue: {
      digital: boolean;
      print: boolean;
    };
    subscription: {
      digital: boolean;
      print: boolean;
    };
    title: string;
  }
  
  interface IDATA extends Array&lt;ISUB&gt; {}
  
  const initData: IDATA = [];
  
  const SalesPlanTable = () =&gt; {
    const [data, setData] = useState(initData);
    useEffect(() =&gt; {
      axios
        .get(`/path/to/api`)
        .then(res =&gt; {
          setData(res.data.results);
        })
        .catch(error =&gt; console.log(error));
    }, []);
  
    const renderTableRows = () =&gt; {
      return data.map((i: ISUB, k: number) =&gt; (
        &lt;tr key={k}&gt;
          &lt;td&gt;{i.id}&lt;/td&gt;
          &lt;td&gt;
            {i.title}
          &lt;/td&gt;
          &lt;td&gt;
            {i.subscription.print}
            {i.mediaType.digital}
          &lt;/td&gt;
          &lt;td&gt;
            {i.monthlyPayment.print}
            {i.monthlyPayment.digital}
          &lt;/td&gt;
          &lt;td&gt;
            {i.singleIssue.print}
            {i.singleIssue.digital}
          &lt;/td&gt;
          &lt;td&gt;
            &lt;button&gt;Submit&lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      ));
    };
  
    return (
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;MediaType&lt;/th&gt;
            &lt;th&gt;MonthlyPayment&lt;/th&gt;
            &lt;th&gt;SingleIssue&lt;/th&gt;
            &lt;th/&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody'&gt;{renderTableRows()}&lt;/tbody&gt;
      &lt;/table&gt;
    );
  };
  
  export default SalesPlanTable;
  
  </code></pre>
  
  <p><strong>The test:</strong></p>
  
  <pre><code>const response = {
    data: {
      results: [
        {
          id: 249,
          mediaType: {
            digital: true,
            print: true
          },
          monthlyPayment: {
            digital: true,
            print: true
          },
          singleIssue: {
            digital: true,
            print: true
          },
          subscription: {
            digital: true,
            print: true
          },
          title: 'ELLE'
        }
      ]
    }
  };
  
  //after describe
  
  it('should render a proper table data', () =&gt; {
      const mock = new MockAdapter(axios);
      mock.onGet('/path/to/api').reply(200, response.data);
      act(() =&gt; {
        component = mount(&lt;SalesPlanTable /&gt;);
      })
      console.log(component.debug())
    });
  </code></pre>
  
  <p>I expect it to log the html of the table with the table body section rendered, I tried some async and different ways to mock <code>axios</code> but I keep either getting just the table headers or the message: An update to <code>SalesPlanTable</code> inside a test was not wrapped in <code>act(...).</code> I looked for many hours for a resolution but can't find anything that works so I decided to muster up some courage and ask here.</p>