Redux 비동기 반응 테스트 반응

Question

비동기 작업을 테스트하기 위해 테스트를 작성했습니다.

비동기 동작 시험 :

import { createStore, applyMiddleware } from 'redux'; 
import initialState from '../reducers/initialState'; 
import rootReducer from '../reducers/index'; 
import thunk from 'redux-thunk'; 
import * as actions from './actions'; 
import * as ActionTypes from '../constants/constants'; 
import nock from 'nock'; 
import { expect } from 'chai'; 
import API_KEY from '../config/config'; 

const MOVIES_API = 'https://api.themoviedb.org/3/discover/movie?api_key='+API_KEY; 

describe('async actions',() => { 
    afterEach(() => { 
    nock.cleanAll(); 
    }); 

    it('creates FETCH_MOVIES_SUCCESS when fetching movies is complete',() => { 
    nock(MOVIES_API) 
     .get() 
     .reply(200, {data: {results: [{title: 'Batman vs Superman'}]}}); 

    const expectedActions = [ 
     { type: ActionTypes.FETCH_MOVIES }, 
     { type: ActionTypes.FETCH_MOVIES_SUCCESS, data: {results: [{title: 'Batman vs Superman'}]}} 
    ]; 

    const store = createStore(rootReducer, initialState, applyMiddleware(thunk)); 

    return store.dispatch(actions.fetchMovies()).then(() => { 
     expect(store.getActions()).to.deep.equal(expectedActions); 
     }); 
    }); 
}); 

행동 : 나는 현재 다음과 같은 오류 TypeError: Cannot read poperty 'then' of undefined 받고 있어요 그리고 내 코드 여기

return store.dispatch(actions.fetchMovies()).then(() => { 

에 다음 줄을 가리키는 것은 내 코드입니다

import axios from 'axios'; 

import * as constants from '../constants/constants'; 
import API_KEY from '../config/config'; 


export const fetchMovies =() => { 
    const MOVIES_API = 'https://api.themoviedb.org/3/discover/movie?api_key='+ API_KEY; 

    return dispatch => { 
    dispatch({ 
     type: constants.FETCH_MOVIES 
    }); 
    axios.get(MOVIES_API).then(function(response) { 
     dispatch({ 
     type: constants.FETCH_MOVIES_SUCCESS, 
     data: response.data.results 
     }); 
    }) 
    .catch(function(res) { 
     dispatch({ 
     type: constants.FETCH_MOVIES_ERROR, 
     msg: res.message 
     }); 
    }); 
    }; 
}; 

처음에는 비동기 동작을 테스트하는 것이므로 w가 확실하지 않습니다. 모자가 잘못됐다.

Answer 1

redux createStore() 대신 redux-mock-store을 사용해보세요. 이것은 비동기 액션 제작자와 미들웨어를 테스트하기위한 모의 저장소입니다. Github 페이지에는 사용 방법에 대한 예제가 포함되어 있습니다.

편집 :

이 axios.get(MOVIES_API)의 결과를 반환하도록 당신이 당신의 행동 작성자를 수정하면 어떻게됩니까

?

Answer 2

당신의 행동이 약속을 되돌려주지 않았기 때문입니다 - 당신의 행동이 기대할 수있는 약속을 되 돌리도록 변경하십시오. 필수 사항은 아니지만 API 호출이 완료된 시점 (예 : 단위 테스트에서이 특정 사례에 대해 알고 싶어하는 경우)을 알고 싶다면 액션의 편의 부작용으로 약속을 반환 할 수 있습니다.

export const fetchMovies =() => { 
    const MOVIES_API = 'https://api.themoviedb.org/3/discover/movie?api_key='+ API_KEY; 

    return dispatch => { 
    dispatch({ 
     type: constants.FETCH_MOVIES 
    }); 

    // Return a promise 
    return axios.get(MOVIES_API).then(function(response) { 
     dispatch({ 
     type: constants.FETCH_MOVIES_SUCCESS, 
     data: response.data.results 
     }); 
    }) 
    .catch(function(res) { 
     dispatch({ 
     type: constants.FETCH_MOVIES_ERROR, 
     msg: res.message 
     }); 
    }); 
    }; 
} 

;