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

Hi!

I have this problem:

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/$1"
      ]
    ],
    "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$

You can see what how I set up jest here: https://github.com/sharikovvladislav/ng2-diary-book/tree/feature/try-add-jest

Also, I debugged a bit and realised that angularfire2 deploy their lib without transpiling, so I have to do it by myself. Thats why I added this to the initial config you suggest:

    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!@ngrx|angularfire2)"
    ]

Repro:

  1. Clone my repo https://github.com/sharikovvladislav/ng2-diary-book and checkout branch try-add-jest
  2. Run yarn install
  3. Run npm run jest
  4. Here is the problem.

I also described everything there https://stackoverflow.com/questions/45786951/why-i-got-syntax-error-on-jest-run-when-transpiling-is-on and there https://github.com/angular/angularfire2/issues/1118

I also tried to set empty array to transformIgnorePatterns and I still get same error. Tests are running for centuries so jest (babel) is trying to transpile whole project (including node_modules), but I still get same problem.

Can you please help me?

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 3
  • Comments: 37 (28 by maintainers)

Most upvoted comments

If the distributed package contains ES2015+ code, you have to preprocess it via babel - typescript (and thus ts-jest) may only tolerate it, but do not transpile it. The babel options are intended for chaining transpilation, which is required for allowSyntheticDefaultImports (at least in most cases).

Here is an example how to set this up properly…

  • Adopt Jest options to be like:
 "transform": {
    "^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
    "^.+\\.js$": "babel-jest"
  },
  "transformIgnorePatterns": ["node_modules/(?!(@ngrx|angularfire2))"]
  • Add a .babelrc like:
{
  "presets": ["env"]
}

(Preset can be installed via yarn add --dev babel-preset-env).

@DorianGrey Thank you very much for your suggestion. You fully solved my problem. Also thank you for next troubleshooting. You helped a lot!

@thymikee thank you for your work with jest-preset-angular. I want to try snapshot testing. Since I solved all problems at the moment I will do it in the near future.

I’m going to close this, as it looks like the same issue as #64. Let’s discuss it there.

Do you have a tsconfig for specs? Because you need TS to transpile ES6 modules to commonjs: like here: https://github.com/thymikee/jest-preset-angular/blob/f3970dce5a059efca4a14b1e48137acd71e33b73/example/src/tsconfig.spec.json#L5

@thymikee ts-jest does use babel internally for some things, such as synthetic default modules. If you want to use a .babelrc file you’ll have to manually toggle the switch however: https://github.com/kulshekhar/ts-jest#using-babelrc