注入具有@testing库/角度的模拟服务

Question

我正在尝试使用Kent C Dodds的@testing-library/angular来测试角度组件。我的组件依赖于 Angular 服务。我在 api 文档中没有看到有关如何注入模拟服务为我的单元测试提供模拟数据的信息。

    export class ItemCounterComponent implements OnInit {
  public availableTodoCount: number;
  constructor(private todoProviderService: TodoProviderService) {
    this.todoProviderService.getTodos().subscribe(todos => {
      this.availableTodoCount = todos.filter(todo => !todo.completed).length;
    });
  }
  ngOnInit() {
  }
}
    describe('ItemCounterComponent', () => {
  it('shows the count correctly', async () => {
    const { getByText } = await render(ItemCounterComponent, { componentProperties: { availableTodoCount: 5 } });
    expect (getByText('5 items left'));
  });
});
````````````

Answer 1

您可以使用

providers来提供服务(就像使用TestBed一样(

const component = await render(AppComponent, {
    providers: [
      {
        provide: TodoProviderService,
        useValue: { getTodos: ... },
      },
    ],
  });

更多示例： https://github.com/testing-library/angular-testing-library/tree/master/src/app/examples