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 over stores

To reset states before each test:

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

const resetBearStore = createResetStore(useBearStore)

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