如何监视构造函数中调用的方法？答案

【问题标题】：How to spyOn a method called in the constructor?如何监视构造函数中调用的方法？
【发布时间】：2018-12-30 23:42:26
【问题描述】：

我有一个离子项目，该项目在组件的构造函数中具有一个方法，该方法根据条件调用。我正在使用 Jasmine，我想监视该方法以检查它是否被调用。

这是组件的构造函数：

export class MyComponent {
    public test: boolean;

    constructor(public service: MyService) {
        if(test) {
            service.getX();
        }
    }
}

在我的 spec.ts 中，我必须实例化组件才能窥探该方法，但由于该方法已在构造函数中调用，因此无法正常工作。

beforeEach(() => {

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

});

it('Test case #1', () => {
    component.test = true;

    spyOn(component.service, 'getX'); //The method has already been called in the constructor called in beforEach above

    expect(component.service.getX).toHaveBeenCalled();
})

如何监视构造函数中调用的方法？

【问题讨论】：

你需要创建一个模拟服务而不是监视真实的服务。

标签： angular typescript unit-testing ionic-framework jasmine

【解决方案1】：

要在组件的构造函数中模拟一个服务，你需要在TestBed.createComponent之前提供模拟

例如

beforeEach(() => {
  mockService = TestBed.get(Service); 
  spyOn(mockService, 'getSomeValue').and.returnValue({value});
  fixture = TestBed.createComponent(MyComponent);
  component  = fixture.componentInstance;
})

【讨论】：

【解决方案2】：

感谢原型继承，你可以这样做：

spyOn(MyService.prototype, 'getX');
const mock = new MyComponent({getX: () => null});
expect(MyService.prototype.getX).toHaveBeenCalled();

你也可以这样做，这样读起来更清楚：

const serviceMock = new MyService();
spyOn(serviceMock, 'getX');
const mock = new MyComponent(serviceMock);
expect(serviceMock.getX).toHaveBeenCalled();

一定要为你的组件创建一个模拟来触发构造函数，因为如果你不这样做，它只会在 TestBed 上完成（并且你的间谍不会到位）。

【讨论】：

我会试试的。谢谢
Angular 中是否有办法将组件将由 Angular 注入的 MyService 的同一实例注入到测试中？也许在beforeEach 里面？
是的，您必须在您的测试平台中提供服务的模拟值。如果您愿意，我还编辑了我的答案，以更清晰的方式监视您的服务。

【解决方案3】：

在同样的问题上运行，我刚刚测试了一个在构造函数中调用的方法，在 setTimeout 内触发了期望：

 it('should call methodName on instance', () => {
   spyOn(instance, 'methodName').and.callThrough();   
   setTimeout(() => {
     expect(instance.methodName).toHaveBeenCalled();
   });
 });

【讨论】：