Question

我在测试角度组件时遇到了问题。我看了几个堆栈溢出帖子，我仍然卡住了。

无论我尝试什么，我都会在茉莉花中出现以下错误：

错误：StaticInjectorError [RestApiService]：NullInjectorError：没有RestApiService的提供者！

以下是一些代码段：

我的组件类：

@Component({
    moduleId: module.id,
    selector: 'book-form',
    templateUrl: './book-form.component.html',
    styleUrls: ['./book-form.component.css'],
    providers: [
        RestApiService
    ]
})
export class BookFormComponent implements OnInit {
    model = new Book(1, '', '', '', '');
    severities: Observable<KeyValue[]>;

    constructor(private restApiService: RestApiService) { }

    ngOnInit() {
        this.severities = this.restApiService.getSeverities();
    }
}

我的模拟服务：

export class RestApiSeviceSpy {

    getSeverities(): Observable<any> {
        return Observable.of('some data');
    }

    getAssets(): Observable<any> {
        return Observable.of('some data');
    }
}

我的beforeEach方法（修改后）：

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [BookFormComponent],
        providers: [{ provide: RestApiService, useClass: RestApiSeviceSpy }],
        imports: [
            MatDatepickerModule,
            MatNativeDateModule,
            MatFormFieldModule,
            MatInputModule,
            FormsModule,
            HttpModule,
            NoopAnimationsModule],
        schemas: [NO_ERRORS_SCHEMA]
    })
        .compileComponents().then(() => {
            let service = TestBed.get(RestApiService);
            fixture = TestBed.createComponent(BookFormComponent);
            component = fixture.componentInstance;
            fixture.detectChanges();
        });
}));

非常感谢任何有关如何解决此问题的见解。

由于

修改

这是我的服务代码。我还删除了上面@Injectable（）的错误副本。

@Injectable()
export class RestApiService {
    constructor(private http: Http) {

    }

    getSeverities(): Observable<KeyValue[]> {
        return this.http.get('/api/RiskApi/GetSeverities').map(r => <KeyValue[]>r.json());
    }

    getAssets(): Observable<ApiAsset[]> {
        return this.http.get('/api/RiskApi/GetAssets').map(r => <ApiAsset[]>r.json());
    }
}

修改我更新了上面的代码以显示当前的beforeEach并显示更新的spy / mock类。

修改以下是测试运行的输出：

karma start - run-once 01 03 2018 17:02:58.196:WARN [karma]: No captured browser, open http://0.0.0.0:9876/ 01 03 2018 17:02:58.226:INFO [karma]: Karma v2.0.0 server started at http://localhost:9876/api/RiskApi/GetSeverities 01 03 2018 17:02:58.227:INFO [launcher]: Launching browser Chrome with unlimited concurrency 01 03 2018 17:02:58.231:INFO [launcher]: Starting browser Chrome 01 03 2018 17:02:58.963:INFO [Chrome 64.0.3282 (Windows 10.0.0)]: Connected on socket lxAY8w15N_373BOwAAAA with id 41860275 Chrome 64.0.3282 (Windows 10.0.0) BookFormComponent should create FAILED Error: StaticInjectorError[RestApiService]: NullInjectorError: No provider for RestApiService! at _NullInjector.get (node_modules/@angular/core/bundles/core.umd.js:1033:19) Chrome 64.0.3282 (Windows 10.0.0): Executed 3 of 4 (1 FAILED) (0 secs / 0 secs) Chrome 64.0.3282 (Windows 10.0.0) BookFormComponent should create FAILED Error: StaticInjectorError[RestApiService]: NullInjectorError: No provider for RestApiService! at _NullInjector.get (node_modules/@angular/core/bundles/core.umd.js:1033:19) Chrome 64.0.3282 (Windows 10.0.0) BookFormComponent should create FAILED Failed: Response with status: 404 Not Found for URL: http://localhost:9876/api/RiskApi/GetSeverities at stack (node_modules/jasmine-core/lib/jasmine-core/jasmine.js:2455:17) [object ErrorEvent] thrown Chrome 64.0.3282 (Windows 10.0.0): Executed 4 of 4 (2 FAILED) (0 secs / 0 secs) Chrome 64.0.3282 (Windows 10.0.0) BookFormComponent should create FAILED Failed: Response with status: 404 Not Found for URL: {{3}} at stack (node_modules/jasmine-core/lib/jasmine-core/jasmine.js:2455:17) Chrome 64.0.3282 (Windows 10.0.0): Executed 4 of 4 (2 FAILED) (0.311 secs / 0 secs)

Answer 1

删除此行：
let spy: RestApiSeviceSpy = new RestApiSeviceSpy([], []);

现在在你的测试床上：

providers:[ {provide: RestApiService,useClass: RestApiSeviceSpy}]//After you import your spy

现在，对于你的模拟/间谍，你不必用真实的服务扩展它。只需创建一个具有相同依赖关系的服务，并返回一些虚假数据。像这样：

export class RestApiSeviceSpy {

        getSeverities(): Observable<any> {
            return Observable.of('some data');
        }

        getAssets(): Observable<any> {
            return Observable.of('some data');
        }
    }

你的规格：

beforeEach(async(() => {

    TestBed.configureTestingModule({
        declarations: [BookFormComponent],
        providers: [{ provide: RestApiService, useValue: spy }],
        imports: [
            MatDatepickerModule,
            MatNativeDateModule,
            MatFormFieldModule,
            MatInputModule,
            FormsModule,
            HttpModule,
            NoopAnimationsModule],
        schemas: [NO_ERRORS_SCHEMA]
    });

       fixture = TestBed.createComponent(OrderEntryComponent);
       component = fixture.componentInstance;

}));

Angular 2（5）Testbed没有MyService的提供者

1 个答案: