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

The Vue instance seems to be unable to recognize the shims-vue.d.ts file

How can a class be imported into a Firebase Cloud function in order to reduce cold start time?

Updating a boolean prop does not cause the child component to be refreshed

After the rendering process, the React Component member goes back to a state of

Is there a way to automatically scroll to the bottom of a div when it first

Raycasting in Three.js is ineffective on an object in motion

Changing return values with Jest mocks in TypeScript

What is the best way to adjust and filter an array based on a single value?

What steps should I take to address conflicting type identifiers between Cypress and jQuery?

Ways to verify if a function has completed execution and proceed to invoke another function

Converting an array of objects to an array based on an interface

Leverage context to facilitate communication between components operating at various levels of the system

Angular 5 - Creating a dynamic function that generates a different dynamic function

How do I remove a specific object from my localStorage array in Angular?

A Typescript object that matches types and eventually returns a string when called upon

Organizing string enum in Typescript and AngularJS - Tips and Tricks

Update the headers of the axios.create instance that is exported by Axios

transform array elements into an object

Identify and handle errors effectively using TypeScript

Utilizing shared state in React components through props