unit-testing - 将 (Zusand) 函数模拟与 Jest 一起使用会导致“TypeError：create is not a function”

问题描述

我正在关注Zusstand wiki 来实施 testing，但提供的解决方案不适用于应用程序渲染的基本测试。我的项目建立在Electron React Boilerplate样板项目之上。

这是完整的错误。Jest 使用 node withexperimental-vm-modules因为我遵循Jest 文档来支持 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文件顶部，正常导入 Zusand 时使用import create from 'zustand'.

开玩笑的配置package.json：

    ...
    "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文件与 Zusand wiki 测试页面中的文件完全相同。无论我是否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"

我不知道还有什么相关的，如果需要其他任何东西，请告诉我。任何和所有的帮助表示赞赏，感谢您的时间。

标签： unit-testingjestjsbabel-jestzustand

unit-testing - 将 (Zusand) 函数模拟与 Jest 一起使用会导致“TypeError：create is not a function”

问题描述

解决方案

推荐阅读