Ways to simulate a function that is a part of an internal object

Question

Ways to simulate a function that is a part of an internal object

Is there a way to mock a method from an object within my UnderTest class?

When the Update method is triggered by an event from a child component, I need to mock the service.saveNewElement(data) method in order to test data in the then() block.

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Service } from 'secret';
import ROUTES from '../../../../router/routes.const';


@Component({
    name: 'UnderTest',
    template: require('./underTest.component.html'),
})
export default class UnderTest extends Vue {
    private service: Service;

    constructor() {
        super();
        this.service = new Service();
    }

    public update(data: any): void {
        this.service
            .saveNewElement(data)
            .then(() => {
                //stuff to do
            })
            .catch(() => {
                this.$notify.error('Oops!, sth went wrong...');
            });
    }
}
</script>

Any suggestions on how to accomplish this?

EDIT:

I tried the suggestion from @slideshowp2 but encountered another issue.

I used the following code snippet in my test file:

jest.mock('../../services/customer.service',() => ({
    constructor: jest.fn(() => {}),
    saveNewCustomer: jest.fn(() => Promise.resolve({ data: 3 }))
}));

This resulted in an error:

[Vue warn]: Error in data(): "TypeError: service.Service is not a constructor"

Can anyone provide guidance on resolving this?

typescript unit-testing vuejs2 jestjs

Answer 1

Answer №1

To simulate the behavior of the imported Service, you can manually mock it by using jest.mock(moduleName) and placing your mocked Service in the __mocks__ directory. I have provided a sample setup for reference:

The file structure should look like this:

.
├── __mocks__
│   └── someService.ts
├── index.spec.ts
├── index.ts
└── someService.ts

someService.ts:

class SomeService {
  public async saveNewElement(data) {
    return 'real data';
  }
}

export { SomeService };

index.ts:

import { SomeService } from './someService';

export default class UnderTest {
  private service: SomeService;

  constructor() {
    this.service = new SomeService();
  }

  public update(data: any): any {
    return this.service.saveNewElement(data).then(res => {
      // stuff to do
      console.log(res);
    });
  }
}

__mocks__/someService.ts:

const mockedSomeService = {
  saveNewElement: jest.fn().mockResolvedValue('mocked data')
};
const SomeService = jest.fn(() => mockedSomeService);

export { SomeService, mockedSomeService };

Now for the unit test:

import UnderTest from './';

jest.mock('./someService.ts');

const underTest = new UnderTest();

describe('UnderTest', () => {
  it('t1', async () => {
    console.log = jest.fn();
    await underTest.update('jest');
    expect(console.log).toBeCalledWith('mocked data');
  });
});

The unit test result should show success:

 PASS  src/stackoverflow/57775960/index.spec.ts
  UnderTest
    ✓ t1 (14ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.911s, estimated 2s

=================UPDATE================

An alternative approach is to mock the imported module without using the __mocks__ directory. This can be achieved through jest.mock(path, moduleFactory).

import UnderTest from './';

const mockedSomeService = {
  saveNewElement: jest.fn().mockResolvedValue('mocked data')
};

jest.mock('./someService.ts', () => {
  return {
    SomeService: jest.fn(() => mockedSomeService)
  };
});

const underTest = new UnderTest();

describe('UnderTest', () => {
  it('t1', async () => {
    console.log = jest.fn();
    await underTest.update('jest');
    expect(console.log).toBeCalledWith('mocked data');
  });
});

It's recommended to utilize Dependency Injection Principle (DIP) for easier mocking and injecting of dependencies. Import abstract classes/interfaces instead of concrete classes like SomeService.

Answer 2

To simulate the behavior of the imported Service, you can manually mock it by using jest.mock(moduleName) and placing your mocked Service in the __mocks__ directory. I have provided a sample setup for reference:

The file structure should look like this:

.
├── __mocks__
│   └── someService.ts
├── index.spec.ts
├── index.ts
└── someService.ts

someService.ts:

class SomeService {
  public async saveNewElement(data) {
    return 'real data';
  }
}

export { SomeService };

index.ts:

import { SomeService } from './someService';

export default class UnderTest {
  private service: SomeService;

  constructor() {
    this.service = new SomeService();
  }

  public update(data: any): any {
    return this.service.saveNewElement(data).then(res => {
      // stuff to do
      console.log(res);
    });
  }
}

__mocks__/someService.ts:

const mockedSomeService = {
  saveNewElement: jest.fn().mockResolvedValue('mocked data')
};
const SomeService = jest.fn(() => mockedSomeService);

export { SomeService, mockedSomeService };

Now for the unit test:

import UnderTest from './';

jest.mock('./someService.ts');

const underTest = new UnderTest();

describe('UnderTest', () => {
  it('t1', async () => {
    console.log = jest.fn();
    await underTest.update('jest');
    expect(console.log).toBeCalledWith('mocked data');
  });
});

The unit test result should show success:

 PASS  src/stackoverflow/57775960/index.spec.ts
  UnderTest
    ✓ t1 (14ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.911s, estimated 2s

=================UPDATE================

An alternative approach is to mock the imported module without using the __mocks__ directory. This can be achieved through jest.mock(path, moduleFactory).

import UnderTest from './';

const mockedSomeService = {
  saveNewElement: jest.fn().mockResolvedValue('mocked data')
};

jest.mock('./someService.ts', () => {
  return {
    SomeService: jest.fn(() => mockedSomeService)
  };
});

const underTest = new UnderTest();

describe('UnderTest', () => {
  it('t1', async () => {
    console.log = jest.fn();
    await underTest.update('jest');
    expect(console.log).toBeCalledWith('mocked data');
  });
});

It's recommended to utilize Dependency Injection Principle (DIP) for easier mocking and injecting of dependencies. Import abstract classes/interfaces instead of concrete classes like SomeService.

Ways to simulate a function that is a part of an internal object

Answer №1

Similar questions

What's stopping me from using useState() to assign API data to an array?

A step-by-step guide on integrating Azure Cognitive Search within a SharePoint Online SPFx webpart

Is it feasible to link an Angular property value to the value of an HTML data attribute?

The option value in mat-autocomplete is not displaying correctly on IOS devices

What is the process for extracting the elements of an array fetched from a service in Angular 2?

How can I stop the SvelteKit production node server from filling up the logs with "Error: not found /path/here"?

Encountering an AngularJS 1.6 unit testing issue where the $scope is not defined, leading to a TypeError when trying to read the property 'setDescription' from undefined

ES6 Update: Manipulating Nested Arrays with JavaScript

Unit test failure attributed to misconfigured ECMAScript module setup

Incorporating a TypeScript interface into your Angular project

Unable to locate the "fcm-node" module in Node.js with TypeScript

Error: When trying to run the `ng build` command in Git Bash, TypeScript module cannot be

The sticky navbar fails to stay in place when the content becomes too lengthy

[ERROR] There was a problem encountered during the execution of the ionic-app-scripts subprocess

Error: Type '() => () => Promise<void>' is not compatible with type 'EffectCallback'

Unable to retrieve selected value from Flowbite-React Datepicker due to malfunctioning props change event

Neglect variables that have not been declared (TypeScript)

Unlocking the capabilities of Chrome extensions using Angular 2 and TypeScript

Tips for transferring information between two components when a button is clicked in Angular 2

Fixing the "Module not found" error in an Angular library using npm link