unit-testing - 在 "TypeError: create is not a function"中使用 Jest 模拟 (Zustand) 函数模拟

Question

我正在关注 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 维基测试页面完全相同的文件。无论我在 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"

我不知道还有什么相关的，如果需要其他任何东西，请告诉我。感谢您的宝贵时间。

Answer 1

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

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

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

文档似乎关闭了。所以不要遵循它。