In the Test with zustand/middleware/immer, "create(...) is not a function"

[Ryo-Kgym]

Hello, I would like to ask you something about testing using zustand/middleware/immer.

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";

import { Sale } from "@/type/sale/sale"; // any type

type State = {
  modifiedSales: Record<string, Sale>;
};
type Actions = {
  getSale: (id: string) => Sale;
  initSales: (sales: Sale[]) => void;
  setSaleByIdKey: <K extends keyof Sale>(
    id: string,
    key: K,
    value: Sale[K],
  ) => void;
};

const useStateSalesZustand = create<State & Actions>()(
  immer((set, get) => ({
    modifiedSales: {},
    getSale: (id) => {
      return get().modifiedSales[id];
    },
    initSales: (sales) =>
      set((state) => {
        state.modifiedSales = Object.fromEntries(sales.map((s) => [s.id, s]));
      }),
    setSaleByIdKey: (id, key, value) =>
      set((state) => {
        state.modifiedSales[id][key] = value;
      }),
  })),
);

export const useStateInitSales = () => {
  const { initSales } = useStateSalesZustand();
  return initSales;
};

export const useStateSale = (id: string) => {
  const { getSale, setSaleByIdKey } = useStateSalesZustand();

  return {
    sale: getSale(id),
    setSaleByKey: <K extends keyof Sale>(key: K, value: Sale[K]) =>
      setSaleByIdKey(id, key, value),
  };
};

When I tried to initialize the store with useStateInitSales in Vitest and test the useStateSale.setSaleByKey, the following error occurred.

 FAIL  src/hooks/sale/useStateSales.test.ts [ src/hooks/sale/useStateSales.test.ts ]
TypeError: create(...) is not a function
 ❯ src/hooks/sale/useStateSalesZustand.ts:19:54
     17| };
     18| 
     19| const useStateSalesZustand = create<State & Actions>()(
       |                                                      ^
     20|   immer((set, get) => ({
     21|     modifiedSales: {},

The officially listed zustand mock has already been set, but it seems that create is not recognized.

If you remove this mock, this error will not occur, so the mock itself appears to be working.

I didn't know how to deal with it, so I'd like to know.

---

Ref

// package.json

{
  "name": "any-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "next start -p 80",
    "dev": "next dev -p 3000",
    "build": "next build",
    "codegen": "graphql-codegen --config codegen.yml",
    "lint": "eslint .",
    "test": "vitest"
  },
  "dependencies": {
    "@apollo/client": "^3.11.1",
    "@apollo/experimental-nextjs-app-support": "^0.11.3",
    "@date-io/date-fns": "^2.13.1",
    "@date-io/dayjs": "^2.13.1",
    "@date-io/luxon": "^2.13.1",
    "@date-io/moment": "^2.13.1",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@material-ui/core": "^4.12.3",
    "@material-ui/pickers": "^3.3.10",
    "@mui/icons-material": "^5.4.2",
    "@mui/lab": "^5.0.0-alpha.69",
    "@mui/material": "^5.4.2",
    "@mui/x-data-grid": "^5.5.1",
    "@mui/x-date-pickers": "^5.0.20",
    "@mui/x-date-pickers-pro": "^5.0.20",
    "@react-pdf/renderer": "^3.4.4",
    "@types/node": "^22.5.4",
    "@types/react": "^18.3.5",
    "@types/react-dom": "^17.0.25",
    "date-fns": "^2.0.0-beta.5",
    "dayjs": "^1.10.7",
    "graphql": "^16.9.0",
    "luxon": "^2.3.0",
    "moment": "^2.29.1",
    "next": "^14.2.7",
    "node": "^22.8.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.27.0",
    "react-hook-form-input": "^1.1.10",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "typescript": "^4.5.4",
    "ulid": "^2.3.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@graphql-codegen/add": "^5.0.2",
    "@graphql-codegen/cli": "5.0.2",
    "@graphql-codegen/introspection": "4.0.3",
    "@graphql-codegen/typed-document-node": "^5.0.6",
    "@graphql-codegen/typescript": "4.0.6",
    "@graphql-codegen/typescript-operations": "4.2.0",
    "@graphql-codegen/typescript-react-apollo": "4.3.0",
    "@testing-library/jest-dom": "^6.5.0",
    "@testing-library/react": "^16.0.1",
    "@testing-library/user-event": "^14.5.2",
    "@types/eslint": "^8.44.0",
    "@types/jest": "^29.5.12",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.44.0",
    "eslint-config-next": "^14.2.5",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import-access": "^2.2.2",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "eslint-plugin-unused-imports": "4.0.1",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "tailwindcss": "^3.3.3",
    "typescript-eslint": "^7.17.0",
    "vitest": "^2.0.5",
    "zustand": "^4.5.5"
  }
}

[dai-shi]

Can @dbritto-dev help?

[Ryo-Kgym]

@dbritto-dev

I'm sorry often.
It seems like you don't recognize the immer, so please tell me what the problem is.

 ❯ source/useAnyTypeZustand.test.ts (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  source/useAnyTypeZustand.test.ts [ source/useAnyTypeZustand.test.ts ]
Error: Cannot find package 'immer' imported from /home/projects/stackblitz-starters-gptkv4/node_modules/zustand/esm/middleware/immer.mjs
 ❯ __node_internal_captureLargerStackTrace2 ../../../builtins.ddb8d84d.js:101:5335
 ❯ new NodeError ../../../builtins.ddb8d84d.js:101:4149
 ❯ packageResolve ../../../builtins.ddb8d84d.js:158:9724
 ❯ moduleResolve ../../../builtins.ddb8d84d.js:158:10188
 ❯ defaultResolve ../../../builtins.ddb8d84d.js:158:12372
 ❯ ModuleLoader.defaultResolve ../../../builtins.ddb8d84d.js:154:3284
 ❯ ModuleLoader.resolve ../../../builtins.ddb8d84d.js:154:2989
 ❯ ModuleLoader.getModuleJob ../../../builtins.ddb8d84d.js:154:1938
 ❯ ../../../builtins.ddb8d84d.js:155:1047
 ❯ _0x3fab28.link ../../../blitz.28a8ce1b.js:40:799725
 ❯ ../../../builtins.ddb8d84d.js:155:1002

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  no tests
   Start at  20:16:34
   Duration  231ms

[dbritto-dev]

@Ryo-Kgym would you mind sharing us a minimal repro on stackblitz?

[Ryo-Kgym]

@dbritto-dev

If this information is not enough, please let me know separately.

Code: https://stackblitz.com/edit/stackblitz-starters-tyxtu5?file=source%2FuseAnyTypeZustand.test.ts

How to:

1. npm run test in the root directory.
2. useAnyTypeZustand.test.ts causes an error about immer. Ref

[dbritto-dev]

@Ryo-Kgym something is weird in that config, would you trying with this template -> https://stackblitz.com/edit/vitest-zustand?file=README.md

[Ryo-Kgym]

@dbritto-dev
Thank you. It seems there was a problem with the way the test was written.

I resolved the test error.

[GokulSNarayan]

Hi @Ryo-Kgym Can you tell me what was the reason for that error create(...) is not a function, because I'm also facing a similar error while testing Zustand store.

[Ryo-Kgym]

Hi @GokulSNarayan
I want to see the sample code on the stackbiltz.

At the time, I was mocking zustand, but I remember being able to solve the problem by simply using testing-library/react without mocking.

[dbritto-dev]

@Ryo-Kgym that issue @GokulSNarayan was facing was he put the __mocks__ folder in the wrong place under src folder instead of root folder