我正在模拟一个在我的 Vue 组件中使用的 ES6 类:
export default class DataUploadApi {
// Get uploaded files
static async getUploadedFiles() : Promise<Object> {
return WebapiBase.getAsync({uri: DATA_UPLOAD_ENPOINTS.FILES});
}
}
我一直在关注this文档,但我认为我的语法与我的模拟略有不同:
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();
});
});
});
该测试通过。但是,在快照中我可以看到调用的 API 失败并显示以下错误消息:
<p>
_DataUploadService.default.getUploadedFiles is not a function
</p>
我对函数模拟做错了什么?提前致谢!
最佳答案
我的代码似乎存在一些问题:
模拟 API
使用内部 mockImplementation
似乎会导致问题,如果您不需要额外的模拟功能,则不需要。
jest.mock('@/apps/gb-data/webapi/DataUploadService', () => ({
getUploadedFiles() {
return Promise.resolve({ uploaded_files: {} });
},
}));
测试的更改
两者flushPromises
和 nextTick
是必需的。
it('with uploaded files', async () => {
const wrapper = mount(FileDownloadList, {
stubs: fileDownloadListStubs,
});
await flushPromises();
await wrapper.vm.$nextTick();
expect(wrapper).toMatchSnapshot();
});
关于javascript - 开 Jest : Vue Component can't find mocked function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57655118/