单元测试失败:无法读取属性' componentInstance'未定义的

时间:2016-03-17 18:44:52

标签: unit-testing angular

单元测试与angular2-seed项目一起正常工作。问题是它不适用于我的类似angular2-seed项目的项目。

我的项目和angular2-seed之间的唯一区别是我在不使用tools目录的情况下使用gulpfile.ts。我在一个文件中定义了所有gulp任务。

我需要一些帮助来给我一些关于这个错误的提示。

我有这个非常简化的组件

import {Component} from 'angular2/core';
import {RouterLink, Router} from 'angular2/router';
import {CORE_DIRECTIVES} from 'angular2/common';

@Component({
  selector: 'cet-login',
  moduleId: module.id,
  templateUrl: 'apps/common/features/login/login.tpl.html',
  directives: [RouterLink, CORE_DIRECTIVES]
})
export class LoginComponent {
  constructor(
    private router: Router
  ) {}
}

我的单元测试非常简单

import {
  TestComponentBuilder,
  describe,
  expect,
  injectAsync,
  it
} from 'angular2/testing';
import {Component} from 'angular2/core';
import {LoginComponent} from './login.cmp';

export function main(): void {
  'use strict';
  describe('Login component', () => {
    it('should work',
      injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
        return tcb.createAsync(TestComponent)
          .then(rootTC => {
            rootTC.detectChanges();
            expect(1).toBe(1);
          });
      }));
  });
}

class Mock {}

@Component({
  selector: 'test-cmp',
  template: '<cet-login></cet-login>',
  directives: [LoginComponent]
})
class TestComponent {}

我还有gulpfile.ts测试部分,如下所示;

gulp.task('test:buildjs', 'Compile typescript test files', ['test:buildcss'], () => {
  var tsProject = tsProjectFn();

  var result = gulp.src(PATH.src.ts)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(inlineNg2Template({base: PATH.src.base}))
    .pipe(tsc(tsProject));

  return result.js
    .pipe(sourcemaps.init())
    .pipe(gulp.dest(PATH.dest.test));
});

gulp.task('test:unit', 'Start a karma server and run a unit test', (done: any) => {
  return new karma.Server({
    configFile: __dirname + '/karma.config.js',
    singleRun: true
  }).start(done);
});

当我运行运行gulp testtest:buildjs的{​​{1}}时,出现以下错误

test:unit
  • karma.config.js与angualr2-seed
  • 完全相同
  • test-main.js与angualr2-seed
  • 完全相同

知道我想念的是什么,我做错了什么?

2 个答案:

答案 0 :(得分:1)

我不知道您使用哪个版本的Angular2(在我的情况下是beta7 +),但在我的单元测试中,我需要注册TEST_BROWSER_PLATFORM_PROVIDERSTEST_BROWSER_APPLICATION_PROVIDERS才能使用{{1 class:

TestComponentBuilder

请参阅此plunkr:https://plnkr.co/edit/oVBPsH?p=preview

答案 1 :(得分:0)

找到了这个问题的原因。应注释以下行以进行成功测试。

import {enableProdMode} from 'angular2/core';
enableProdMode();