How can we use Jest to spy on classes instantiated within a constructor?

Question

How can we use Jest to spy on classes instantiated within a constructor?

I have the following code snippet:

async myFunction(paramA?: string): Promise<void> {
    if (paramA === undefined) {
      paramA = this.generateRandomString();
    }
    this.funnel.loginFunnel(Status.Pending);
    await this.tracker.flush();
    this.service.call(this.name, paramA, code);
  }

I want to test that loginFunnel is called with status pending and the service is called with paramA. However, these classes are initialized in the constructor:

constructor(params: Params) {
    this.tracker = new Tracker(params);
    this.service = new Service(params, this.tracker);
  }

How can I spy on them using Jest? This is pure JavaScript, not related to React or any other similar framework.

I've tried multiple approaches but haven't been successful...

My latest attempt involved importing the Tracker class from its path:

jest.mock('../tracker');
        service.call();
        expect(Tracker).toHaveBeenCalledTimes(1);

However, the test returned the following error:

expect(received).toHaveBeenCalledTimes(expected)

    Matcher error: received value must be a mock or spy function

    Received has type:  function
    Received has value: [Function Tracker]

typescript testing jestjs mocking spyon

Answer 1

Answer №1

Your perspective is well understood and has led me to develop a code snippet that allows for spying on an entire class, constructors included. The implementation of this snippet is straightforward; simply add it to a file and import it whenever necessary.

Below is the TypeScript/ES6 code:

/**
 * spyOn references to classes. Use it with spyOnClass
 */
export const classSpy: any = {};

/**
 * Utility to Spy On all class methods. Not including the constructor
 * @returns a spyOn references to all the class methods
 * includes the methods mockClear and mockReset as convenience
 * to trigger the respective method for all the spies
 */
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export function spyOnClassMethods(proto: any): any {
    const properties = Object.getOwnPropertyNames(proto);
    const spyHolder: any = {};
    for (const i in properties) { spyHolder[properties[i]] = jest.spyOn(proto, properties[i]); }
    spyHolder.mockClear = (): void => { for (const i in properties) { spyHolder[properties[i]].mockClear(); } };
    spyHolder.mockReset = (): void => { for (const i in properties) { spyHolder[properties[i]].mockReset(); } };
    return spyHolder;
}
// To attend jest.mock problems, the should start with 'mock'
const mocksSpyOnClassMethods = spyOnClassMethods;

/**
 * Utility to Spy On all class methods and its constructor.
 */
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export function spyOnClass(mockModuleName: string, mockClassName: string): any {
    classSpy[mockClassName] = {};
    jest.mock(mockModuleName, () => {
        const module = jest.requireActual(mockModuleName) as any;
        const mock = {};
        classSpy[mockClassName] = mocksSpyOnClassMethods(module[mockClassName].prototype);
        mock[mockClassName] = jest.fn().mockImplementation(
            (...args: any[]) => {
                const instance = new module[mockClassName](...args);
                classSpy[mockClassName].constructor = mock[mockClassName];
                return instance;
            }
        );
        return { ...module, ...mock };
    });
}

An example of how to use this functionality:

import { classSpy, spyOnClass } from './mock-utils';

// If you import ClassName, this must come before the import.
spyOnClass('module-name', 'ClassName');

import { ClassName } from 'module-name';

test('this', () => {
    doSomethingThatUsesClassName();
    expect(classSpy.ClassName.constructor).toHaveBeenCalled();
    expect(classSpy.ClassName.someMethod).toHaveBeenCalled();
});

I hope that this can be beneficial to you and other users.

Answer 2

Your perspective is well understood and has led me to develop a code snippet that allows for spying on an entire class, constructors included. The implementation of this snippet is straightforward; simply add it to a file and import it whenever necessary.

Below is the TypeScript/ES6 code:

/**
 * spyOn references to classes. Use it with spyOnClass
 */
export const classSpy: any = {};

/**
 * Utility to Spy On all class methods. Not including the constructor
 * @returns a spyOn references to all the class methods
 * includes the methods mockClear and mockReset as convenience
 * to trigger the respective method for all the spies
 */
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export function spyOnClassMethods(proto: any): any {
    const properties = Object.getOwnPropertyNames(proto);
    const spyHolder: any = {};
    for (const i in properties) { spyHolder[properties[i]] = jest.spyOn(proto, properties[i]); }
    spyHolder.mockClear = (): void => { for (const i in properties) { spyHolder[properties[i]].mockClear(); } };
    spyHolder.mockReset = (): void => { for (const i in properties) { spyHolder[properties[i]].mockReset(); } };
    return spyHolder;
}
// To attend jest.mock problems, the should start with 'mock'
const mocksSpyOnClassMethods = spyOnClassMethods;

/**
 * Utility to Spy On all class methods and its constructor.
 */
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export function spyOnClass(mockModuleName: string, mockClassName: string): any {
    classSpy[mockClassName] = {};
    jest.mock(mockModuleName, () => {
        const module = jest.requireActual(mockModuleName) as any;
        const mock = {};
        classSpy[mockClassName] = mocksSpyOnClassMethods(module[mockClassName].prototype);
        mock[mockClassName] = jest.fn().mockImplementation(
            (...args: any[]) => {
                const instance = new module[mockClassName](...args);
                classSpy[mockClassName].constructor = mock[mockClassName];
                return instance;
            }
        );
        return { ...module, ...mock };
    });
}

An example of how to use this functionality:

import { classSpy, spyOnClass } from './mock-utils';

// If you import ClassName, this must come before the import.
spyOnClass('module-name', 'ClassName');

import { ClassName } from 'module-name';

test('this', () => {
    doSomethingThatUsesClassName();
    expect(classSpy.ClassName.constructor).toHaveBeenCalled();
    expect(classSpy.ClassName.someMethod).toHaveBeenCalled();
});

I hope that this can be beneficial to you and other users.

How can we use Jest to spy on classes instantiated within a constructor?

Answer №1

Similar questions

Mocking a celery task to patch in unit tests for Django with the use of Mock

Issue with the display of JQuery slider within TypeScript Angular directive in C# environment

The default generic type is not a valid assignment

The 'SockJS' export is missing from the sockjs-client module

Using TypeScript to bypass rest properties in React

Having trouble retrieving information from Node.js service in AngularJS 2

Transitioning from Global Namespace in JavaScript to TypeScript: A seamless migration journey

Error encountered during module parsing: Token found was not as expected in Webpack 4

difficulty with closing nested Mat-dialogBoxes

Exploring an array of objects to find a specific string similar to the one being

Issue in Angular Material: The export 'MaterialComponents' could not be located in './material/material.module'

Display a single unique value in the dropdown menu when there are duplicate options

The type 'RefObject<R>' cannot be assigned to the type 'string | ((instance: typeof Room_T | null) => void) | RefObject<typeof Room_T> | null | undefined' in this context

Calculate the sum of elements within an array

Could there be a more sophisticated and streamlined method for verifying answers?

Tips for prohibiting the use of "any" in TypeScript declarations and interfaces

Steps for specifying the required type of an Object literal in Typescript

Discovering an array in Typescript containing a specific attribute, followed by embedding another array within that array

Access file using operating system's pre-installed application

Is it possible for me to make the default export anonymous?