Fails to compile with NGX Logger

[jensengar]

I'm sure NGX Logger is doing something a little different, but I don't know if you have a solution to this. All my tests that use NGXLogger fail with the following error:

 FAIL  src/app/components/create-user/create-user.component.spec.ts
  ● Test suite failed to run

    /Users/myUser/myApp/node_modules/ngx-logger/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { CommonModule, isPlatformBrowser } from '@angular/common';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      17 | import { WindowService } from './services/window-service/window.service';
      18 | import { NoopAnimationsModule } from '@angular/platform-browser/animations';
    > 19 | import { NGXLogger } from 'ngx-logger';
      20 | 
      21 | class MockStateService {
      22 |   params = {};

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (src/app/common-test-module.ts:19:20)
      at Object.<anonymous> (src/app/components/create-user/create-user.component.spec.ts:8:28)

Now one thing I noticed is NGXLogger seems to compile all its sources to a .js file. Could this be the problem? Do you have a solution by chance? Everything worked fine with karma/jasmine, but I hate the karma runner so I'm trying to change.

[thymikee]

Looks like ngxlogger doesn't transpile their source, you might need to adjust transformIgnorePatterns for that https://github.com/thymikee/jest-preset-angular#unexpected-token-importexportother

[thymikee]

Generally I recommend to look at Troubleshooting guide in this repo readme :)

[jensengar]

I'm sorry, I should have saw that first... I tried to follow the troubleshooting guide, but I'm still having the issue. Here's what I did:

section in package.json:

  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
    "transformIgnorePatterns": [
      "node_modules/ngx-logger"
    ],
    "transform": {
      "^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
      "^.+\\.js$": "babel-jest"
    }
  },

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

and I added the .babelrc:

{
  "presets": ["env"]
}

Now this did increase the run time from ~15 seconds to over 2 minutes so I know something happened, but the errors still seem to be the same. Is there a way to just build/transpile the ngx-logger so run times are still nice and fast or would I need to work with the ngx-logger folk to get their project transpiled as it should be?

[thymikee]

This is a whitelist:

"transformIgnorePatterns": [
  "node_modules/(?!@ngrx|angular2-ui-switch|ng-dynamic|your-module|ngx-logger|whatevs)"
]

Jest by default doesn't transpile code in node_modules, because of what you experience. You can opt-out of this behavior by providing a whitelist, which is represented by this ugly regexp with negative lookahead ((?!...) part is important here!). This regex tells jest to not transpile (ignore) any node_module, except for @ngrx, angular2-ui-switch and so on.

[jensengar]

I see. That did the trick. Thanks so much for your time!

[kodurianil]

for me ngx-cookie-service is giving trouble, @thymikee could you please give me a suggestion.

Details:

C:\anil\workspace\node_modules\ngx-cookie-service\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './cookie-service/cookie.service';
                                                                                         ^^^^^^

SyntaxError: Unexpected token export

  4 | import { Router } from '@angular/router';
  5 | import { NGXLogger } from 'ngx-logger';
> 6 | import { CookieService } from 'ngx-cookie-service';
    | ^

And i added ngx-cookie-service in package.json

"jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setup-jest.ts",
    "roots": [
      "<rootDir>/src/"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|ngx-cookie-service|ngx-logger)"
    ]
  }