Jest测试服务调用响应承诺，useEffect和useState钩子

Question

我在开玩笑地测试这个useEffect时遇到了一些困难。下面的代码位于中，我希望在调用serviceFn时返回一些模拟值。返回的数据被写回状态。

//from service-factory.js
const serviceFn = () => (
  ({ personId }) => (
    ionXHR.request(
      `/persons/${personId}/`,
      'GET',
      null,
      'json',
    )
  )
);

//from Component.jsx
const service = useRef(serviceFn());
  useEffect(() => {
    
    service.current({ personId:123456 }).then((response) => {
      if (response.data) {
        setData(response.data);
        setLoadingState('SUCCESS');
      } else {
        setLoadingState('FAILED');
      }
    });
  }, [personId]);

我有以下内容，但不确定我还需要什么。

function mockReturnFn() { return 'Test'; }
const wrapper = mount(<Component/>);
const somethingSpy = jest.spyOn(wrapper, 'serviceFn').mockImplementation(mockReturnFn);

更新：

所以，我想我已经接近了。

在我的测试文件中，我必须导入函数。

import { serviceFn } from './service-factory';
jest.mock('./service-factory', () => ({ serviceFn : jest.fn() }));

在我的测试中

serviceFn.mockImplementation(() => Promise.resolve('test1234'));

现在的问题是我得到了service.current is not a function

我试过这样做，但现在得到了_serviceFactory.serviceFn.mockImplementation is not a function

jest.mock('./service-factory', () => (
  {
    serviceFn: {
      current: jest.fn(),
    },

  }
));

Answer 1

serviceFn是工厂函数，它返回一个发出请求的函数。

考虑到它的名称为export，最初应该将其短截为：

jest.mock('./service-factory', () => {
  const mockService = jest.fn();
  return {
    __esModule: true,
    mockService,
    serviceFn: jest.fn().mockReturnValue(mockService)
  }
});

mockService公开并允许模拟特定的响应：

mockService.mockResolvedValue({ data: ... });

因为它是ionXHR上的基本包装器，所以也可以在ionXHR.request调用上模拟更高级别的响应。