Jest-preset-angular: [bug?] Why moduleFileExtensions: [json] causes transformation error (Unexpected token import)?

[lacolaco]

Here are weird behaviors happening in my environment.

At first, I tried to set up my Angular CLI project to use jest-preset-angular, but it didn't work.

    /Users/laco/Works/angular-jest-example/src/setupJest.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import 'jest-preset-angular';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

My src/setupJest.ts is only one line.

import 'jest-preset-angular';

And my jest.config.js is very simple. Other files are never modified from Angular CLI default.

module.exports = {
  preset: 'jest-preset-angular',
  setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts'
};

But when I added moduleFileExtensions to jest.config.js, it works well.

module.exports = {
  preset: 'jest-preset-angular',
  moduleFileExtensions: ['ts', 'js', 'html'],
  setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts'
};

Notable point is that moduleFileExtensions must not include json.

In jest-preset.json, moduleFileExtensions is defined as below.

"moduleFileExtensions": [
    "ts",
    "js",
    "html",
    "json"
  ],

As well as that, if I add json to my moduleFileExtensions, it doesn't work.

module.exports = {
  preset: 'jest-preset-angular',
  moduleFileExtensions: ['ts', 'js', 'html', 'json'], 
  setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts'
};

json causes a transformation error. It's very weird.

My question:

• Why json causes a transformation error?
• Is my workaround (moduleFileExtensions: ['ts', 'js', 'html']) bad solution?

Thanks.

[lacolaco]

I found out the workaround from nrwl/nx project.

https://github.com/nrwl/nx/blob/master/packages/schematics/src/collection/jest/files/jest.config.js

[ahnpnl]

cc @thymikee

[thymikee]

That's weird, I wouldn't expect this kind of error in this case. Do you have a repro?

[lacolaco]

I'll make it. 👍

[lacolaco]

I tried to create a repro, but I couldn't.
Currently, that error cannot be solved...

https://github.com/lacolaco/jest-preset-angular-issues194

1. ng new
2. yarn add jest jest-preset-angular
3. Add jest.config.js and src/setupJest.ts

Then Unexpected token error happens.
So I followed https://github.com/thymikee/jest-preset-angular#unexpected-token-importexportother

1. fix src/tsconfig.spec.json ( module:commonjs)

But it isn't solved... I gave up 😇

[ahnpnl]

I think something wrong when reading js config because this doesn't happen to json config in package.json

[lacolaco]

@ahnpnl I've changed my tsconfig.spec.json to set module: commonjs as according to README.
In additional, I tried the following approachs, but these didn't work.

• add allowJS . target: es5, basePath: '' as well as example
• move configuration from jest.config.js to package.json

  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.3",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "jest": "^23.6.0",
    "jest-preset-angular": "^6.0.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }

[ahnpnl]

your latest changes in your repo worked for me. I think you need to run yarn jest --clearCache first. Jest caches your configuration.

[lacolaco]

@ahnpnl Ahhhh, it works well after clearing cache!! Thank you so much!!
And I confirmed the key point is module: commonjs as written in README. That instruction is totally correct.

[ahnpnl]

also when I move the config to js file, run yarn jest --clearCache and then yarn test it also works for me. I think first of all before you change tsconfig.spec.json, it failed with the error unexpected token import. After that jest already cached your configuration so when you change tsconfig.spec.json it didn't reflect to the new changes.

[lacolaco]

You're right. I guess the first problem (about moduleFileExtensions) was caused the same reason...

At now, my situation is solved, so I close this issue. Thank you for your kind replies.