Mocking store.dispatch in Jest with TypeScript did not result in any function calls being made

Question

Mocking store.dispatch in Jest with TypeScript did not result in any function calls being made

Testing Troubles

I'm a beginner in the world of testing and I'm facing some challenges. Despite going through all the documentation on jest, I couldn't find information specific to TypeScript cases. Currently, I'm on a quest to figure things out and learn as much as I can. My goal is to create a simple test to verify if my code functions as expected.

jest.mock('moment', () => {
    return {
        toLocaleString: jest.fn().mockReturnValue('test')
    }
});
...

The issue I'm encountering can be seen https://i.stack.imgur.com/JzlTp.png

I'm determined to unravel this puzzle and improve my understanding of testing methodologies and best practices.

typescript unit-testing jestjs

Answer 1

Answer №1

I discovered the solution...

describe('triggerSnackBar', () => {
    let spy: any
    beforeEach(() => {
        spy = jest.spyOn(store, 'dispatch');
    })
    afterEach(() => {
        jest.clearAllMocks()
    })
    it('should trigger dispatch function 3 times successfully', () => {
        globalMixins.methods.triggerSnackBar('test', 'green')
        expect(store.dispatch).toBeCalledTimes(3)
    });
    it('should have been called with accurate parameters', () => {
        globalMixins.methods.triggerSnackBar('test', 'green')
        expect(store.dispatch).nthCalledWith(1, 'triggerSnackbarMessage', { text: 'test' })
        expect(store.dispatch).nthCalledWith(2, 'triggerSnackbarColor', { color: 'green' })
        expect(store.dispatch).nthCalledWith(3, 'triggerSnackbar')
    })
});

Answer 2

I discovered the solution...

describe('triggerSnackBar', () => {
    let spy: any
    beforeEach(() => {
        spy = jest.spyOn(store, 'dispatch');
    })
    afterEach(() => {
        jest.clearAllMocks()
    })
    it('should trigger dispatch function 3 times successfully', () => {
        globalMixins.methods.triggerSnackBar('test', 'green')
        expect(store.dispatch).toBeCalledTimes(3)
    });
    it('should have been called with accurate parameters', () => {
        globalMixins.methods.triggerSnackBar('test', 'green')
        expect(store.dispatch).nthCalledWith(1, 'triggerSnackbarMessage', { text: 'test' })
        expect(store.dispatch).nthCalledWith(2, 'triggerSnackbarColor', { color: 'green' })
        expect(store.dispatch).nthCalledWith(3, 'triggerSnackbar')
    })
});

Mocking store.dispatch in Jest with TypeScript did not result in any function calls being made

Testing Troubles

Answer №1

Similar questions

What is the best method for extracting individual JSON objects from a response object and presenting them in a table using Angular?

Error message: The object is not visible due to the removal of .shading in THREE.MeshPhongMaterial by three-mtl-loader

Excluding properties based on type in Typescript using the Omit or Exclude utility types

Problem with Change Detection in Angular 2

Trouble with invoking a function within a function in Ionic2/Angular2

How can I load a separate component.html file using a component.ts file?

Access PDF document in a fresh tab

What impact does adding 'ng' in unit tests have on how promises are handled?

Angular - Enabling the next screen button only after completing multiple selections

Achieving Jest integration with Angular 9 in a Storybook setup

There seems to be a mismatch in this Typescript function overloading - None of the over

Tips for successfully interacting with dynamic text areas using Protractor:

What sets enum with string values apart from a string type union in TypeScript?

Customizing number input types in Angular 2 - the perfect solution

Unlocking the Power of CheerioJS for Selecting Table Elements

Creating dynamic and engaging videos using Angular with the ability to make multiple requests

Too many open files error encountered in Watchpack (watcher) - NextJS

What are the essential requirements for an Angular application to function properly with minimal dependencies?

NPM Package: Accessing resources from within the package

What is the TypeScript syntax for defining a component that does not require props to be passed when called?