茉莉花测试中的Angular2 DI错误

Question

我正在使用 jasmine 编写一些 angular2 单元测试，并对组件进行单元测试。出于某种原因，当我尝试使用 TestBed 类实例化组件时，出现依赖注入错误。

LoginComponent:

import { Component } from '@angular/core';
import { LoginService } from './login.service';

@Component({
    selector: 'login',
    template: require('./login.template.pug'),
    styles: [require('./style.scss')],
    providers: [LoginService]
})
export class LoginComponent {
    public username: string;
    public password: string;

    constructor(private loginService: LoginService) {
    }

    public login(username, password) {
        this.loginService.login(username, password)
            .then((token: string) => {
            })
    }
}

LoginComponentTest:

import { TestBed, inject, async, ComponentFixture } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LoginComponent } from './login.component';
import { LoginService } from './login.service';
import { BrowserModule } from '@angular/platform-browser';


describe('LoginComponent', () => {

    class MockClass {
        get(url): Promise<any> {
            throw Error('not implemented');
        };
    }

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                LoginComponent
            ],

            providers: [
                LoginComponent,
                { provide: LoginService, useClass: MockClass },
            ],

            imports: [
                FormsModule,
                BrowserModule,
                ReactiveFormsModule
            ]
        })
    }));


    it('will let user login', async(() => {
        TestBed.compileComponents()
            .then(() => {
                let fixture: ComponentFixture<LoginComponent> = TestBed.createComponent(LoginComponent);
            });
    }));
});

线

let fixture: ComponentFixture<LoginComponent> = TestBed.createComponent(LoginComponent);

给出以下错误：

Chrome 57.0.2987 (Mac OS X 10.12.3) LoginComponent 将允许用户登录 失败错误：DI 错误 在 NoProviderError.ZoneAwareError (webpack:///~/zone.js/dist/zone.js:958:0

我声明了 LoginComponent 以及它自己的依赖项 LoginService。

对正在发生的事情有什么想法吗？

Answer 1

好吧，我想通了。显然问题与LoginComponent 中的providers 声明有关：

providers: [LoginService]

一旦我把它从LoginComponent 移到AppModule，事情就开始起作用了。有兴趣知道为什么测试不适用于在组件本身声明的测试。