React和Jest模拟模块

Question

我正在创建一个应用程序，在其中我使用redux和node-fetch进行远程数据获取。

我想测试一个事实，那就是我很好地调用了具有良好参数的fetch函数。

这样，我正在使用jest.mock和jasmine.createSpy方法：

it('should have called the fetch method with URL constant', () => {
            const spy = jasmine.createSpy('nodeFetch');
            spy.and.callFake(() => new Promise(resolve => resolve('null')));
            const mock = jest.mock('node-fetch', spy);
            const slug = 'slug';
            actionHandler[FETCH_REMOTE](slug);
            expect(spy).toHaveBeenCalledWith(Constants.URL + slug);
        });

这是我要测试的功能：

[FETCH_REMOTE]: slug => {
        return async dispatch => {
            dispatch(loading());
            console.log(fetch()); // Displays the default fetch promise result
            await fetch(Constants.URL + slug);
            addLocal();
        };
    }

如您所见，我正在尝试记录console.log（fetch（））行为，并且我具有默认承诺来解决node-fetch给定的问题，而不是我用Jest模拟并用jasmine监视的行为。

您有什么不知道的主意吗？

编辑：我的测试向我显示了一个错误，例如从未调用过我的间谍

Answer 1

您的动作处理程序实际上是一个动作处理程序工厂。 在actionHandler[FETCH_REMOTE] ，您正在创建一个新函数。 返回的函数将任务dispatch为参数并调用您显示的代码。
这意味着您的测试代码将永远不会调用间谍程序上的任何函数，因为永远不会调用创建的函数。

我认为您将需要创建一个模拟dispatch功能并执行以下操作：

let dispatchMock = jest.fn(); // create a mock function
actionHandler[FETCH_REMOTE](slug)(dispatchMock);

编辑：

对我来说，您的actionHandler看起来更像是actionCreator ，通常用redux术语来称呼，尽管我个人更喜欢将它们actionFactories因为这就是它们：创建动作的工厂。
当你正在使用thunks （？）你actionCreater （这是误导命名actionHandler ）不直接创建一个action ，但它一旦动作被分派调用另一个函数。 为了进行比较，常规的actionCreator如下所示：

updateFilter: (filter) => ({type: actionNames.UPDATE_FILTER, payload: {filter: filter}}),

另一方面， actionHandler对要分派的动作做出反应并评估其有效负载。

在您的情况下，这就是我要做的：

创建一个名为actionFactories的新对象，如下所示：

const actionFactories = {

    fetchRemote(slug): (slug) => {
        return async dispatch => {
            dispatch(loading());
            console.log(fetch()); // Displays the default fetch promise result
            let response = await fetch(Constants.URL + slug);

            var responseAction;
            if (/* determine success of response */) {
                responseAction = actionFactories.fetchSuccessful(response);
            } else {
                responseAction = actionFactories.fetchFailed();
            }

            dispatch(responseAction);
        };
    }

    fetchFailed(): () => ({type: FETCH_FAILED, }),
    fetchSuccessful(response): () => ({type: FETCH_FAILED, payload: response })
};

为FETCH_FAILED和FETCH_SUCCESSFUL创建一个actionHandler，以根据响应更新商店。

顺便说一句：您的console.log语句对我也没有多大意义，因为fetch只是返回一个承诺。