transformIgnorePatterns and transform options are being ignored for third party library

[edwinabt]

Hi, this is a sample repo with the problem happening:

https://github.com/edwinabt/abt-jest-ng-app

Run the regular Angular steps to run an app:

• npm install
• ng serve
• go to http://localhost:4200
• inspect the console, you should see, Yes, Google API loaded, it means the third party library, ng-gapi, loaded fine:
  

Now, the problem is with a library called ng-gapi that wraps the Google API SDK to be used in angular. When you run ng test it reports the test failed because of Jest encountered an unexpected token. I've read about this problem and tried the possible solutions, but, none are working for me.

Is this a bug? or I am doing something wrong?

[just-jeb]

I'll take a look, but as far as I can tell it's either configuration issue or ts-jest issue. I remember myself facing the same issue with Angular 5 and ts-jest (which didn't have a builder for it) so most probably it's not a jest-builder issue.
Anyways, as I said, I'll take a look and try to help you with this.

[just-jeb]

From a quick Googling I found the most probable candidate for the source of the problem.
From you screenshot I can see that the library you use is compiled to ES6 modules, while you're using commonjs modules.
This means that ES6 syntax is not recognized by jest and it has to be transpiled to commonjs.
Here is the similar issue in ts-jest.

[edwinabt]

@meltedspark thanks... will take a look at that.

[jusefb]

I am having the same issue, I am using the ngx-cookie-service library and it does not work when using jest. I have tried following instructions mentioned in this issue for jest-preset-angular but it seems that the "transform" property is not extendable when using the jest angular-builder so the code never runs through the babel-jest transform. Any help would be appreciated

[just-jeb]

Could you create a repository with a minimal reproduction?

[jusefb]

Ok, I have read the ts-jest issue that you have referred to in more detail and managed to pin point the issue to the ts-jest setting. basically when I add the following setting to ts-jest:

    "ts-jest": {
       ...
      "allowSyntheticDefaultImports": true
    }

everything starts working as expected. So my final jest.config.js looks like this:

const esModules = ['ngx-cookie-service'].join('|');

module.exports = {
  globals: {
    "__TRANSFORM_HTML__": true,
    "ts-jest": {
      "tsConfigFile": `${__dirname}\\tsconfig.spec.json`,
      "allowSyntheticDefaultImports": true
    }
  },
  preset: "jest-preset-angular",
  testURL: "https://github.com/@angular-cli-builders",
  transformIgnorePatterns: [`<rootDir>/node_modules/(?!${esModules})`],

  "transform": {
    "^.+\\.js$": "babel-jest"
  }
};

hopefully this will be useful to anyone else who experiences the same issue

[just-jeb]

@jusefb That is great, thanks for sharing! I'm thinking of creating a section for frequent problems in the readme. Would you mind issuing a PR for that?

[jusefb]

Sure, never done it before :) will you need to create the section first?

[just-jeb]

You are welcome to create it yourself.