Nx: where need to specify transformIgnorePatterns to fix "Jest encountered an unexpected token

[debaprasad-267727]

_Please make sure you have read the submission guidelines before posting an issue_

Prerequisites

Please answer the following questions for yourself before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• [ ] I am running the latest version
• [ ] I checked the documentation and found no answer
• [ ] I checked to make sure that this issue has not already been filed
• [ ] I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

Please describe the behavior you are expecting

Current Behavior

What is the current behavior?

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. step 1
2. step 2
3. ...

Context

Please provide any relevant information about your setup:

• version of Nx used
• version of Angular CLI used
• angular.json configuration
• version of Angular DevKit used
• 3rd-party libraries and their versions
• and most importantly - a use-case that fails

A minimal reproduce scenario using allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.

Failure Logs

Please include any relevant log snippets or files here.

Other

Any other relevant information that will help us help you.

[FrozenPandaz]

Hi,

Please provide a repro or more information to help me help you. 😉

This usually happens if your files are not being converted to JS properly. Or if you've removed "module": "commonjs" from your tsconfig.json.

[4kochi]

You can set this in the jest.config.js at root level.

module.exports = {
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html)$': 'jest-preset-angular/preprocessor.js'
  },
  transformIgnorePatterns: ['node_modules/(?!lodash-es/*|@angular/common/locales/*)'],
  resolver: '@nrwl/builders/plugins/jest/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  coverageReporters: ['json', 'html', 'cobertura', 'text-summary']
};

[debaprasad-267727]

Thanks for ur reply..
I did same thing but still i m getting same issue..

[debaprasad-267727]

Hi,

Please provide a repro or more information to help me help you. 😉

This usually happens if your files are not being converted to JS properly. Or if you've removed "module": "commonjs" from your tsconfig.json.

Issue for jest unexpected token.t
[packagejson file.txt](https://github.com/nrwl/nx/files/2909597/packagejson.file.txt)
xt
tesyt spec file.txt

[debaprasad-267727]

I have uploaded all the repro files plz check & let me know...

[domkrel]

I can confirm that the transformIgnorePatterns configuration does not work anymore since the update to nrwl/nx 7.7.2. (We need it for https://github.com/SebastianM/angular-google-maps)

The following configuration worked for nrwl 7.6.2 but broke after update to 7.7.2

transform: {
    '^.+\\.(ts|html)$': 'ts-jest', // 7.6.2: 'jest-preset-angular/preprocessor.js'
    '^.+\\.js$': 'babel-jest'
  },
transformIgnorePatterns: ['node_modules/(?!@agm)']

[domkrel]

This is not nx related.
Jest dropped the support for babel 6 that means that it does not read the babel.rc file anymore.
Create a babel.config.js file with your configs should solve the problem
https://jestjs.io/docs/en/getting-started#using-babel

[spencermefford]

Adding this to root jest.config.js worked for me:

"moduleNameMapper": {
    "^lodash-es$": "lodash"
}

See https://stackoverflow.com/questions/42260218/jest-setup-syntaxerror-unexpected-token-export/54117206#answer-54117206

[spencermefford]

I was wrong ☹️. Turns out that worked because I was importing my functions like this:

import {filter, size} from 'lodash-es';

rather than this:

import _filter from 'lodash-es/filter';
import _size from 'lodash-es/size';

Ugggg.

[vsavkin]

@FrozenPandaz can we close this issue?

[FrozenPandaz]

Sorry, it is hard for me to take a look without a repo to pull down.

It's quite possible that Jest removing support for babel breaks this behavior and that adding it back via https://jestjs.io/docs/en/getting-started#using-babel fixes it.

[vsavkin]

Folks, could you retry it with the latest version?

[iwanttobealight]

Adding this to root jest.config.js worked for me:

"moduleNameMapper": {
    "^lodash-es$": "lodash"
}

See https://stackoverflow.com/questions/42260218/jest-setup-syntaxerror-unexpected-token-export/54117206#answer-54117206

thank you! it works for me

[iwanttobealight]

jest.config.js

module.exports = {
  verbose: true,
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transformIgnorePatterns: ['node_modules/(?!lodash-es/*)'],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  transform: {
    "\\.(ts|tsx)?$": "ts-jest"
  },
  moduleNameMapper: {
    "^lodash-es$": "lodash"
  }
};

babel-config.js

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  plugins: [
    "dynamic-import-node",
  ],
  ignore: [
    "./node_modules"
  ]
}

[IThordGray]

Hi there,

I'm hoping someone can assist, as I'm sitting with a similar issue.

In my case, this is the package that is in question

import { path } from "@appnest/web-router";

What I've tried;

• Added this to the global jest.config.js in various forms (slashed, braces, curly braces)
  testPathIgnorePatterns: [ '/node_modules/?!(@appnest)' ]
• Added this to the local jest.config.js in various forms (slashed, braces, curly braces)
  testPathIgnorePatterns: [ '../../node_modules/?!(@appnest)' ]
• Added it to both local and global
• Added the allowJs: true to both global and local tsconfig.spec.json files
• Added a babel-config.js with content

module.exports = {
    presets: [
      "@babel/preset-env",
      "@babel/preset-typescript"
    ],
    plugins: [
      "dynamic-import-node",
    ],
    ignore: [
      "./node_modules"
    ]
  }

What I have no idea about is this part for my instance (in the jest.config.js, as mentioned in the comment above)

"moduleNameMapper": { "^lodash-es$": "lodash" }

My environment is a newly created workspace;
npm init nx-workspace@latest myworkspace
npm i @appnest/web-router

Updating app.component.ts to look as follows

import { Component, OnInit } from '@angular/core';
import { path } from "@appnest/web-router";

@Component({
  selector: 'myworkspace-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'my-app';

  ngOnInit() {
    console.log(path())
  }
}

I have no idea what to try differently

[TapaiBalazs]

@IThordGray I had a little time to fiddle around with your exact problem. I know it is probably too late, but based on your repro steps, I did the following:

Initial steps:

1. created a new nx workspace
2. installed @appnest/web-router
3. Added the changes to the app.component.ts that you have described above.

After that:

1. npm install babel-jest --save-dev
2. created a babel.config.js file with the following content:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: '12.11',
        },
        modules: 'commonjs',
      },
    ],
  ],

  plugins: [],
};

1. Updated the tsconfig.spec.json file with the "allowJS": true in its "compilerOptions" property.

2. Updated the jest.config.js file such as the following:

module.exports = {
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  globals: {
    'ts-jest': {
      diagnostics: false,
    },
  },
  transform: {
    '^.+\\.(ts|html)$': 'ts-jest',
    '^.+\\.jsx?$': 'babel-jest',
  },
  transformIgnorePatterns: ['node_modules/(?!@appnest/web-router)'],
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  coverageReporters: ['html'],
};

1. updated the import in the app.component.ts file:
   import { path } from "@appnest/web-router/util/url";

And now the tests run in that small project.

Update:

It might happen that you don't even need babel-jest.

[FrozenPandaz]

Hi, sorry about this.

This was mislabeled as stale. We are testing ways to mark _not reproducible_ issues as stale so that we can focus on actionable items but our initial experiment was too broad and unintentionally labeled this issue as stale.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[Cammisuli]

It looks like this is more of a configuration issue with the jest config file. Since we haven't had any updates on this since the bot marked this as stale, I'll close the issue.

If this is still the case with the latest version of Nx (where we do not do anything special with the jest config file anymore), a new issue can be opened with repro steps/a repo.

Thanks everyone!