Creating a spy object in Jest just got easier with the `

Question

Creating a spy object in Jest just got easier with the `

If you want to create a spy object with Chai, you can do so by using the following syntax:

chai.spy.object([ 'push', 'pop' ]);

For jasmine users, the equivalent code would be:

jasmine.createSpyObj('tape', ['play', 'pause', 'stop', 'rewind']);

What is the Jest alternative for this functionality?

Situation: I am currently in the process of transitioning my TypeScript Jasmine tests to TypeScript Jest. However, the migration guide provided seems to be of little help in this particular case. As with many new technologies, it is challenging to find detailed information in the documentation.

typescript jestjs

Answer 1

Answer №1

I have developed a new utility function called createSpyObj specifically for jest testing in an older project. This function is inspired by Jasmine's implementation and aims to provide similar functionality.

const createSpyObj = (baseName, methodNames): { [key: string]: Mock<any> } => {
    let obj: any = {};

    for (let i = 0; i < methodNames.length; i++) {
        obj[methodNames[i]] = jest.fn();
    }

    return obj;
};

Answer 2

I have developed a new utility function called createSpyObj specifically for jest testing in an older project. This function is inspired by Jasmine's implementation and aims to provide similar functionality.

const createSpyObj = (baseName, methodNames): { [key: string]: Mock<any> } => {
    let obj: any = {};

    for (let i = 0; i < methodNames.length; i++) {
        obj[methodNames[i]] = jest.fn();
    }

    return obj;
};

Answer 3

Answer №2

const player = {
  start() {
    return true;
  },
};

module.exports = player;

Here is the testing code:

const player = require('./player');

test('starts player', () => {
  const spy = jest.spyOn(player, 'start');
  const isStarting = player.start();

  expect(spy).toHaveBeenCalled();
  expect(isStarting).toBe(true);

  spy.mockReset();
  spy.mockRestore();
});

For more information, check out: https://example.com/jest/docs/en/player-object.html#jestspyonobject-methodname

You can also use jest.fn()

const mockFunction = jest.fn();
  mockFunction();
  expect(mockFunction).toHaveBeenCalled();

  // With a custom implementation:
  const returnsTrue = jest.fn(() => true);
  console.log(returnsTrue()); // true;

https://example.com/jest/docs/en/player-object.html#jestfnimplementation

Answer 4

const player = {
  start() {
    return true;
  },
};

module.exports = player;

Here is the testing code:

const player = require('./player');

test('starts player', () => {
  const spy = jest.spyOn(player, 'start');
  const isStarting = player.start();

  expect(spy).toHaveBeenCalled();
  expect(isStarting).toBe(true);

  spy.mockReset();
  spy.mockRestore();
});

For more information, check out: https://example.com/jest/docs/en/player-object.html#jestspyonobject-methodname

You can also use jest.fn()

const mockFunction = jest.fn();
  mockFunction();
  expect(mockFunction).toHaveBeenCalled();

  // With a custom implementation:
  const returnsTrue = jest.fn(() => true);
  console.log(returnsTrue()); // true;

https://example.com/jest/docs/en/player-object.html#jestfnimplementation

Answer 5

Answer №3

After taking inspiration from @Max Millington's response, I was able to devise a solution utilizing the jest.fn() method:

To begin, create a mocked object:

const mockObject: any = {};

Add the necessary method(s) to the mocked object:

mockObject['run'] = jest.fn();

You have the option to spyOn the mocked methods, but first you must assign them to a real object. In my case, I am using the component instance:

// GIVEN
comp.actualMock = mockObject

// WHEN
spyOn(comp.actualMock, 'run')
comp.procedure()

// THEN
expect(comp.actualMock.run).toHaveBeenCalledTimes(1)

Answer 6

After taking inspiration from @Max Millington's response, I was able to devise a solution utilizing the jest.fn() method:

To begin, create a mocked object:

const mockObject: any = {};

Add the necessary method(s) to the mocked object:

mockObject['run'] = jest.fn();

You have the option to spyOn the mocked methods, but first you must assign them to a real object. In my case, I am using the component instance:

// GIVEN
comp.actualMock = mockObject

// WHEN
spyOn(comp.actualMock, 'run')
comp.procedure()

// THEN
expect(comp.actualMock.run).toHaveBeenCalledTimes(1)

Answer 7

Answer №4

Shoutout to @David for the helpful response!

Even in this day and age, finding a ready-made solution for this issue can be quite challenging. I made some tweaks to your example as the basename wasn't utilized. When incorporating this object into my tests, I found myself constantly having to cast it as unknown, which wasn't ideal.

export const createSpyObj = <T>(methodNames): { [key: string]:jest.Mock<any> } & { spyObj: T } => {

  const obj: { [key: string]: jest.Mock<any> } & { spyObj: T } = { 
spyObj: null } as any;

  for (let i = 0; i < methodNames.length; i++) {
     obj[methodNames[i]] = jest.fn();
  }

  obj.spyObj= obj as T;
  return obj;
};

By implementing this code, I am able to seamlessly pass the spyObj into the constructor of the Service under test.

const injectedService = createSpyObj<InjectedService>(['something']);

injectedService.something.mockReturnValue(true);

const serviceToBeTested = new ServiceToBeTested(injectedService.spyObj);
expect(injectedService.something).toBeCalled();

A potential drawback is that intellisense no longer functions for methodNames.

Answer 8

Shoutout to @David for the helpful response!

Even in this day and age, finding a ready-made solution for this issue can be quite challenging. I made some tweaks to your example as the basename wasn't utilized. When incorporating this object into my tests, I found myself constantly having to cast it as unknown, which wasn't ideal.

export const createSpyObj = <T>(methodNames): { [key: string]:jest.Mock<any> } & { spyObj: T } => {

  const obj: { [key: string]: jest.Mock<any> } & { spyObj: T } = { 
spyObj: null } as any;

  for (let i = 0; i < methodNames.length; i++) {
     obj[methodNames[i]] = jest.fn();
  }

  obj.spyObj= obj as T;
  return obj;
};

By implementing this code, I am able to seamlessly pass the spyObj into the constructor of the Service under test.

const injectedService = createSpyObj<InjectedService>(['something']);

injectedService.something.mockReturnValue(true);

const serviceToBeTested = new ServiceToBeTested(injectedService.spyObj);
expect(injectedService.something).toBeCalled();

A potential drawback is that intellisense no longer functions for methodNames.

Answer 9

Answer №5

Emily's guidance steered me in the right direction. I adapted it to suit the needs of my Angular4/Ionic3 project by incorporating ionic-mocks (https://github.com/user/ionic-mocks).

Within my testing "helper" class, I implemented the following logic:

export function createCustomSpy(baseName: string, methodNames: string[]): { [key: string]: jasmine.Spy } {
  const obj: any = {}
  for (let i: number = 0; i < methodNames.length; i++) {
    obj[methodNames[i]] = jasmine.createSpy(baseName, () => {})
  }
  return obj
}

Subsequently, I utilized it within my test/spec file by injecting the relevant provider like so:

{ provide: AlertController, useFactory: () => AlertControllerMock.instance() },

Due to Jest's lack of compatibility with ionic-mocks, I had to manually transfer the mocks (utilizing createCustomSpy):

class ToastMock {
  public static initiate(): any {
    const instance: any = createCustomSpy('Toast', ['present', 'dismiss'])
    instance.present.and.returnValue(Promise.resolve())
    instance.dismiss.and.returnValue(Promise.resolve())

    return instance
  }
}

class ToastControllerMock {
  public static initiate(toastMock?: ToastMock): any {

    const instance: any = createCustomSpy('ToastController', ['create'])
    instance.create.and.returnValue(toastMock || ToastMock.initiate())

    return instance
  }
}

Answer 10

Emily's guidance steered me in the right direction. I adapted it to suit the needs of my Angular4/Ionic3 project by incorporating ionic-mocks (https://github.com/user/ionic-mocks).

Within my testing "helper" class, I implemented the following logic:

export function createCustomSpy(baseName: string, methodNames: string[]): { [key: string]: jasmine.Spy } {
  const obj: any = {}
  for (let i: number = 0; i < methodNames.length; i++) {
    obj[methodNames[i]] = jasmine.createSpy(baseName, () => {})
  }
  return obj
}

Subsequently, I utilized it within my test/spec file by injecting the relevant provider like so:

{ provide: AlertController, useFactory: () => AlertControllerMock.instance() },

Due to Jest's lack of compatibility with ionic-mocks, I had to manually transfer the mocks (utilizing createCustomSpy):

class ToastMock {
  public static initiate(): any {
    const instance: any = createCustomSpy('Toast', ['present', 'dismiss'])
    instance.present.and.returnValue(Promise.resolve())
    instance.dismiss.and.returnValue(Promise.resolve())

    return instance
  }
}

class ToastControllerMock {
  public static initiate(toastMock?: ToastMock): any {

    const instance: any = createCustomSpy('ToastController', ['create'])
    instance.create.and.returnValue(toastMock || ToastMock.initiate())

    return instance
  }
}

Creating a spy object in Jest just got easier with the `

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Troubleshooting issue with jest expect.any() failing to work with a custom class following migration from JavaScript to TypeScript

Trouble with Displaying Events on React Big Calendar with Typescript

Typescript: How can we determine the data type of React Router Link?

Can Angular 4 experience race conditions?

Running 'npm test' is successful, however the 'jest --coverage' command fails to execute

Data retrieved from API not displaying in Angular Material table

Angular 2 Custom Pipe Magic

What is the method to have VIM recognize backticks as quotes?

How to use sinon to create a mock for an independently imported function

Tips for accessing a specific ListItem within the Menu Component using MUI for React

The aesthetic of the material tree design is not being reflected as expected

After updating from angular4 to angular 5, the npm test is failing with the error message "TypeScript compilation cannot find test.ts file"

Is there a way for me to implement a "view more posts" button on

Determine if all resources on a page in Angular 4 have finished loading by keeping a loader spinning until everything is fully loaded

Testing the retrieval of a file using Jest in an express controller

What's the best way to refactor the `await nextEvent(element, 'mousemove')` pattern in my code once it is no longer necessary?

"What is the best way to determine the data type of an object retrieved from an API in TypeScript

Debug a Typescript-enabled Koa application remotely from a Docker container using Webstorm

Global Inertia Headers

Struggling with the TypeScript generic syntax for the GroupBy function