Ionic2 + Karma + Jasmine：Undefined不是构造函数

Question

我正在尝试使用Karma + Jasmine对Ionic2 App进行一些测试，但由于运行时错误而卡住了，我无法确定哪个是实际问题（可能是我缺乏经验）。

我的环境：

test.ts

一个非常简单的类，带有一个裸构造函数和一个虚函数：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-testing',
  templateUrl: 'testing.html'
})

export class TestingPage {

  constructor(public navCtrl: NavController) {}

  isTrue(): boolean {
    return true;
  }
}

test.spec.ts

import { TestingPage } from "./test.ts"
import { NavController } from 'ionic-angular';

let navCtrl: NavController;
let test = new TestingPage(navCtrl);

describe('Dummy test:', () => {
  it("Should be defined", () => {
    expect(test.isTrue()).toBeTruthy(); 
  });
});

karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'karma-typescript'],
    files: [
      //'./src/pages/testing/test.ts',
      './src/pages/testing/test.spec.ts'
    ],
    exclude: [
    ],

    preprocessors: {
      //'./src/pages/testing/test.ts': ['karma-typescript'],          
      './src/pages/testing/test.spec.ts': ['karma-typescript']
    },

    typescriptPreprocessor: {
      options: {
        sourceMap: false,
        target: 'ES5',
        module: 'amd',
        noImplicitAny: true,
        noResolve: true,
        removeComments: true,
        concatenateOutput: false
      },
      transformPath: function(path) {
        return path.replace(/\.ts$/, '.js');
      }
    },
    reporters: ['progress', 'karma-typescript'],
    port: 9876,  
    colors: true,   
    logLevel: config.LOG_DEBUG,   
    autoWatch: true,
    browsers: ['Chrome', 'PhantomJS'],
    singleRun: false,
    concurrency: Infinity
  })
}

一些额外的信息，以防它是相关的......

Ionic version: 2.1.13
Karma version: 1.3.0
TypeScript: 2.0.6
jasmine-core: 2.4.1

运行karma start时出错：

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  TypeError: undefined is not a constructor (evaluating 'new test_ts_1.TestingPage(navCtrl)')
  at src/pages/testing/test.spec.ts:5:0 <- src/pages/testing/test.spec.js:4


Chrome 54.0.2840 (Linux 0.0.0) ERROR
  Uncaught TypeError: test_ts_1.TestingPage is not a constructor
  at src/pages/testing/test.spec.ts:5:0 <- src/pages/testing/test.spec.js:4

我试图将test.ts包含在karma文件和预处理器部分（它们在上面的karma.conf.js中进行了注释），但在这种情况下，错误更改为：

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  ReferenceError: Can't find variable: Map
  at /tmp/karma-typescript-bundle-2311r0Dc9vytYCw1.js:5007


Chrome 54.0.2840 (Linux 0.0.0) ERROR
  Uncaught TypeError: Cannot read property '__symbol__' of undefined
  at /tmp/karma-typescript-bundle-2311r0Dc9vytYCw1.js:26028

似乎更不具描述性。

在阅读this question后，茉莉花也从2.5.X降级（错误仍然存​​在）

编辑：

执行

等测试

expect(2+2).toEqual(4);

不导入任何类，工作正常。

关于什么是缺失或错误的任何想法？

Answer 1

刚刚解决了，我的配置+代码中有多个错误。

就像@ misha130评论一样，navCtrl需要一个模拟。

在karma.conf.js 导入文件的顺序是相关的，还必须将mock类添加到文件和预处理器属性。

最后也是更重要的，正如@yurziu所说，导入模块时不要添加'.ts'作为拖尾，因为如果karma将.ts转换为.js，你仍然会导入TS文件而不是JS。

另外我需要添加polyfill以使转换器理解所有angular2装饰器（@ Component，@ ViewChild等）。为此，我使用了this示例。并将polyfills添加到karma.conf.js。

files: [
    './src/polyfills.ts',
    './src/mocks.ts', //this must be imported before test.ts!
    './src/pages/testing/test.ts',
    './src/pages/testing/test.spec.ts'
],

preprocessors: {     
    './src/polyfills.ts': ['karma-typescript'],            
    './src/mocks.ts': ['karma-typescript'], //and also preprocessed
    './src/pages/home/home.ts': ['karma-typescript'],      
    './src/pages/home/home.spec.ts': ['karma-typescript']
}

希望这有助于某人。