为Typescript,es6和Webpack 2配置Jest

Question

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

注意:我也遵循了建立webpack 2 的官方建议.

Answer 1

这似乎是一个已知问题，请在此处进一步参考。

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

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

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

这给了我部分解决方案。最终的解决方案看起来像这样

包.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"
      ]
    }
  }
}