Reactjs Typescript，在Redux操作中测试Api调用，在Ezyme中模拟类，Jest

我有一个问题，我需要模拟在我的redux操作中调用的类

Api

，这个类调用axios get、post等。。。这需要嘲笑。我一直在学习如何模拟axios的教程和如何模拟类的教程，但这两种方法似乎都不起作用

现在看一些代码。。。下面是我需要测试的操作类型的示例

export const getAlldata = (id: string) => {
    return (dispatch: any) => {
        dispatch(beginAjaxRequest(id, types.BEGIN_GET_DATA_AJAX));
        return Api.get("/data/data").then((response: any) => {
            dispatch(getDataSuccess(response.data, id))
        }).catch((error) => {
            dispatch(handleAjaxError(id, new Alert({ id: id, title: "Error getting data", message: error.toString(), timestamp: Date.now(), error: true })));
        });
    }
}

以及

Api

调用的部分

import axios from 'axios';

class Api {
    static get(path: string) {
        return axios({
            method: 'get',
            url: (global as any).apiDomain + path,
            headers: {
                Authorization: "Bearer " + (global as any).authentication.getToken(),
            "Content-Type": "application/json"
            }
        });
    }
}

export default Api;

我曾尝试在src/mocks/Api中模拟它（模拟后面和前面的两个下划线）

并在我的设置测试中设置

import * as Enzyme from 'enzyme';
import Api from './__mocks__/Api';
const Adapter = require("enzyme-adapter-react-16");

(global as any).Api = Api;

Enzyme.configure({ adapter: new Adapter() });

在我的实际测试中

describe('thunk actions', () => {

    var middleware = [thunk];
    var mockStore = configureMockStore(middleware);
    afterAll(() => {
        cleanAll();
    });

    test('getAllData gets all data', (done: any) => {
        var store = mockStore({});
        jest.mock('../../api/Api'); // path to real Api
        var id = generateGuid();
        store.dispatch<any>((getAllData(id))).then(() => {
            done();
        });
    });
});

description（'thunk actions'，（）=>{
var中间件=[thunk]；
var mockStore=configureMockStore（中间件）；
毕竟（（）=>{
cleanAll（）；
});
测试（'getAllData获取所有数据'，（完成：任意）=>{
var store=mockStore（{}）；
jest.mock（'../../api/api'）；//实际api的路径
var id=generateGuid（）；
store.dispatch（（getAllData（id）））。然后（（）=>{
完成（）；
});
});
});

---

所以很明显，这实际上并没有测试任何东西，我只是想让它正常工作，但我在真实的Api中不断出现错误，而不是在模拟中。我也试过模仿axios，但我也遇到了同样的错误（不能忽略undefined），所以这似乎并没有取代axios或Api，有人能看出我哪里出了问题吗？

当你在stackoverflow上发布一个问题，在一周内得到0个答案和0个回复时，你知道你完蛋了。。。这并不理想，但我已经找到了一种解决方法，可以在thunk操作中重写Api类，而不是将Api类导入到所有操作文件中并直接调用它，现在我只将其导入到项目的根目录（App.tsx）中，并将其全局化，如下所示（精简到最低限度）

然后简单地覆盖这是setupTests.ts

import * as Enzyme from 'enzyme';
import Api from './__mocks__/Api';
const Adapter = require("enzyme-adapter-react-16");

(global as any).Api = Api;

Enzyme.configure({ adapter: new Adapter() });

…这样就不需要开玩笑了，只需调用测试和测试中的操作即可

此方法还可以在节点外部工作，方法是将全局替换为窗口。这可以完成工作，但并不理想，因为我不喜欢使用全局名称空间，所以如果有人知道更好的方法，就可以发布

import * as React from 'react';
import Api from './api/Api';

export interface State {

}

export interface Props {

}

export class App extends React.Component<Props, State> {

    state = {

    };

    componentWillMount = () => {
        (global as any).Api = Api;
    };





    public render() {
        return (
            <div>

            </div>
        );
    }
}


export default App;

export const getAlldata = (id: string) => {
    return (dispatch: any) => {
        dispatch(beginAjaxRequest(id, types.BEGIN_GET_DATA_AJAX));
        return (global as any).Api.get("/data/data").then((response: any) => {
            dispatch(getDataSuccess(response.data, id))
        }).catch((error) => {
            dispatch(handleAjaxError(id, new Alert({ id: id, title: "Error getting data", message: error.toString(), timestamp: Date.now(), error: true })));
        });
    }
}

import * as Enzyme from 'enzyme';
import Api from './__mocks__/Api';
const Adapter = require("enzyme-adapter-react-16");

(global as any).Api = Api;

Enzyme.configure({ adapter: new Adapter() });