How can I mock properly the useStore hook in a unit test?

[peshoicov]

In a component I am using the useStore hook like so:

  const editingMessageType = useStore((state) => state.editingMessageType);
  const setEditingMessageType = useStore((state) => state.setEditingMessageType);

And when I want to make a unit test - I am mocking this. Here are two examples I've tried:

// Option 1
jest.mock('../../state', () => ({
  __esModule: true,
  default: jest.fn(() => ({
    editingMessageType: 'foo',
    setEditingMessageType: jest.fn(),
  })),
}));

// Option 2
jest.mock('../../state', () => ({
  __esModule: true,
  default: jest.fn((selector) =>
    selector({
      editingMessageType: 'foo',
      setEditingMessageType: jest.fn(),
    })
  ),
}));

So how can I mock the useStore hook so that the usage in the components work when I am unit-testing those components?

PS: I got partial success with this:

jest.mock('../../state', () => ({
  __esModule: true,
  default: jest.fn(() => ('foo'))
}));

But then I get only the text ... :(

[dbritto-dev]

@peshoicov would you mind sharing us how you are implementing your unit tests?