如何恶搞观察使用spyOn？

Question

我写了通过超文本传输协议请求JSON的服务：

export class TodosService {
  constructor(private http: HttpClient) {}
  getTodos(): Observable<any> {
    return this.http.get<any>('https://jsonplaceholder.typicode.com/todos');
  }
}

从服务中为组件分配一个值：

export class TodosComponent implements OnInit {
  todos: any;
 
  constructor(private todosService: TodosService) {}
 
  ngOnInit() {
    this.todosService.getTodos().subscribe((todos) => {
      this.todos = todos;
    });
  }
}

我想测试一下。有一个单元测试：

describe('Page1Component', () => {
  let component: Page1Component;
  let fixture: ComponentFixture<Page1Component>;
  let spy: any;
  let todosService: TodosService;
 
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [Page1Component],
      imports: [HttpClientModule],
      providers: [TodosService],
    }).compileComponents();
  });
 
  beforeEach(() => {
    fixture = TestBed.createComponent(Page1Component);
    component = fixture.componentInstance;
    fixture.detectChanges();
    todosService = TestBed.inject(TodosService);
  });
 
  it('should fill todos', () => {
    const todos = of([
      {
        completed: false,
        id: 1,
        title: 'title1',
        userId: 1,
      },
    ]);
    spyOn(todosService, 'getTodos').and.returnValue(todos);
    component.ngOnInit();
    expect(component.todos).toEqual(todos);
  });
});

我收到以下错误消息：

预期[对象（{完成：假，id： 1，title：'title1'，userId： 1}）]等于可观察（{_isScalar：假，_subscribe：函数}）。

我尝试使用以下模拟：

const todos = [
  {
    completed: false,
    id: 1,
    title: 'title1',
    userId: 1,
  },
];

但在这种情况下，我得到了以下弹出在我的IDE：

类型为“{completed:boolean；id:number；title:string；userId:number；}[]”的参数不能分配给类型为“Observable”的参数。

请帮我修复这个单元测试

Answer 1

您已经非常接近您正在尝试的内容，但是您正在比较一个数组和一个可观察到的匹配器。你需要比较观察到的结果

  const data = [
    {
      completed: false,
      id: 1,
      title: 'title1',
      userId: 1,
    },
  ]
  const todosObservable = of(data);
  spyOn(todosService, 'getTodos').and.returnValue(todosObservable);
  component.ngOnInit();
  expect(component.todos).toEqual(data);

上面的代码片段可以很好地工作，但我通常更喜欢使用HttpClientTestingModule，它很方便，因为您不必经常模拟服务