javascript - 在 useEffect 中测试组件调用 API

Question

我想测试应该显示在我的功能组件中的 api 调用和返回的数据。我有一个组件，它在第一次加载时以及某些事情发生变化时（即键入时）调用 API。

我有一个useEffect像这样调用 API：

useEffect(() => {
    const query = queryString;

    const apiRequest = async () => {
      try {
        setIsFetching(true);
        const response = await getData(query, page);

        setData(response.data);
      } catch (error) {
        // Do some error
        console.log('error');
      } finally {
        setIsFetching(false);
      }
    };

    apiRequest();
  }, [queryString, page]);

getData是axios这样的函数：

let getDataRequest;
const getData = (searchQuery = null, page = PAGE, size = PAGE_SIZE) => {
  if (getDataRequest) getDataRequest.cancel();

  getDataRequest = axios.CancelToken.source();

  return axios.get('url_to_api', {
    params: {
      page,
      searchQuery,
      size,
    },
    cancelToken: getDataRequest.token,
  });
};

尝试测试此组件时，我遇到了错误When testing, code that causes React state updates should be wrapped into act(...):

我一直在尝试关注第一个链接、第二个链接、 第三个链接和更多页面，但仍然没有运气。

这是测试的一个版本，我仍然看到错误：

it('should render data', async () => {
    let container;
    act(async () => {
      await getData.mockResolvedValueOnce({
        data: { things: data, meta: { current_page: 1 } },
      });
      container = render(<Component />);
    });

    await waitFor(() => container.queryByText('Text I would expect after api call'));
  }) 

我也尝试过在我的测试文件中模拟该函数，如下所示：

import { getData } from './dataAccess';

const mockedData = { data: { things: data } };

jest.mock('./api', () => ({
  getData: jest
    .fn()
    .mockImplementation(() => new Promise(resolve => resolve(mockedData))),
}));

我正在使用import { act } from 'react-dom/test-utils';酶和玩笑。我也在使用'@testing-library/react';

标签： javascriptreactjsjestjsenzyme