"Unexpected token import" when testing Angular with Jest

Question

I've been trying to set up tests for some Angular components, but I keep running into an issue as all of my components use ng-lightning, which results in the following error:

/angular-lightning-test/node_modules/ng-lightning/ng-lightning.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { NgModule } from '@angular/core';

SyntaxError: Unexpected token import

I've tried multiple ways to get this going through Babel, though I'm not sure that should be required as Jest can handle it for every other file using import in this project.

I'm using jest-preset-angular to handle the setup for these tests. You can see the configuration it uses here.

I've created a very small sample project where you can see this error:

https://github.com/humantree/angular-lightning-test

The component is as simple as this:

@Component({
  selector: 'badge',
  template: '<ngl-badge>{{text}}</ngl-badge>'
}) export class BadgeComponent {
  text = 'Test Badge';
}

and the test is as simple as this (I realize an actual test is missing, but the error still occurs before that would happen):

describe('BadgeComponent', () => {
  let badge: BadgeComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [BadgeComponent],
      imports: [NglModule.forRoot()]
    });

    badge = TestBed.get(BadgeComponent).instance;
  });
});

Can anyone see anything that I could add to my Jest configuration (or anything else) that would solve this error?

Note: For what it's worth, I also have these tests set up running in Mocha using mocha-webpack, and am having the exact same issue with that setup.

Thanks!

Alexandre Emond Alexandre Emond · Accepted Answer · 2018-05-04T22:11:32

Try the following:

1) install the following packages: babel-jest, babel-preset-env

2) Add a .babelrc file at the your project root.

{ "presets": ["env"]}

3) Edit your jest.config.js file so babel process ng-lightning

{
    "preset": "jest-preset-angular",
    "transform": {
        "^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
        "^.+\\.js$": "babel-jest"
    },
    "transformIgnorePatterns": [
        "node_modules/(?!ng-lightning)"
    ]
}

"Unexpected token import" when testing Angular with Jest

1 Answers