unit-testing - Ionic2 + Karma + Jasmine : Undefined is not a constructor

Question

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

我的环境:

测试.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;
  }
}

测试.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 后，Jasmine 也从 2.5.X 降级。 (错误依旧)

编辑:

执行类似的测试

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

无需导入任何类，工作正常。

关于遗漏或错误的任何想法？

Answer 1

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

正如@misha130 评论的那样，navCtrl 需要一个模拟。

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

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

---

此外，我需要添加 polyfill 以使转译器理解所有 angular2 装饰器(@Component、@ViewChild 等)。为此，我使用了 this例子。并将 polyfill 添加到 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']
}

希望这对某人有帮助。