开玩笑：Vue组件找不到模拟函数

Question

I'm mocking a ES6 class which is used inside my Vue Component:

export default class DataUploadApi {
    // Get uploaded files
    static async getUploadedFiles() : Promise<Object> {
        return WebapiBase.getAsync({uri: DATA_UPLOAD_ENPOINTS.FILES});
    }
}

I've been following along with this document, but I think my syntax is slightly off with my mock:

import { mount } from '@vue/test-utils';
import DataUploadApi from '../webapi/DataUploadService';
import FileDownloadList from '../components/file-download-list.vue';

const mockGetUploadedFiles = jest.fn().mockResolvedValue({json: JSON.stringify(uploadedFilesObj)});
jest.mock('../webapi/DataUploadService', () => jest.fn().mockImplementation(() => ({getUploadedFiles: mockGetUploadedFiles})));

describe('file-download-list component', () => {
    beforeEach(() => {
        // @ts-ignore
        DataUploadApi.mockClear(); // https://stackoverflow.com/a/52707663/1695437 dont use @ imports on mocks.
        mockGetUploadedFiles.mockClear();
    });
    describe('renders correct markup:', () => {
        it('without any uploaded files', () => {
            const wrapper = mount(FileDownloadList, {});
            expect(wrapper).toMatchSnapshot();
        });
    });
});

This test passes. However, in the snapshot I can see that the API called failed with this error message:

<p>
    _DataUploadService.default.getUploadedFiles is not a function
</p>

What have I done wrong with the function mock? Thanks in advance!

Answer 1

There seemed to be a few issues with my code:

Mocking the API

Using an internal mockImplementation seems to cause issues, and is not required if you don't need the additional mock functionality.

jest.mock('@/apps/gb-data/webapi/DataUploadService', () => ({
    getUploadedFiles() {
        return Promise.resolve({ uploaded_files: {} });
    },
}));

Changes to the test

Both flushPromises and nextTick are required.

 it('with uploaded files', async () => {
     const wrapper = mount(FileDownloadList, {
         stubs: fileDownloadListStubs,
     });
     await flushPromises();
     await wrapper.vm.$nextTick();
     expect(wrapper).toMatchSnapshot();
});