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(...):

我一直在尝试跟踪first link和second link third link以及更多页面，但仍然没有运气。

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

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';

在useEffect

0 个答案: