Reactjs 为Typescript、es6和Webpack 2配置Jest

在我的tsconfig中，我当前将模块编译器选项属性设置为“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)

.babelrc

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

包的Jest部分。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"
  }

“开玩笑”：{
“转变”：{
“\\（ts|tsx）$”：“/node\u modules/ts jest/preprocessor.js”
},
“moduleFileExtensions”：[
“ts”，
“tsx”，
“js”
],
“testRegex”：“（/\uuuu测试/*\ \（测试规范））\ \（ts | tsx | js）$”，
“moduleNameMapper”：{
“\ \（jpg | jpeg | png | gif | eot | otf | webp | svg | ttf | woff | woff2 | mp4 | webm | wav | mp3 | m4a | aac | oga |）$”：“/（uu mocks |/uu/fileMock.js，
“\\（css | less）$”：“/\uu mocks\uuu/styleMock.js”
},
“testPathDirs”：[
“/src”
],
“覆盖范围”：正确，
“testResultsProcessor”：“/node_modules/ts jest/coverageprocessor.js”
}

---

注意：我也遵循了webpack 2的设置方法。

大多数情况下，它的安装丢失的原因似乎是进一步的参考

我可以通过为jest添加单独的override tsconfig设置来解决这个问题

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

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

这给了我部分解决方案。最终的解决方案如下所示

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

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

连同 B.法律改革委员会

---

这听起来像是一个评论，而不是一个答案，因为我不是100%确定，我会更新答案，如果它是正确的解决方案。设置中有很多东西可能是错误的，这正是评论的目的：获取更多信息以发布一个好的答案嘿，谢谢，但我确实安装了babel jest。在这一点上，我已经更新了我的问题，包括package.json的jest部分。不用担心，很高兴它有所帮助。

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