reactjs - How can I mock default createHook and named createHook exports?

Question

I'm trying to write some tests for a container that uses react-sweet-state hooks to get store information and returns selector data.

I've scoured stack overflow for solutions, but the main solution I've found is giving me an error TypeError: arr[Symbol.iterator] is not a function

Code:

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 />);
});

This gives me an error that arr[Symbol.iterator] is not a function. But I'm not sure how to set up the mock for this to work.

question from:https://stackoverflow.com/questions/66055411/how-can-i-mock-default-createhook-and-named-createhook-exports

Answer 1

For anyone that finds this. I wasn't calling my mock functions correctly. It was returning a function, instead of the passed array. ?????♀?

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