将(Zustand)函数mock与Jest一起使用会导致“TypeError：create不是函数”

z9ju0rcb 于 2023-04-03 发布在 Jest

关注(0)|答案(3)|浏览(266)

我正在关注Zustand wiki to implement testing，但提供的解决方案不适用于应用渲染的基本测试。我的项目构建在Electron React Boilerplate样板项目之上。
这里是完整的错误。Jest正在使用带有experimental-vm-modules的节点，因为我遵循了the Jest docs来支持ESM模块。

$ cross-env NODE_OPTIONS=--experimental-vm-modules jest
(node:85003) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
jest-haste-map: Haste module naming collision: myproject
  The following files share their name; please adjust your hasteImpl:
    * <rootDir>/package.json
    * <rootDir>/src/package.json

 FAIL  src/__tests__/App.test.tsx
  ● Test suite failed to run

    TypeError: create is not a function

      12 | }
      13 |
    > 14 | const useNotifs = create<NotifsState>(
         |                   ^
      15 |   // devtools(
      16 |   (set) => ({
      17 |     notifStore: notifsDefault.notifStore,

      at src/state/notifs.ts:14:19
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:387:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:408:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        11.882 s
Ran all test suites.
error Command failed with exit code 1.

在notifs.ts文件的顶部，Zustand通常与import create from 'zustand'一起导入。
package.json中的Jest配置：

...
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/mocks/fileMock.js",
      "\\.(css|less|sass|scss)$": "identity-obj-proxy",
      "zustand": "<rootDir>/src/__mocks__/zustand.js",
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(zustand)/)",
      "<rootDir>/src/node_modules/"
    ],
    "moduleDirectories": [
      "node_modules",
      "src/node_modules"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "ts",
      "tsx",
      "json"
    ],
    "moduleDirectories": [
      "node_modules",
      "src/node_modules"
    ],
    "extensionsToTreatAsEsm": [
      ".ts",
      ".tsx"
    ],

    ...

我留下的./src/__mocks__/zustand.js文件与Zustand wiki测试页面完全相同。无论我是否在transformIgnorePatterns中有zustand，我都会收到相同的错误。
我的Babel配置在插件部分包含[require('@babel/plugin-proposal-class-properties'), { loose: true }],，而output.library.type是'commonjs2'
我的tsconfig.json将compilerOptions.module设置为"CommonJS"，项目的package.json"type"字段设置为"commonjs"。
依赖项版本：

"@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "@babel/preset-typescript": "^7.12.7",
    "@babel/register": "^7.12.1",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "babel-jest": "^27.0.6",
    "babel-loader": "^8.2.2",
    "jest": "^27.0.6",
    "regenerator-runtime": "^0.13.9",
    "source-map-support": "^0.5.19",
    "typescript": "^4.0.5",
    "webpack": "^5.5.1",
    "zustand": "^3.5.5"

我不知道还有什么可以相关的，只是让我知道，如果有任何其他的需要。任何和所有的帮助表示感谢，感谢您的时间。

jestjs

来源：https://stackoverflow.com/questions/68896812/using-a-zustand-function-mock-with-jest-results-in-typeerror-create-is-not-a

3条答案

按热度按时间

hs1rzwqc1#

为此，您应该使用应用程序的实际商店

const initialStoreState = useStore.getState()
 
 beforeEach(() => {
    useStore.setState(initialStoreState, true)
  })

useStore.setState({ me: memberMockData, isAdmin: true })

文件看起来不太对。所以不要照做。

赞(0）回复(0）举报 2023-04-03

disbfnqx2#

看起来和我遇到的错误类似：

TypeError: store.getState is not a function

   9 | export const create = <S>(createState: StateCreator<S>) => {
  10 |      const store = actualCreate(createState);
> 11 |      const initialState = store.getState();
     |                                 ^
  12 |      storeResetFns.add(() => store.setState(initialState, true));
  13 |      return store;
  14 | };

在我的例子中，这是由于没有像这样curry create函数造成的：

👇
const create = () => <S>(createState: StateCreator<S>) => {
  const store = actualCreate(createState);
  const initialState = store.getState();
  storeResetFns.add(() => store.setState(initialState, true));
  return store;
};

参见本期。

赞(0）回复(0）举报 2023-04-03

lokaqttq3#

use jest 28.0.0-alpha.0将简单地解决这个问题。我认为问题是zustand使用'.mjs'作为入口点。

赞(0）回复(0）举报 2023-04-03