为 Typescript、es6 和 Webpack 2 配置 Jest

Posted 2023-02-22

【中文标题】为 Typescript、es6 和 Webpack 2 配置 Jest

【英文标题】：Configuring Jest for Typescript, es6 and Webpack 2

【发布时间】：2017-06-24 03:06:21

【问题描述】：

在我的 tsconfig 中，我目前将模块 compilerOption 属性设置为“es6”，但是，当我运行 Jest 时，我收到以下错误：

Test suite failed to run

  ("Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)require('ts-jest').install();import  User  from './models/user;
                                                                                                                         ^^^^^^
SyntaxError: Unexpected token import

   at transformAndBuildScript (node_modules\jest-runtime\build\transform.js:320:12)
      at process._tickCallback (internal\process\next_tick.js:103:7)

如果我将模块切换到“commonJS”，那么测试运行良好。但是，我不需要这样做，因为 babel 插件“transform-es2015-modules-commonjs”应该为我将 ES 模块转换为 commonJS（或者我的理解不正确？）。

我怀疑我错误地配置了一些小而重要的东西。谁能指出我遇到麻烦的地方？

提前致谢。

.tsconfig

    
      "compilerOptions": 
        "module": "es6", // Changing this to "commonJS" resolves the error.
        "target": "es6",
        "moduleResolution": "node",
        "baseUrl": "src",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": false,
        "sourceMap": true,
        "outDir": "ts-build",
        "jsx": "preserve",
        "experimentalDecorators": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true
      ,
      "filesGlob": [
          "**/*.ts",
          "**/*.tsx"
      ],
      "exclude": [
        "node_modules",
        "dist"
      ]
    

.babelrc

  "presets": [
    "es2015",
    "react",
    "stage-0",
    "modules": false
  ],
  "env": 
    "test": 
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    
  

package.json 的 Jest 部分

  "jest": 
    "transform": 
      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    ,
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleNameMapper": 
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    ,
    "testPathDirs": [
      "./src"
    ],
    "collectCoverage": true,
    "testResultsProcessor": "<rootDir>/node_modules/ts-jest/coverageprocessor.js"
  

注意：我还按照official recommendations 设置了 webpack 2。

【参考方案1】：

这似乎是known issue，进一步参考here。

我能够通过为 jest 添加单独的覆盖 tsconfig 设置来解决此问题。

 "globals": 
      "__TS_CONFIG__": 
        "module": "commonjs",
         jsx": "react"
      

因此我的项目可以继续以 es6 模块为目标。

这给了我部分解决方案。最终的解决方案是这样的

package.json

  "private": true,
  "version": "0.0.0",
  "name": "example-typescript",
  "dependencies": 
    "react": "16.4.1",
    "react-dom": "16.4.1",
    "lodash-es": "^4.17.11"
  ,
  "devDependencies": 
    "babel-cli": "^6",
    "babel-core": "^6",
    "babel-plugin-source-map-support": "^2.0.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6",
    "babel-preset-env": "^1.6",
    "babel-preset-stage-0": "^6",
    "babel-runtime": "^6",
    "babel-jest": "^22.0.3",
    "babel-plugin-transform-imports": "^1.5.1",
    "babel-preset-es2015": "^6.24.1",
    "@types/jest": "^23.1.1",
    "@types/node": "^10.12.3",
    "jest": "*",
    "typescript": "*",
    "ts-jest": "*"
  ,
  "scripts": 
    "test": "jest"
  ,
  "jest": 
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": 
      "^.+\\.(|ts|tsx)$": "ts-jest",
      "^.+\\.(js|jsx)$": "babel-jest"
    ,
    "transformIgnorePatterns": [],
    "globals": 
      "__TS_CONFIG__": 
        "target": "es2015",
        "module": "commonjs",
        "jsx": "react"
      
    ,
    "testMatch": [
      "**/__tests__/*.+(ts|tsx|js)"
    ]
  

与 .babelrc

  "env": 
    "test":
      "passPerPreset": true,
      "presets": [
        "babel-preset-env"
      ],
      "plugins": [
        "transform-es2015-modules-commonjs",
        "transform-es2015-classes"
      ]
    
  

【讨论】：

不用担心，很高兴它对您有所帮助。

【参考方案2】：

大多数时候它的原因是缺少安装babel-jest

【讨论】：

这听起来像是评论，而不是答案

因为我不确定 100%，如果它是正确的解决方案，我会更新答案。设置可能有很多问题

这正是 cmets 的目的：获取更多信息以便发布一个好的答案

嘿，谢谢，但我确实安装了 babel-jest。关于这一点，我已经更新了我的问题以包含 package.json 的 jest 部分。