Testing Zustand + Immer with Vitest

[GokulSNarayan]

I'm using Zustand + Immer in my project and my test environment is Vitest. What is the proper way to test my Zustand store. I have followed all the steps mentioned in the docs but I still get this create(...) is not a function error whenever I use the store in my test. Please help as I'm stuck in this state for a long time and didn't find a solution till now.

interface CriticalSupportState {
  total: number;
  used: number;
  setTotal: (total: number) => void;
  setUsed: (used: number) => void;
}

export const useCriticalSupport = create<CriticalSupportState>()(
  immer((set) => ({
    total: 0,
    used: 0,
    setTotal: (total) =>
      set((state) => {
        state.total = total;
      }),
    setUsed: (used) =>
      set((state) => {
        state.used = used;
      }),
  }))
);

And my simple test looks like this 
<img width="543" alt="image" src="https://github.com/user-attachments/assets/6b100fc8-f8b8-4ce4-a30b-a4a36d3a8c23" />

[dbritto-dev]

@GokulSNarayan would you mind creating a minimal repro on stackblitz? I'd be happy to help

[GokulSNarayan]

Hi @dbritto-dev here is the link to the code in stackblitz. Just run npm test and the same error occurs here. Let me know if I'm making some mistake here.

https://stackblitz.com/edit/vitejs-vite-tbzpaoxv?file=vite.config.ts

[dbritto-dev]

@GokulSNarayan you add it __mocks__ folder in the wrong place should be root folder by default if you change that to src then you can put it under src folder

https://stackblitz.com/edit/vitejs-vite-tbzpaoxv?file=src%2F__mocks__%2Fzustand.ts

[GokulSNarayan]

Ohh...Thanks a lot @dbritto-dev it worked now!