如何对Redux Thunks进行单元测试

形实转换操作创建器的全部意义在于在将来分派异步操作。在使用redux-thunk时，一个好的方法是用三个动作来模拟开始和结束的过程，从而导致成功或错误。
虽然这个例子使用Mocha和Chai进行测试，但您可以很容易地使用任何Assert库或测试框架。

使用由我们的主形实转换操作创建器管理的多个操作来建模CMAC进程

在这个例子中，我们假设您想要执行一个更新产品的异步操作，并且想要知道三个关键的事情。

• 当开始执行cdc操作时，
• 当dec操作完成时
• blog操作是成功还是失败

好了，现在是时候根据操作生命周期的这些阶段来对redux操作进行建模了。请记住，这同样适用于所有的javascript操作，因此这通常适用于从API获取数据的http请求。
我们可以这样写我们的行为。

• accountDetailsActions.js：*

export function updateProductStarted (product) {
  return {
    type: 'UPDATE_PRODUCT_STARTED',
    product,
    stateOfResidence
  }
}
export function updateProductSuccessful (product, stateOfResidence, timeTaken) {
  return {
    type: 'PRODUCT_UPDATE_SUCCESSFUL',
    product,
    stateOfResidence
    timeTaken
  }
}
export function updateProductFailure (product, err) {
  return {
    product,
    stateOfResidence,
    err
  }
}
// our thunk action creator which dispatches the actions above asynchronously
export function updateProduct(product) {
  return dispatch => {
    const { accountDetails } = getState()
    const stateOfResidence = accountDetails.stateOfResidence
    // dispatch action as the async process has begun
    dispatch(updateProductStarted(product, stateOfResidence))
    return updateUser()
        .then(timeTaken => {
           dispatch(updateProductSuccessful(product, stateOfResidence, timeTaken)) 
        // Yay! dispatch action because it worked
      }
    })
    .catch(error => {
       // if our updateUser function ever rejected - currently never does -
       // oh no! dispatch action because of error
       dispatch(updateProductFailure(product, error))
    })
  }
}

注意底部的忙碌看起来很忙的动作。他就是我们的思维活动创造者。因为它返回一个函数，所以它是一个被redux-thunk中间件拦截的特殊操作。该形实转换操作创建者可以在将来的某个时间点分派其他操作创建者。相当聪明。
现在，我们已经编写了操作来建模一个异步流程，这是一个用户更新。假设这个进程是一个函数调用，它返回一个promise，这将是目前处理BRAC进程的最常见方法。

为我们正在使用redux操作建模的实际BRAC操作定义逻辑

在这个例子中，我们将创建一个返回promise的泛型函数。将其替换为更新用户的实际函数或执行DMAC逻辑。确保函数返回一个promise。
我们将使用下面定义的函数来创建一个可工作的自包含示例。要获得一个工作示例，只需将此函数放入actions文件中，使其处于thunk action creator的作用域中。

// This is only an example to create asynchronism and record time taken
 function updateUser(){
      return new Promise( // Returns a promise will be fulfilled after a random interval
          function(resolve, reject) {
              window.setTimeout(
                  function() {
                      // We fulfill the promise with the time taken to fulfill
                      resolve(thisPromiseCount);
                  }, Math.random() * 2000 + 1000);
          }
      )
})

我们的测试文件

import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import chai from 'chai' // You can use any testing library
let expect = chai.expect;
import { updateProduct } from './accountDetailsActions.js'
const middlewares = [ thunk ]
const mockStore = configureMockStore(middlewares)
describe('Test thunk action creator', () => {
  it('expected actions should be dispatched on successful request', () => {
    const store = mockStore({})
    const expectedActions = [ 
        'updateProductStarted', 
        'updateProductSuccessful'
    ]
    return store.dispatch(fetchSomething())
      .then(() => {
        const actualActions = store.getActions().map(action => action.type)
        expect(actualActions).to.eql(expectedActions)
     })
  })
  it('expected actions should be dispatched on failed request', () => {
    const store = mockStore({})
    const expectedActions = [ 
        'updateProductStarted', 
        'updateProductFailure'
    ]
    return store.dispatch(fetchSomething())
      .then(() => {
        const actualActions = store.getActions().map(action => action.type)
        expect(actualActions).to.eql(expectedActions)
     })
  })
})

看看食谱：根据官方文档编写测试。还有，你在测试什么，动作创建器还是缩减器？

Action Creator测试示例

describe('types.UPDATE_PRODUCT', () => {
    it('should update product when passed a product object', () => {    
        const store = mockStore({courses: []});
        const expectedActions = [
            / * your expected actions */
        ];
        return store.dispatch(actions.updateProduct(product))
            .then(() => {
                expect(store.getActions()).to.eql(expectedActions);
            });
    });
});

减速器测试示例

你的reducer应该是一个纯函数，这样你就可以在商店环境之外单独测试它。

const yourReducer = require('../reducers/your-reducer');
describe('reducer test', () => {
    it('should do things', () => {
        const initialState = {
            product: {}
        };
        const action = {
            type: types.UPDATE_PRODUCT,
            stateOfResidence: // whatever values you want to test with,
            product: {
                id: 1,
                accountTypeId: 1,
                officeRangeId: 1,
                additionalInfo: "",
                enabled: true
            }
        }
        const nextState = yourReducer(initialState, action);
        expect(nextState).to.be.eql({ /* ... */ });
    });
});

export const someAsyncAction = (param) => (dispatch, getState) => {
    const { mock } = getState();
    dispatch({
        type: 'SOME_TYPE',
        mock: mock + param,
    })
}
it('should test someAsyncAction', () => {
    const param = ' something';
    const dispatch = jest.fn().mockImplementation();
    const getState = () => ({
        mock: 'mock value',
    });
    const expectedAction = {
        type: 'SOME_TYPE',
        mock: 'mock value something'
    };
    const callback = someAsyncAction(param);
    expect(typeof callback).toBe('function');
    callback.call(this, dispatch, getState);
    expect(dispatch.mock.calls[0]).toEqual([expectedAction])
});

import {createStore, applyMiddleWare, combineReducers} from 'redux';
import contactsReducer from '../reducers/contactsReducer';
function getThunk(dispatchMock){
 return ({dispatch, getState}) => (next) => (action) => {
  if(typeof action === 'function'){
   // dispatch mock function whenever we are dispatching thunk action
   action(dispatchMock, getState);
   return action(dispatch, getState);
  }
  // dispatch mock function whenever we are dispatching action
  dispatchMock(action);
  return next(action);
 }
}
describe('Test Redux reducer with Thunk Actions', ()=>{
 test('should add contact on dispatch of addContact action',()=>{
   // to track all actions dispatched from store, creating mock.
   const storeDispatchMock = jest.fn();
   const reducer = combineReducers({
     Contacts: contactsReducer
   })
   const store = createStore( reducer, {Contacts:[]}, applyMiddleware(getThunk(storeDispatchMock));
   store.dispatch(someThunkAction({name:"test1"}))
   expect(storeDispatchMock).toHaveBeenCalledWith({
    type:'contactUpdate', payload:{{name:"test1"}}
   })
   expect(store.getState()).toBe({Contacts:[{name:"test1"}]})
 })
})