Как мне протестировать React Hook «useEffect», выполняющий вызов API с помощью Typescript?

Я пишу несколько шутливых ферментных тестов для простого приложения React, используя Typescript и новые хуки React.

Однако я не могу правильно смоделировать вызов API внутри хука useEffect.

useEffect выполняет вызов API и обновляет useState состояние «данные» с помощью «setData».

Затем объект «данные» сопоставляется в таблице с соответствующими ячейками таблицы.

Кажется, что с этим должно быть легко справиться с имитацией ответа API и монтированием фермента, но я продолжаю получать сообщения об ошибках, говорящих мне использовать act() для обновлений компонентов.

Я пытался использовать act() многими способами, но безрезультатно. Я пытался заменить axios на выборку и использовать энзимный мелкий и рендер библиотеки реактивных тестов, но, похоже, ничего не работает.

Компонент:

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.info(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;

Тест:

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.info(component.debug())
  });

Я ожидаю, что он будет регистрировать html таблицы с отображаемым разделом тела таблицы, я пробовал некоторые асинхронные и разные способы имитировать axios, но я продолжаю получать либо только заголовки таблицы, либо сообщение: обновление SalesPlanTable внутри теста не было упаковано in act(...). Я много часов искал решение, но не могу найти ничего, что работает, поэтому я решил набраться смелости и спросить здесь.