React-redux：統合テストを書く方法

Question

Enzymeを使用して、反応部分と還元部分をテストしています。私は読んだことがあり、コンポーネントの統合テストを作成するのがよい方法であることがわかりました。 アクションクリエーターを呼び出してストアに対する更新値を確認する必要がありますが、私はdispatchアクションを返す非同期アクションがいくつかあります。

login.actions.js

export function loginUser(credentials) { 
    return dispatch => { 
    dispatch(action.loginRequest()); 
    return axios({ 
     method: 'post', 
     url: `${api}/login`, 
     data: { 
     email: _.trim(_.get(credentials, 'email')), 
     password: _.get(credentials, 'password') 
     } 
    }) 
     .then(response => { 
     const { data } = response; 

     if (_.isEqual(_.get(response, 'status'), 200)) { 
      dispatch(action.loginSuccess(data)); 
     } 
     }) 
     .catch(err => { 
     dispatch(action.loginError(err)); 
     }); 
    }; 
} 

login.actionCreators.js

export function loginRequest() { 
    return { 
    type: types.LOGIN_REQUEST 
    }; 
} 
export function loginSuccess(payload) { 
    return { 
    type: types.LOGIN_SUCCESS, 
    payload 
    }; 
} 
export function loginError(payload) { 
    let error; 
    switch (_.get(payload, 'response.status')) { 
    case 422: { 
     error = 'Invalid Credentials'; 
     break; 
    } 
    case 401: { 
     error = 'Invalid user'; 
     break; 
    } 
    case 403: { 
     error = 'Account not confirmed'; 
     break; 
    } 
    default: 
     error = 'Something went wrong'; 
    } 
    return { 
    type: types.LOGIN_ERROR, 
    error 
    }; 
} 

ので、完全な統合テストを実行するために、私はlogin.actions.jsをテストする必要があります同様にディスパッチは普通のオブジェクトを返すので、私の場合はディスパッチ関数を返しています。どうすればそれらをテストできますか？

Answer 1

非同期アクションをテストするのは簡単です。

moxios ans sinonを使用しています。基本的にこれをすべての異なるケースに拡張し、同じパターンでテストすることができます

import moxios from 'moxios'; 
import configureMockStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import { spy } from 'sinon'; 

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

describe('async actions',() => { 
    beforeEach(() => { 
    moxios.install(); 
    }); 

    afterEach(() => { 
    moxios.uninstall(); 
    }); 
    it(`should create action LOGIN_SUCCESS after successful login`,() => { 
    moxios.wait(() => { 
     const request = moxios.requests.mostRecent(); 
     request.respondWith({ 
     status: 200, 
     response: { message: 'success', status: '200' }, 
     }); 
    }); 
    const expectedActions = [ 
     { type: types.LOGIN_REQUEST }, 
     { type: types.LOGIN_SUCCESS, data: { message: 'success', status: '200' } }, 
    ]; 
    const store = mockStore({ auth: {} }); 
    return store.dispatch(loginUser('abcd', '1234')) 
    .then(() => { 
     expect(store.getActions()).to.eql(expectedActions); 
    }); 
    }); 
});