reactjs - 如何模拟默认的 createHook 和命名的 createHook 导出？

Question

我正在尝试为使用 react-sweet-state 钩子获取存储信息并返回选择器数据的容器编写一些测试。

我已经搜索了堆栈溢出的解决方案，但我发现的主要解决方案是给我一个错误 TypeError: arr[Symbol.iterator] is not a function

代码：

stores/Global.js

export default createHook(Store);
export const useFooSelector = createHook(Store, {
  selector: fooSelector,
});

index.jsx

import useGlobalStore, { useFooSelector } from '../../stores/Global';

const App = () => {
  const [{ state }, { actions }] = useGlobalStore();
  const [{ foo }] = useFooSelector();
}

test.js

const mockUseGlobalStore = jest.fn();
const mockUseFooSelector = jest.fn();

jest.mock('../../../stores/Global', () => ({
  __esModule: true,
  default: () => mockUseGlobalStore,
  useFooSelector: () => mockUseFooSelector,
}));

test('should render', async () => {
    mockUseFooSelector.mockImplementation(() => [{ foo: 1 });
    mockUseGlobalStore.mockImplementation(() => [{ state },{ actions }]);
    render(<App />);
});

这给了我一个错误，即 arr[Symbol.iterator] 不是函数。但我不确定如何设置模拟以使其正常工作。

标签： reactjsjestjsreact-hooks

Answer 1

对于任何发现这一点的人。我没有正确调用我的模拟函数。它返回一个函数，而不是传递的数组。‍♀️</p>

jest.mock('../../../stores/Global', () => ({
  __esModule: true,
  default: () => mockUseGlobalStore(),
  useFooSelector: () => mockUseFooSelector(),
}));