reactjs 使用React测试库在定制挂钩中模拟API调用

lb3vh1jj  于 2022-11-22  发布在  React
关注(0)|答案(1)|浏览(145)

我写了一个自定义钩子,在它的useEffect函数中调用一个API并将结果设置为state。

export const useGetUsers = (searchParams?: any | undefined, userId?: string) => {
  const [users, setUsers] = useState<{
    data: readonly any[] | null;
    loading: boolean;
  }>({
    data: [],
    loading: true,
  });

  const parsedSearchParams = {
    limit: 100,
    ...(searchParams || {}),
  };
  const searchParamStr = `?${makeQueryStringFromObject(parsedSearchParams)}`;

  useEffect(() => {
    userRequest('users', 'get', null, searchParamStr)
      .then(result => {
        setUsers({
          data: result?.data,
          loading: false,
        });
      })
      .catch(() => {
        setUsers({
          data: null,
          loading: false,
        });
      });
  }, [userId, searchParamStr]);

  return { users, setUsers };
};

我希望我的测试通过.then()。但由于某种原因,它没有通过。下面是我的测试:

test('when the call is a success', async () => {
        const spy = jest.spyOn(ES, 'userRequest');
        const returnPromise = Promise.resolve({data: ['a']})
        ES.userRequest = jest.fn(() => returnPromise);

        const { result, waitFor} = renderHook(() => useGetUsers());
        await act(() => returnPromise)

        await waitFor(() => expect(spy).toHaveBeenCalled())//this fails
        
    });

下面是我在测试中另一个尝试和更改,但没有成功:

test('when the call is a success', async () => {
        jest.mock('src/..', () => ({
            ...jest.requireActual('src/..'),
            userRequest: jest
                .fn()
                .mockImplementation(() => new Promise(resolve => resolve({data: ['a']}))),
        }));
        const { result, waitFor} = renderHook(() => useGetUsers());
        await waitFor(() => expect(ES.userRequest).toHaveBeenCalled())
    
    });

另外,当我模拟userRequest时,我希望得到我模拟的返回值。但是它失败了。它转到了.catch。
我尝试使用waitForNextUpdate,但没有成功。我将感谢您的帮助

pkwftd7m

pkwftd7m1#

这对我很有效:

import { renderHook, waitFor } from '@testing-library/react';
import { useGetUsers } from '../useGetUsers';
import * as utils from '../useGetUsersUtils';

it('should work', async () => {
  const mockUserRequest = jest.spyOn(utils, 'userRequest');
  renderHook(() => useGetUsers());

  await waitFor(() => expect(mockUserRequest).toHaveBeenCalled())
});

我不确定userRequest在你的代码中的位置。正如你从我的导入中看到的,它在不同的文件中,然后是钩子。

相关问题