Angular-cli: ng test fails when using default import statement

Created on 19 Oct 2016 · 6Comments · Source: angular/angular-cli

Please provide us with the following information:

OS?

Mac OSX El Capitan

Versions.

1.0.0-beta.17

Repro steps.

Any app using default import statement such as "import moment from 'moment'";
Run ng test.
Import for library will fail.

The log given by the failure.

TypeError: undefined is not a constructor (evaluating 'moment_1.default()') in src/test.ts (line 62000)
This error is given for every file importing the library using the default import statement.

angular-cli.json

{
  "project": {
    "version": "1.0.0",
    "name": "rolecall-mobile"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "../tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

ts.config

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

test.ts

import './polyfills.ts';

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TestBed } from '@angular/core/testing';
import { IonicModule }  from 'ionic-angular';

// Unfortunately there's no typing for the `__karma__` variable. 
// Just declare it as any. System is in here as well.
declare var __karma__: any;
declare var require: any;
declare var System: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function (): any { /* no op */};

Promise.all([
  System.import('@angular/core/testing'),
  System.import('@angular/platform-browser-dynamic/testing'),
])
  // First, initialize the Angular testing environment.
  .then(([testing, testingBrowser]) => {
    testing.getTestBed().initTestEnvironment(
      testingBrowser.BrowserDynamicTestingModule,
      testingBrowser.platformBrowserDynamicTesting()
    );
  })
  // Then we find all the tests.
  .then(() => require.context('./', true, /\.spec\.ts/))
  // And load the modules.
  .then(context => context.keys().map(context))
  // Finally, start Karma to run the tests.
  .then(__karma__.start, __karma__.error);

export class TestUtils {

  public static configureIonicTestingModule(components: Array<any>): void {
    TestBed.configureTestingModule({
      declarations: [
        ...components,
      ],
      providers: [
      ],
      imports: [
        FormsModule,
        IonicModule,
        ReactiveFormsModule,
      ],
    });
  }

  // http://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript
  public static eventFire(el: any, etype: string): void {
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      let evObj: any = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
  }
}

Source

cmhand

👍2

Most helpful comment

Typescript compiler option "allowSyntheticDefaultImports": true works with ng serve (tsconfig.app.json) but not with ng test (tsconfig.spec.json)

kaihaase-wd on 26 Jul 2017

👍4 😕2

All 6 comments

That seems to be a typescript error with moment.

On should open an issue on their issue tracker.

filipesilva on 23 Oct 2016

We have the same issue. What is the solution?

stevek-pro on 26 Jun 2017

👍1

Typescript compiler option "allowSyntheticDefaultImports": true works with ng serve (tsconfig.app.json) but not with ng test (tsconfig.spec.json)

kaihaase-wd on 26 Jul 2017

👍4 😕2

Was this ever solved ?