Jest TypeScript mocking store.dispatch 导致调用 0

Question

Problem

I'm new to testing. I've actually gone through all of the docs on jest and they don't cover typescript specific cases and I'm researching what I can. I'm trying to write a simple test to see if my code was triggered.

jest.mock('moment', () => {
    return {
        toLocaleString: jest.fn().mockReturnValue('test')
    }
});
jest.mock('@/store/index')
jest.mock('vuex'), () => {
    return {
        store: {
            dispatch: jest.fn()
        }
    }
};
jest.mock('@/services/JanusRequestService')
jest.mock('../../src/axiosConfig')
jest.mock('../../src/router', () => {
    return {
        test: jest.fn()
    }
})
jest.mock('../../src/interfaces/Request')

describe('copyRequestToClipboard', () => {
    let RequestMock = {
        Id: '1',
        createdBy: 'string',
        CreatedOnUtc: new Date(),
        modifiedOn: 'string',
        version: 2,
        workflowId: 'string',
        Status: 'string'
    }
    //@ts-ignore
    let writeTextMock = window.__defineGetter__('navigator', function () {
        return {
            clipboard: {
                writeText: jest.fn(x => x)
            }
        }
    })
    it('should call navigator.clipboard.writeText() correctly', () => {
        globalMixins.methods.copyRequestIdToClipboard(RequestMock)
        expect(writeTextMock).toHaveBeenCalled
    });

    it('should call triggerSnackBar correctly', () => {
        globalMixins.methods.triggerSnackBar = jest.fn()
        globalMixins.methods.copyRequestIdToClipboard(RequestMock)
        expect(globalMixins.methods.triggerSnackBar).toHaveBeenCalled
        expect(globalMixins.methods.triggerSnackBar).toHaveBeenCalledWith('Copied to Clipboard!', '')
    });
});
describe('triggerSnackBar', () => {
    let RequestMock: IRequest
    function constructData() {
        return {
            Id: '1',
            createdBy: 'string',
            CreatedOnUtc: new Date(),
            modifiedOn: 'string',
            version: 2,
            workflowId: 'string',
            Status: 'string'
        }
    }
    beforeEach(() => {
        RequestMock = constructData()
        let dispatchMock = store.dispatch = jest.fn();
    })

    it('should successfully call on dispatch 3 times', () => {
        globalMixins.methods.triggerSnackBar('test', 'green')
        expect(store.dispatch).toBeCalledTimes(3)
    });
    it('should have called with correct params', () => {
        globalMixins.methods.triggerSnackBar('test', 'green')
        expect(store.dispatch).toBeCalledWith({ text: 'test' })
    })
});

The error I get is

I'm trying to understand what it is I'm doing wrong. I'm also making notes of how I need to test and what patterns to use.

Answer 1

I found the answer..

describe('triggerSnackBar', () => {
    let spy: any
    beforeEach(() => {
        spy = jest.spyOn(store, 'dispatch');
    })
    afterEach(() => {
        jest.clearAllMocks()
    })
    it('should successfully call on dispatch 3 times', () => {
        globalMixins.methods.triggerSnackBar('test', 'green')
        expect(store.dispatch).toBeCalledTimes(3)
    });
    it('should have called with correct params', () => {
        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')
    })
});