NullInjectorError: No provider for Firestore Service

Question

我试图在我的 blogs.component.spec.ts 文件中为我的 BlogService class（使用 Firestore）创建一个服务存根，因为我想测试我的组件，但我总是收到以下错误：

R3InjectorError(DynamicTestModule)[BlogService -> BlogService]: 
  NullInjectorError: No provider for BlogService!
NullInjectorError: R3InjectorError(DynamicTestModule)[BlogService -> BlogService]: 
  NullInjectorError: No provider for BlogService!

但问题是我实际上提供了服务，这是我的 blogs.component.spec.ts 文件：

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { BlogsComponent } from './blogs.component';
import { BlogService } from '../../services/blog.service';
import { of } from 'rxjs';
import { RouterTestingModule } from '@angular/router/testing';

describe('BlogsComponent', () => {
  let component: BlogsComponent;
  let fixture: ComponentFixture<BlogsComponent>;
  const serviceStub = {
    getBlogById: (id: string) =>
      of({ id: id, title: '', description: '', imagePath: '' }),
  };

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [BlogsComponent],
        imports: [RouterTestingModule],
        providers: [{ provider: BlogService, useValue: serviceStub }],
      }).compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(BlogsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should compile', () => {
    expect(component).toBeTruthy();
  });
});

这是我的 blogs.component.ts 文件：

import { Component, OnInit } from '@angular/core';
import { BlogService } from '../../services/blog.service';
import { Blog } from '../../models/blog';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'blogsite-blogs',
  templateUrl: './blogs.component.html',
  styleUrls: ['./blogs.component.css'],
})
export class BlogsComponent implements OnInit {
  blog: Blog | undefined;
  blogId: string | null | undefined;

  constructor(
    private route: ActivatedRoute,
    private blogService: BlogService
  ) {}

  ngOnInit(): void {
    this.blogId = this.route.snapshot.paramMap.get('id');
    if (this.blogId) {
      this.blogService.getBlogById(this.blogId).subscribe((blog) => {
        this.blog = blog;
      });
    }
  }
}

这是我的服务 class:

import { Injectable } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection,
} from '@angular/fire/firestore';
import { Blog } from '../models/blog';
import { BehaviorSubject, Observable } from 'rxjs';


@Injectable()
export class BlogService {
  blogCollection: AngularFirestoreCollection<Blog>;
  private blogIdSource = new BehaviorSubject('');
  currentId: Observable<string> = this.blogIdSource.asObservable();


  constructor(public db: AngularFirestore) {
    this.blogCollection = this.db.collection<Blog>('Blog');
  }

  getBlogs(): Observable<Blog[]> {
    return this.blogCollection.valueChanges({idField: 'id'});
  }

  getBlogById(id: string): Observable<Blog | undefined> {
    return this.blogCollection
      .doc(id)
      .valueChanges();
  }
}

我也尝试在另一个组件中测试它，它确实在那里工作，我只是为我的 serviceStub 使用了另一种方法。有谁知道为什么它在我的博客组件中不起作用？

Answer 1

尝试provide而不是provider

providers: [{ provide: BlogService, useValue: serviceStub }],

NullInjectorError: No provider for Firestore Service

NullInjectorError: No provider for Firestore Service

unit-testing

jasmine

typescript

karma-jasmine

angular