在"TypeError: create不是一个函数“中使用带有Jest结果的(Zustand)函数模拟

Question

我正在跟踪Zustand实现测试，但所提供的解决方案并不适用于应用程序呈现的基本测试。我的项目建立在电子反应样板样板项目之上。

这是完全错误。Jest在experimental-vm-modules中使用节点，因为我遵循小丑医生来支持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测试页面中的文件完全一样。无论zustand是否在transformIgnorePatterns中，我都会收到相同的错误。

我的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"

我不知道还有什么是相关的，如果还需要什么就告诉我。所有的帮助都很感谢，谢谢你的时间。

Answer 1

要做到这一点，您应该使用应用程序的实际存储。

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

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

文件看上去不像。所以别跟着它。

Answer 2

使用jest 28.0.0-alpha.0 .0只会解决这个问题。我认为问题在于zustand使用'.mjs‘作为入口点。