Not working with an Angular 7 project?

[maxime1992]

Describe the bug
With the latest from Angular (cli, core, etc) in v7 it seems to be broken.

The error is:

 ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/maxime/Desktop/ng-with-jest/src/app/app.component.spec.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { TestBed, async } from '@angular/core/testing';
                                                                                                    ^

    SyntaxError: Unexpected token {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

To Reproduce
Steps to reproduce the behavior:

1. Create a new project using CLI v7
2. Add Material or another lib to have some imports
3. Launch jest

Desktop (please complete the following information):

• OS: [e.g. Mac, Windows]: Ubuntu
• Node version: [e.g. 8.11.3]: 10.12
• NPM or Yarn version [e.g. Yarn 1.3.0]: yarn v1.10.1
• App type [e.g. Angular CLI, Nx Workspace] Angular CLI
• Angular version [e.g. @angular/core: "6.0.3"] 7

PS:

this might be related to https://github.com/thymikee/jest-preset-angular#unexpected-token-importexportother but tried and couldn't get it working...

[schuchard]

Hi @maxime1992, after adding material did you try adding @material to the transformIgnorePatterns - https://github.com/thymikee/jest-preset-angular#adjust-your-transformignorepatterns-whitelist. I'll try to reproduce myself soon.

[maxime1992]

Arf no. I did not. (Sorry, new to all that conf). Will do.

[sylvainleduby]

This issue also happens on an Angular 6 project just created by Angular CLI:

 FAIL  src/app/app.component.spec.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    C:\Temp\angular-jest\src\setup-jest.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import 'jest-preset-angular';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

I think the schematic should change this two elements:

• Default compilerOptions.module in tsconfig.json is es2015 but Jest needs commonjs: set commonjs in tsconfig.spec.json
• Add minimal transformIgnorePatterns in jest.config.js:

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

To Reproduce
Steps to reproduce the behavior:

1. Create a new project using CLI v6 (6.2.5)
2. Add Jest using this schematic (ng g @briebug/jest-schematic:add)
3. Launch jest

Desktop

OS: Windows
Node version: 8.12.0
NPM or Yarn version : npm 6.4.1
App type: Angular CLI
Angular version: 6.1.10

[Foxandxss]

Proposed solution by @sylvainleduby does the trick. Thanks

[schuchard]

Thanks for the help debugging @sylvainleduby and @Foxandxss. Making the module change does appear to fix the issue with ng7 apps. I've got a branch with that change that I'll work on getting out soon.

For the transformIgnorePatterns property, I think I'll add the prop by default with no arguments in the hopes that it helps users, but I think it will be hard to know what is a good set of default packages that need to be transformed.

[schuchard]

In the meantime the solution for this issue is to set the tsconfig.spec.json.compilerOptions.module = commonjs

[dwiyatci]

Hey guys, I'm also currently working on an Angular 7 project, but still got pretty much the same error even though I've included the library I depend on (lodash-es) to my transformIgnorePatterns. Not sure what I'm missing here. 😕

jest.config.js

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['src'],
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
  moduleNameMapper: {
    '@app/(.*)': '<rootDir>/src/app/$1',
    '@assets/(.*)': '<rootDir>/src/assets/$1',
    '@core/(.*)': '<rootDir>/src/app/core/$1',
    '@env': '<rootDir>/src/environments/environment',
    '@src/(.*)': '<rootDir>/src/src/$1',
    '@state/(.*)': '<rootDir>/src/app/state/$1'
  },
  transformIgnorePatterns: ['node_modules/(?!(jest-test|lodash-es))']
};

Error

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/glenn/cumulocity/asset-management-app/node_modules/lodash-es/lodash.js:10
    export { default as add } from './add.js';
    ^^^^^^

    SyntaxError: Unexpected token export

      1 | import { Injectable } from '@angular/core';
    > 2 | import { identity } from 'lodash-es';
        | ^
      3 | import { Superhero } from './superhero.model';
      4 | 
      5 | /**

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:440:17)
      at Object.<anonymous> (src/app/superhero/superhero.service.ts:2:1)

[dwiyatci]

Turns out I have to leverage the TS compiler to allow compiling JS files, too. Ironically, it's actually also been there in the jest-preset-angular docs all this time (https://github.com/thymikee/jest-preset-angular#allow-js-files-in-your-ts-compileroptions). 😅

Maybe it's worth it to turn on the option, i.e. "allowJs": true, by default in the schematics?