如何使用 jest js 在 Angular 中 createSpyObj？

Question

I am using jest for Angular testing.

In my scenario I have to test child component from parent. here I am accessing child component methods and properties using @viewchild in parent componet

import { Component } from '@angular/core';

    @Component({
        template: `<div><\div>`
    })
    export class ChildComponent {
    
        public childMethod() {
            ...
        }
    }


import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from 'child.component';

@Component({
    template: ``
})
export class ParentComponent {

    @ViewChild('child')
    public child: ChildComponent;

    public parentMethod() {
        this.child.childMethod();
    }
}

In jasmin we can do using createspyobj

jasmin

const childComponent = jasmine.createSpyObj('ChildComponent', ['childMethod']);
it('should invoke childMethod when parentMethod is invoked', () => {
        component.childComponent =  childComponent;
        component.parentMethod();
        expect(childComponent.childMethod).toHaveBeenCalled();
    });

(exactly I want this How to to same in jest . I did not find anything . How to spy child component

Can any one please tell.

Thanks in advance

Answer 1

Jest doesn't have this utility function. It needs to be written manually, also this way it can provide type safety if needed that Jasmine createSpyObj can't have by design:

const mockChildComponent: ChildComponent = {
  childMethod: jest.fn(...)
}

There are auto-mock features to provide dummy mock objects for existing modules that provide the same functionality, although this may give unexpected results because of undocumented magic behind them:

const { ChildComponent: MockChildComponent } = jest.createMockFromModule('child.component')
mockChildComponent = new MockChildComponent()