Can not run unit tests through jest framework because of SyntaxError: Unexpected token export

Question

我对 jest 和 angularfire2 有疑问。我设置了 jest，然后出现错误 SyntaxError: Unexpected token export。完整输出：

 PASS  src/app/diary/components/diary.spec.ts
 FAIL  src/app/diary/containers/my-dairy-page.spec.ts
  ● Test suite failed to run

    /Users/svlad/dev/ng2-diary-book/node_modules/angularfire2/auth.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './auth/auth';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/app/core/containers/app.ts:18:14)
      at Object.<anonymous> (src/app/core/core.module.ts:15:13)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.467s

调试输出

在调试模式下输出，以便我们可以看到完整的笑话配置：

sharikovvlad:ng2-diary-book svlad$ npm run jest -- --debug

> angular-ngrx-diary@0.0.0 jest /Users/svlad/dev/ng2-diary-book
> jest "--debug"

{
  "config": {
    "automock": false,
    "browser": false,
    "cache": true,
    "cacheDirectory": "/var/folders/pf/510z0sc56zq3hvfb7lyr0jlr0000gn/T/jest_dx",
    "clearMocks": false,
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ],
    "globals": {
      "ts-jest": {
        "tsConfigFile": "src/tsconfig.spec.json"
      },
      "__TRANSFORM_HTML__": true
    },
    "haste": {
      "providesModuleNodeModules": []
    },
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleFileExtensions": [
      "ts",
      "js",
      "html",
      "json"
    ],
    "moduleNameMapper": [
      [
        "(.*)",
        "/Users/svlad/dev/ng2-diary-book/src/"
      ]
    ],
    "modulePathIgnorePatterns": [],
    "name": "520410dc90eed72792e9fd01593c2a6d",
    "resetMocks": false,
    "resetModules": false,
    "rootDir": "/Users/svlad/dev/ng2-diary-book",
    "roots": [
      "/Users/svlad/dev/ng2-diary-book"
    ],
    "setupFiles": [],
    "setupTestFrameworkScriptFile": "/Users/svlad/dev/ng2-diary-book/src/setupJest.ts",
    "snapshotSerializers": [],
    "testEnvironment": "jest-environment-jsdom",
    "testMatch": [],
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "testRegex": "(/__tests__/.*|\.(test|spec))\.(ts|js)$",
    "testRunner": "/Users/svlad/dev/ng2-diary-book/node_modules/jest-jasmine2/build/index.js",
    "testURL": "about:blank",
    "timers": "real",
    "transform": [
      [
        "^.+\.(ts|js|html)$",
        "/Users/svlad/dev/ng2-diary-book/node_modules/jest-preset-angular/preprocessor.js"
      ]
    ],
    "transformIgnorePatterns": [
      "/Users/svlad/dev/ng2-diary-book/node_modules/(?!@ngrx|angularfire2)"
    ]
  },
  "framework": "jasmine2",
  "globalConfig": {
    "bail": false,
    "coverageReporters": [
      "json",
      "text",
      "lcov",
      "clover"
    ],
    "expand": false,
    "mapCoverage": true,
    "noStackTrace": false,
    "notify": false,
    "projects": [
      "/Users/svlad/dev/ng2-diary-book"
    ],
    "rootDir": "/Users/svlad/dev/ng2-diary-book",
    "testPathPattern": "",
    "testResultsProcessor": null,
    "updateSnapshot": "new",
    "useStderr": false,
    "verbose": null,
    "watch": false,
    "watchman": true
  },
  "version": "20.0.4"
}
 PASS  src/app/diary/components/diary.spec.ts
 FAIL  src/app/diary/containers/my-dairy-page.spec.ts
  ● Test suite failed to run

    /Users/svlad/dev/ng2-diary-book/node_modules/angularfire2/auth.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './auth/auth';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/app/core/containers/app.ts:18:14)
      at Object.<anonymous> (src/app/core/core.module.ts:15:13)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.709s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular-ngrx-diary@0.0.0 jest: `jest "--debug"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the angular-ngrx-diary@0.0.0 jest script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/svlad/.npm/_logs/2017-08-20T21_09_30_035Z-debug.log
sharikovvlad:ng2-diary-book svlad$

我应该不会出现语法错误，因为这段代码应该被转译为 ES5（因为配置如此规定）。为什么我明白了？

同样奇怪的是 即使我将 transformIgnorePatterns 设置为空数组，这意味着 什么都不忽略 我会得到同样的错误 .

版本信息

Angular: 4.3.5

Firebase: 4.2.0

Angular火： 4.0.0-rc0

其他（例如Ionic/Cordova、节点、浏览器、操作系统）：

sharikovvlad:~ svlad$ node -v
v8.3.0
sharikovvlad:~ svlad$ yarn --version
0.27.5
sharikovvlad:~ svlad$ macosVersion
10.12.6

如何重现这些条件

设置和重现步骤

安装jest: yarn add --dev jest jest-preset-angular @types/jest
添加文件 <rootDir>/src/setupJest.ts，内容为：import 'jest-preset-angular';
将笑话块添加到 package.json：

 "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!@ngrx|angularfire2)"
    ]
  },

但实际上你可以：

克隆我的 repo https://github.com/sharikovvladislav/ng2-diary-book/tree/feature/try-add-jest 和 checkout 分支 try-add-jest
运行 yarn 安装
运行 npm 运行开玩笑
问题来了。

Answer 1

核心问题是ts-jest（jest-preset-angular基于ts-jest）不转译JS文件。

所以我需要一些东西来完成这项工作。 Jest 提供开箱即用的 babel-jest 转译器。所以我需要配置 jest 这样他就可以转译 js 和 ts 文件。

这是我最后的玩笑配置 (package.json):

"jest": {
  "preset": "jest-preset-angular",
  "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
  "transform": {
    "^.+\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
    "^.+\.js$": "babel-jest"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!(@ngrx|angularfire2))"
  ],
  "globals": {
    "ts-jest": {
      "tsConfigFile": "src/tsconfig.spec.json",
      "useBabelrc": true
    },
    "__TRANSFORM_HTML__": true
  }
},

Can not run unit tests through jest framework because of SyntaxError: Unexpected token export