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只是返回一個承諾。