Question

我在测试这种useEffect时遇到一些困难。以下代码位于react函数组件中，我想在调用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调用中模拟更高一级的响应。

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

1 个答案: