Vitest and Zustand only works with slight modifications from docs

[P1llus]

So I spent a large amount of time writing the initial tests, having a really hard time understanding how I am supposed to make the tests work, and when I did get it to work in the end, it was only because I managed to find some other github repositories using Vitest and Zustand, which was slightly modified from the docs.

Its a long post due to the examples, so TLDR:
For some reason, because of the mocking of zustand, I will always either get that my store is not a function, or is not defined, unless I make some slight modifications as documented below. The only change I needed to to was change setup-vitest.ts from this:

import { vi } from 'vitest';
import '@testing-library/jest-dom';

vi.mock('zustand'); // to make it works like Jest (auto-mocking)

To this:

import '@testing-library/jest-dom';

A bit unsure why, but I added all my details below if its interesting.

First here is my implementation:

1. Sliced stores example:

export const formState = (set) => ({
  vendor: '',
  product: '',
  description: '',
  setFormState: (key, value) => set({ [key]: value }),
});
export const tokenState = (set) => ({
  tokenCount: 0,
  setTokenCount: (value) => set({ tokenCount: value }),
});

export const gptState = (set) => ({
  isLoadingGPT: false,
  setIsLoadingGPT: (value) => set({ isLoadingGPT: value }),
});

export const logSamplesState = (set) => ({
  samples: [''],
  increaseSample: () => set((state) => ({ samples: [...state.samples, ''] })),
  decreaseSample: () =>
    set((state) => {
      if (state.samples.length > 1) {
        return { samples: state.samples.slice(0, -1) };
      } else {
        return state;
      }
    }),
  setSample: (index, value) =>
    set((state) => ({
      samples: state.samples.map((s, i) => (i === index ? value : s)),
    })),
  addSample: (value) =>
    set((state) => ({
      samples: [...state.samples, value],
    })),
});

2. Append all sliced stores into one global store as per the documentation:

import { create } from 'zustand';
import { formState, logSamplesState, tokenState, gptState } from './InputFormState';

export const useGlobalState = create((...a) => ({
  ...formState(...a),
  ...logSamplesState(...a),
  ...tokenState(...a),
}));

3. In the component I want to test, I initialize the store like this:

import { useGlobalState } from '../hooks/GlobalState';
const logSamples = useGlobalState((state) => state.samples);
const setSample = useGlobalState((state) => state.setSample);

4. I add the zustand.ts to the __mocks__ folder, however in the docs it mentions it needs to be in /src/__mocks__, but it only ever actually ran for me when it was in the root __mocks__ instead.

5. Updated vite.config.js:

/// <reference types="vitest" />
/// <reference types="vite/client" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [
    react(),
    eslintPlugin({
      cache: false,
      include: ['./src/**/*.js', './src/**/*.jsx'],
      exclude: ['./src/test/test-utils.jsx'],
    }),
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './setup-vitest.ts',
  },
  server: {
    watch: {
      usePolling: true,
    },
    host: true, // needed for the Docker Container port mapping to work
    strictPort: true,
    port: 8000, // you can replace this port with any port
  },
});

6. And last but not least, adding the setup-vitest.ts as per the docs:

import { vi } from 'vitest';
import '@testing-library/jest-dom';

vi.mock('zustand'); // to make it works like Jest (auto-mocking)

Now I started running some tests, and initially I got this error:

TypeError: useGlobalState.getState is not a function
 ❯ src/components/helpers/Helpers.jsx:17:36

The component I was testing also has a useEffect that monitors the store I modify, which triggers a helper function (non react component), which initializes any store like this, as per the docs:

import { useGlobalState } from '../hooks/GlobalState';
const globalState = useGlobalState.getState();
globalState.setSample(someSample);

Okay then, I will try to mock the function that the useEffect triggers, as I don't really need it to run, then the test runs further, and now it complains that my store is empty:

TypeError: logSamples?.map is not a function
 ❯ Samples src/components/logsampleform/Samples.jsx:33:20
     31|   return (
     32|     <EuiFlexGroup direction="column">
     33|       {logSamples?.map((sample, index) => (

As you can see from step 1, I do initialize it with a value (and works fine outside of tests), and then step 2 and 3 is how I import and use it. However, now logSamples is a function rather than a value.

At this point I starting giving up, and started browsing github for other projects that uses Vitest and Zustand, and I noticed one that simply did not use the mock of zustand in setup-vitest.ts, only the import of '@testing-library/jest-dom'.

Changing setup-vitest.ts to not mock zustand suddenly fixed all my issues, and I wanted to just report it here in case I am doing something really wrong...

[dbritto-dev]

@P1llus sorry, the latest version of testing docs is not released yet but you can check it out directly here https://github.com/pmndrs/zustand/blob/main/docs/guides/testing.md

Note: I updated the CodeSandbox demos to reflect the latest changes in the docs

[dil-kkrisz]

Hi, in my understanding OP never get a real answer or solution (as he just simply skipped mock). And the strange is that I was not able to find on the Earth a working example for tests on a slices pattern...
And now I'm facing a similar issue with TypeScript and slices pattern. I've tried with jest and also with vitest, but exactly the same:
App works, but tests fails due to such an error:
createBoardSlice is not a function TypeError: __vite_ssr_import_2__.createBoardSlice is not a function
Could someone really help? Thx in advance.

[dbritto-dev]

@dil-kkrisz the usage of slices pattern shouldn't affect on anything. Would you mind sharing us a minimal repro on stactkblitz?

[dil-kkrisz]

Hi thx, now I'm trying to reproduce the error on stackblitz in a dummy code, but I cant, test works there properly 😄

[dbritto-dev]

@dil-kkrisz hope this help -> https://stackblitz.com/@dbritto-dev/collections/zustand

[dil-kkrisz]

I found the answer, it's unbelievable: typescript exported enums spoil tests...

[flacial]

@P1llus Hello there! Today, I encountered a similar issue, and it turned out that I didn't have the __mocks__ folder in the root directory of my project. Simply moving the __mocks__ folder from /src/tests/__mocks__ to /src/__mocks__ resolved my issue, and I was then able to use vi.mock('zustand'). Here's where Vitest doc mention the __mocks__ dir.

I've my root directory set to ./src in Vitest config

I believe it would be helpful to mention that the __mocks__ directory should be located at the root of the project.

[dbritto-dev]

@flacial __mocks__ directory should be located at the root of the project. On Vitest that's a requirement.