如何在不使用 TestBed 的情况下模拟服务

Question

我想在不接触外部模板的情况下为我的组件编写一些单元测试。但是我不知道如何模拟我的组件所依赖的服务。

my-component.ts

@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss']
})
export class MyComponent {

    constructor(public service: AnotherService) {}

}

my-component.spec.ts

let component: MyComponent;

beforeEach(() => {
    myComponent = new MyComponent(null);
});

another.service.ts

@Injectable()
export class AnotherService {
    toto: string;
}

可行，但我想模拟 AnotherService 而不是 null，所以我创建了一个模拟服务：

class AnotherServiceStub {
    toto: string
}

和

myComponent = new MyComponent(<AnotherService> new AnotherServiceStub());

但以 ActivatedRoute 为例，

component = new MyComponent(<ActivatedRoute> {});

不起作用。 Typescript 要求我将 ActivatedRoute class 的所有属性添加到我的模拟中，例如 url、params、queryParams，等等。我怎样才能避免这种情况？

Answer 1

完全符合原class接口的服务mocks可以按原样提供：

myComponent = new MyComponent(stub);

如果模拟部分符合接口且未通过类型检查，则可以使用type assertion：

myComponent = new MyComponent(<AnotherService>stub);

当类型完全不匹配时，可以使用双重断言：

myComponent = new MyComponent(<AnotherService><any>stub);

如何在不使用 TestBed 的情况下模拟服务

How to mock a service without using TestBed

components

unit-testing

mocking

testbed

angular