How to set transformIgnorePatterns to fix "Jest encountered an unexpected token"

First of all, thanks for bringing Jest to Angular!

I previously had configured Jest in my Angular project by myself. In order to use lodash-es, I had to set transformIgnorePatterns to inlude the path to lodash-es:

  "jest": {
    "preset": "jest-preset-angular",
...
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!lodash-es/.*)"
    ],

Now, after migrating to the Jest config provided by Nx, I don’t know where I can set this option. My tests currently fail with this error:

    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:\Users\Marvin\Projekte\hypershop-ng\node_modules\lodash-es\lodash.js:10
    export { default as add } from './add.js';
    ^^^^^^

    SyntaxError: Unexpected token export

      1 | import { ComponentFixture } from "@angular/core/testing";
    > 2 | import { isUndefined } from "lodash-es";
        | ^
      3 |
      4 | export function expectElementFromFixture<T>(fixture: ComponentFixture<T>, domQuery?: string): jasmine.Matchers<{} | null> {
      5 |     return expect(elementFromFixture(fixture, domQuery));

      at ScriptTransformer._transformAndBuildScript (../../node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (../../libs/common/src/test/expect.ts:2:1)
      at Object.<anonymous> (../../libs/common/src/test/index.ts:1:1)

Thanks for your help

Issue Analytics

State:
Created 5 years ago
Reactions:41
Comments:29 (10 by maintainers)

Top GitHub Comments

72reactions

llwtcommented, Oct 12, 2018

I had to remove the <rootDir> from ours:

const esModules = ['@agm', 'ngx-bootstrap'].join('|');
// ...
module.exports = {
  //...
    transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
  // ...
};

56reactions

llwtcommented, Oct 12, 2018

One other option is to pull in babel-jest and tell it to transpile those js files.

From the jest-preset-angular docs:

Transpile js files through babel-jest

Some vendors publish their sources without transpiling. You need to say jest to transpile such files manually since typescript (and thus ts-jest used by this preset) do not transpile them.

Install babel-preset-env and add .babelrc (or modify existing if needed) with that contents:
{
  "presets": ["env"]
}
Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):
{
  "jest": {
    "transform": {
      "^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
      "^.+\\.js$": "babel-jest"
    },
  }
}

We took that and tweaked it to only pass the js files needed through:

const esModules = ['@agm', 'ngx-bootstrap', 'lodash-es'].join('|');

module.exports = {
  // ...
  transform: {
    [`(${esModules}).+\\.js$`]: 'babel-jest',
    '^.+\\.(ts|js|html)$': 'jest-preset-angular/preprocessor.js',
    // ...
  },
  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
  // ...
};