为Typescript，es6和Webpack 2配置Jest [英] Configuring Jest for Typescript, es6 and Webpack 2

问题描述

在我的tsconfig中，我当前将模块的compileerOption属性设置为"es6"，但是，当我运行Jest时，会收到以下错误:

In my tsconfig I currently have the module compilerOption property set to "es6" however, when I run Jest I receive the following error:

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(或者我的理解不正确吗?).

If I switch the module to "commonJS" then the tests run fine. However, I shouldn't need to do this as the babel plugin "transform-es2015-modules-commonjs" should transpile ES modules to commonJS for me (or is my understanding incorrect?).

我怀疑我配置了一些小但重要的东西.谁能指出我遇到麻烦的地方了?

I suspect I've misconfigured something small but important. Can anyone point out where I'm running into trouble?

谢谢.

.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": {
    "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进行设置的建议.

推荐答案

这似乎是此处.

This appears to be a known issue, further reference here.

我可以通过为玩笑添加单独的替代tsconfig设置来解决此问题.

I was able to workaround the issue by adding separate override tsconfig settings for jest.

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

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

Thus my project can continue to target es6 modules.

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

package.json

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

这篇关于为Typescript，es6和Webpack 2配置Jest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！