类型“x”中缺少属性“jasmineMatches”答案

【问题标题】：Property 'jasmineMatches' is missing in type 'x'类型“x”中缺少属性“jasmineMatches”
【发布时间】：2018-06-04 20:53:32
【问题描述】：

ng test之后

预期输出：我在 x 次测试中通过/失败。

实际输出：

ERROR in src/app/todo-data.service.spec.ts(19,45): error TS2345: Argument of type 'Todo[]' is not assignable to parameter of type 'Expected<Observable<Todo[]>>'.
  Type 'Todo[]' is not assignable to type 'ObjectContaining<Observable<Todo[]>>'.
    Property 'jasmineMatches' is missing in type 'Todo[]'.

在我的 todo 类中，我没有 jasminematches 属性，但这可能不是根本问题。

todo.ts：

export class Todo {
  id: number;
  title: string = '';
  complete: boolean = false;

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}

todo-data.service.spec.ts

import {TestBed, async, inject} from '@angular/core/testing';
import {Todo} from './todo';
import {TodoDataService} from './todo-data.service';

...

  describe('#getAllTodos()', () => {

    it('should return an empty array by default', inject([TodoDataService],
      (service: TodoDataService) => {
      expect(service.getAllTodos()).toEqual(<Todo[]>[]);
    }));

...

todo-data.service.ts

import { Injectable } from '@angular/core';
import { Todo } from './todo';
import { ApiService } from './api.service';
import { Observable } from 'rxjs';

...

export class TodoDataService {

  constructor(private api: ApiService) { }

  getAllTodos(): Observable<Todo[]> {
    return this.api.getAllTodos();
  }

...

请告知如何开始解构此错误以编写正确的测试。

【问题讨论】：

标签： angular testing jasmine-node

【解决方案1】：

你的 getAllTodos 函数返回一个 observable 而不是一个 todos 数组。我认为这就是发生错误的原因。因此，我认为您应该以不同的方式编写测试：

service.getAllTodos().subscribe(todos => {
  expect(todos).toEqual([])
});

另外（如果您还没有）您可能希望为您的 api 服务提供一个存根（模拟）。你应该在它自己的文件中测试这个服务。

在下面的测试文件中描述但在您制作测试床之前（或在您可以从中导入它的单独文件中）：

const dummyTodos = [];

const mockApiService = {
  getAllTodos() {
    return Observable.of(dummyTodos);
  }
};

在您的 TestBed.configureTestingModule 中添加以下行：

providers: [{provide: ApiService, useValue: mockApiService}],

您还可以决定更改测试中 dummyTodos 的值，以检查不同的响应。

【讨论】：

【解决方案2】：

我得出了与上一张海报相同的结论。您的初始测试断言是将待处理的 Http 请求（表示为带有单个 observable 的可观察流）与空 `Todo[]' 数组的预期响应进行比较。

在下面的代码 sn-p 中，.subscribe 方法激活了可观察流。将其放置在fakeAsync 区域内模拟时间的流逝，其方式与异步Http 请求的行为方式相同。由于测试断言位于 subscribe 块内，因此您现在正在处理已完成的可观察流并且能够访问流的内容，即 Todo[]。

it('should return an empty array by default', fakseAsync(inject([TodoDataService],
  (service: TodoDataService) => {
      service.getAllTodos().subscribe(success => {
        expect(success).toEqual(<Todo[]>)
      });
  ))
);

您的测试中我不太明白的一个行为是您的TodoService 似乎将Http 处理委托给返回ApiService 的Observable<Todo[]> 并且您的TodoService 也返回Observable<Todo[]>。如果这两个服务之间有一个有意义的抽象层，那么我会按照最初答案中概述的MockApiService 的测试方法。

或者，您可以将您的 ApiService 和 TodoService 折叠成一个级别，并对预期的行为做出额外的断言（测试/模拟 Http 后端的机制将取决于您是否使用 @987654337 @angular/http 或 @angular/common/http 中的 @ 方法。

【讨论】：