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

Question

我有一个离子项目，在组件的构造函数中包含一个根据条件调用的方法。我正在使用 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();
})

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

Answer 1

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

例如

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

Answer 2

Thank to prototype inheritance, you do it like this :

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

You can also do it like this, which is clearer to read :

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

Be sure to create a mock of your component to trigger the constructor, because if you don't, it will only be done with the TestBed (and your spy won't be in place).