非同期ReduxアクションJest

Question

非同期reduxアクションから正しい出力を得ることができません。私はJest、redux-mock-adapter、thunkをツールとして使用しています。

reduxの非同期サンク（https://redux.js.org/docs/recipes/WritingTests.html#async-action-creators）のテストに関するドキュメントによると、テストでは2つのアクションの配列が返されます。しかし、私のテストでは、最初のアクションだけが返され、成功したフェッチで返されるはずの2番目のアクションは返されません。私はここに小さなものを見逃していると思うが、それほど言わないのは面倒だ。

Reduxのアクション

export const getRemoveFileMetrics = cacheKey => dispatch => { 
    dispatch({ type: IS_FETCHING_DELETE_METRICS }); 
    return axios 
     .get("GetRemoveFileMetrics", { params: { cacheKey } }) 
     .then(response => dispatch({ type: GET_REMOVE_FILE_METRICS, payload: response.data })) 
     .catch(err => err); 
}; 

テスト

it("getRemoveFileMetrics() should dispatch GET_REMOVE_FILE_METRICS on successful fetch",() => { 
     const store = mockStore({}); 
     const cacheKey = "abc123doremi"; 
     const removeFileMetrics = { 
      cacheKey, 
      duplicateFileCount: 3, 
      uniqueFileCount: 12, 
     }; 
     const expectedActions = [ 
      { 
       type: MOA.IS_FETCHING_DELETE_METRICS, 
      }, 
      { 
       type: MOA.GET_REMOVE_FILE_METRICS, 
       payload: removeFileMetrics, 
      } 
     ]; 
     mockRequest.onGet(`/GetRemoveFileMetrics?cacheKey=${cacheKey}`).reply(200, removeFileMetrics); 
     return store.dispatch(MOA.getRemoveFileMetrics(cacheKey)).then(() => { 
      const returnedActions = store.getActions(); 
      expect(returnedActions).toEqual(expectedActions); 
     }); 
    }); 

出力

Expected value to equal: 
    [{ "type": "IS_FETCHING_DELETE_METRICS" }, { "payload": { "cacheKey": "abc123doremi", "duplicateFileCount": 3, "uniqueFileCount": 12 }, "type": "GET_REMOVE_FILE_METRICS" }] 
Received: 
    [{ "type": "IS_FETCHING_DELETE_METRICS" }] 

Answer 1

私はを使用していますおよびaxios。以下は、私の行動に取り組んでいます。最初のステップとしてasync awaitにリファクタリングすることができます。私にとっては、それはそのようにしか働かなかった。

私は今、副作用（showErrorAlert(jsonResponse);）のテスト方法を理解しようとしています。テストファイルの先頭にあるshowErrorAlertの実装を模倣すると（私の例ではコメントアウトされています）、あなたと同じような問題が発生します。フェッチを使用するアクションは何らかの理由でトリガーされません。

export const submitTeammateInvitation = (data) => { 
    const config = { 
    //..... 
    }; 

    return async (dispatch) => { 
    dispatch(submitTeammateInvitationRequest()); 

    try { 
     const response = await fetch(inviteTeammateEndpoint, config); 
     const jsonResponse = await response.json(); 

     if (!response.ok) { 
     showErrorAlert(jsonResponse); 
     dispatch(submitTeammateInvitationError(jsonResponse)); 

     throw new Error(response.statusText); 
     } 

     dispatch(submitTeammateInvitationSuccess()); 
    } catch (error) { 
     if (process.env.NODE_ENV === 'development') { 
     console.log('Request failed', error); 
     } 
    } 
    }; 
}; 

テスト

import configureMockStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 

// jest.mock('../../../../_helpers/alerts',()=> ({ showAlertError: jest.fn() })); 

const middlewares = [thunk]; 
const createMockStore = configureMockStore(middlewares); 

...... 

it('dispatches the correct actions on a failed fetch request',() => { 
    fetch.mockResponse(
    JSON.stringify(error), 
    { status: 500, statusText: 'Internal Server Error' } 
); 

    const store = createMockStore({}); 
    const expectedActions = [ 
    { 
     type: 'SUBMIT_TEAMMATE_INVITATION_REQUEST', 
    }, 
    { 
     type: 'SUBMIT_TEAMMATE_INVITATION_FAILURE', 
     payload: { error } 
    } 
    ]; 

    return store.dispatch(submitTeammateInvitation(data)) 
    .then(() => { 
     // expect(alerts.showAlertError).toBeCalled(); 
     expect(store.getActions()).toEqual(expectedActions); 
    }); 
});