jest-preset-angular: SyntaxError: Unexpected token import

Be sure that I figured it out the hard way 😉 I’ve evaluated the usage of jest a while ago in my angular template and faced a similar problem with lodash-es: https://github.com/DorianGrey/ng-webpack-template/commit/dce61c91cdfbfa82040970307b01025ac00b1914

Technically, it should be sufficient to just use a babel config like this:

{
   "plugins": [
     "transform-es2015-modules-commonjs"
   ]
 }

This is included in the env preset, in addition to several other plugins and a basic config that can deal with way more cases than the “simple” one I’ve had with lodash-es, which is why I suggested it in favor of the single plugin version.

@kidd3 ok sry my bad. I forget. Yes you need .babelrc for setting preset.

Here is config:

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

and here is babelrc contents:

{
    "presets": ["env"]
}

It should be npm run test -- --no-cache

None of this works of angular 6 … Is there any proper solution for angular 6?

By default Jest doesn’t transpile code in node_modules, hence the whitelist in transformIgnorePatterns. You can set it to:

   "transformIgnorePatterns": [
     "node_modules"
   ]

if you want to transpile all node_modules (not recommended though). It’s advised to add untranspiled node modules to this list, so you’d end up with something like:

   "transformIgnorePatterns": [
     "node_modules/(?!@ngrx|service-layer|@angular/core|rxjs)"
   ]

Hi @mo-norant , this issue has been answered in #185 . It is related to your tsconfig.spec.json. You need to add module: commonjs and then run jest --clearCache. After that you can run your test again.

We also have an example app with base configuration in our example folder or you can take a look at my sample repo at https://github.com/ahnpnl/jest-angular

Nope. Thank you to @DorianGrey. He perfectly explained everything there: https://github.com/thymikee/jest-preset-angular/issues/66#issuecomment-323696947

Nope. Main is adding .babelrc. http://prntscr.com/gcxyu4

@sharikovvladislav the only thing I can see that has changed is:

"transformIgnorePatterns": [
      "node_modules/(?!jest-test)"
    ]

becomes:

"transformIgnorePatterns": [
      "node_modules/(?!(jest-test))"
    ]

For me this 1 change of adding the extra brackets isn’t fixing the issue, did I miss something?

Sorry, the project I am working on is difficult to share but I will see if I can recreate a repo. The full error i get is:

Test suite failed to run

/Users/user/Documents/App/mainApp/node_modules/service-layer/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Injectable, NgModule } from '@angular/core';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
  at Object.<anonymous> (src/request-abstract.service.ts:3:81)
  at Object.<anonymous> (src/services/registration.service.ts:3:87)

in addition, regarding to test react-library with typescript and jest, please refer to ts-jest