Cannot mock Zustand store – mockImplementation error

[201flaviosilva]

Hey everyone! 👋

I’m trying to mock a Zustand store in a Vitest + React Testing Library setup, but I’m running into the same TypeScript.

Error: Property 'mockImplementation' does not exist on type 'UseBoundStore<StoreApi<CounterState>>'.ts(2339)

Test:

vi.mock("./count.store", () => ({
  useCounterStore: vi.fn(),
}));

beforeEach(() => {
  useCounterStore.mockImplementation(() => mockStore);
});

How can I cleanly mock a Zustand store (useCounterStore) in Vitest while avoiding TypeScript issues with mockImplementation?
Is there a better approach for mocking Zustand in tests?

Here is a repository example setup: https://bitbucket.org/201flaviosilva-labs/mock-zustand-store/

Thanks

[dbritto-dev]

@201flaviosilva would you mind creating a minimal repro on stackblitz?

btw, few things you need to follow on testing:

• Do not mock custom store hooks
• For global stores you need to reset the state before each test
• Test components > stores
• userEvent (@testing-library/user-event) > fireEvent (@testing-library/react)
• Spy actions from .getState()

To reset states before each test:

const createResetStore = (useStoreHook) => {
  const initialState = storeHook.getInitialState()
  useStoreHook.setState(initialState, true)
}

const resetBearStore = createResetStore(useBearStore)

beforeEach(() => {
   resetBearStore()
})

[201flaviosilva]

Here is a stackblitz ex. repo: https://stackblitz.com/edit/vitejs-vite-ny8wu3vp

[dbritto-dev]

@201flaviosilva here you go -> https://stackblitz.com/edit/vitejs-vite-ymcuqfgt?file=src%2FCounter%2FCounter.integration.test.tsx