How should I test React Hook "useEffect" making an api call with Typescript?

Question

I'm writing some jest-enzyme tests for a simple React app using Typescript and the new React hooks.

However, I can't seem to properly simulate the api call being made inside the useEffect hook.

useEffect makes the api call and updates the useState state "data" with "setData".

The object "data" is then mapped into a table to its corresponding table cells.

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 act() for component updates.

I tried using act() many ways but to no avail. I've tried replacing axios with fetch and using enzyme shallow and the react-test-library's render, but nothing seems to work.

The component:

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<ISUB> {}

const initData: IDATA = [];

const SalesPlanTable = () => {
  const [data, setData] = useState(initData);
  useEffect(() => {
    axios
      .get(`/path/to/api`)
      .then(res => {
        setData(res.data.results);
      })
      .catch(error => console.log(error));
  }, []);

  const renderTableRows = () => {
    return data.map((i: ISUB, k: number) => (
      <tr key={k}>
        <td>{i.id}</td>
        <td>
          {i.title}
        </td>
        <td>
          {i.subscription.print}
          {i.mediaType.digital}
        </td>
        <td>
          {i.monthlyPayment.print}
          {i.monthlyPayment.digital}
        </td>
        <td>
          {i.singleIssue.print}
          {i.singleIssue.digital}
        </td>
        <td>
          <button>Submit</button>
        </td>
      </tr>
    ));
  };

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>MediaType</th>
          <th>MonthlyPayment</th>
          <th>SingleIssue</th>
          <th/>
        </tr>
      </thead>
      <tbody'>{renderTableRows()}</tbody>
    </table>
  );
};

export default SalesPlanTable;

The test:

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', () => {
    const mock = new MockAdapter(axios);
    mock.onGet('/path/to/api').reply(200, response.data);
    act(() => {
      component = mount(<SalesPlanTable />);
    })
    console.log(component.debug())
  });

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 axios but I keep either getting just the table headers or the message: An update to SalesPlanTable inside a test was not wrapped in act(...). 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.

Answer 1

There are two issues at play here

---

Asynchronous call to setData

setData gets called in a Promise callback.

As soon as a Promise resolves, any callbacks waiting for it get queued in the PromiseJobs queue. Any pending jobs in the PromiseJobs queue run after the current message has completed and before the next one begins.

In this case the currently running message is your test so your test completes before the Promise callback has a chance to run and setData isn't called until after your test completes.

You can fix this by using something like setImmediate to delay your assertions until after the callbacks in PromiseJobs have a chance to run.

Looks like you'll also need to call component.update() to re-render the component with the new state. (I'm guessing this is because the state change happens outside of an act since there isn't any way to wrap that callback code in an act.)

All together, the working test looks like this:

it('should render a proper table data', done => {
  const mock = new MockAdapter(axios);
  mock.onGet('/path/to/api').reply(200, response.data);
  const component = mount(<SalesPlanTable />);
  setImmediate(() => {
    component.update();
    console.log(component.debug());
    done();
  });
});

---

Warning: An update to ... was not wrapped in act(...)

The warning is triggered by state updates to the component that happen outside of an act.

State changes caused by asynchronous calls to setData triggered by a useEffect function will always happen outside of an act.

Here is an extremely simple test that demonstrates this behavior:

import React, { useState, useEffect } from 'react';
import { mount } from 'enzyme';

const SimpleComponent = () => {
  const [data, setData] = useState('initial');

  useEffect(() => {
    setImmediate(() => setData('updated'));
  }, []);

  return (<div>{data}</div>);
};

test('SimpleComponent', done => {
  const wrapper = mount(<SimpleComponent/>);
  setImmediate(done);
});

As I was searching for more info I stumbled on enzyme issue #2073 opened just 10 hours ago talking about this same behavior.

I added the above test in a comment to help the enzyme devs address the issue.