如何在redux-thunk中編寫多個條件的單元測試？

Question

我有一個像下面這樣的重擊

export const goToNewExperience = (request?: sessionRequest): ThunkAction => {
  return async (dispatch: Dispatch, getState: GetState) => {
    const state = getState();
    const isNewExp = state.isNewExp;

      if (isNewExp) {
        dispatch(updateExperience({
          type: UPDATE_EXP,
          'NewExperience'
        }))
      } else if (request && request.isError) {
        dispatch(updateExperience({
          type: UPDATE_EXP,
          'ErrorExperience'
        }));
      }
  };
};

如何根據條件在一個redux-thunk中測試其他動作調度程序？ 任何最佳做法？

我這樣寫，但是在尋找最佳實踐

it('should update exp with New Exp', done => {
    const store = createStoreWithState();
    const session = {isNewExp:true};
    store.dispatch(updateSession(session));
    const dispatch = jest.fn();

    goToNewExperience()(dispatch, () => store.getState()).then(_ => {
      expect((dispatch.mock.calls[0][0]: any).type).toEqual(UPDATE_EXP);
      expect((dispatch.mock.calls[0][0]: any).payload).toEqual('NewExperience');
      done();
    });
  });
  it('should update exp with Error Exp', done => {
    const store = createStoreWithState();
    const session = {isNewExp:false};
    store.dispatch(updateSession(session));
    const dispatch = jest.fn();

    goToNewExperience({isError:true})(dispatch, () => store.getState()).then(_ => {
      expect((dispatch.mock.calls[0][0]: any).type).toEqual(UPDATE_EXP);
      expect((dispatch.mock.calls[0][0]: any).payload).toEqual('ErrorExperience');
      done();
    });
  });

Answer 1

這是redux actionCreators的寫單元測試的最佳實踐：

actionCreators.ts ：

import { ThunkAction } from 'redux-thunk';
import { Dispatch, AnyAction } from 'redux';

export const UPDATE_EXP = 'UPDATE_EXP';

export const updateExperience = action => ({ type: action.type, payload: { experience: action.experience } });

export interface ISessionRequest {
  isError: boolean;
}

type GetState<S = IState> = () => S;

export interface IState {
  isNewExp: boolean;
}

export const goToNewExperience = (request?: ISessionRequest): ThunkAction<any, IState, {}, AnyAction> => {
  return async (dispatch: Dispatch, getState: GetState<IState>) => {
    const state = getState();
    const isNewExp = state.isNewExp;

    if (isNewExp) {
      dispatch(
        updateExperience({
          type: UPDATE_EXP,
          experience: 'NewExperience'
        })
      );
    } else if (request && request.isError) {
      dispatch(
        updateExperience({
          type: UPDATE_EXP,
          experience: 'ErrorExperience'
        })
      );
    }
  };
};

actionCreators.spec.ts ：

import { goToNewExperience, IState, UPDATE_EXP, ISessionRequest } from './actionCreators';
import createMockStore from 'redux-mock-store';
import { AnyAction } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import thunk from 'redux-thunk';

const middlewares = [thunk];
const mockStore = createMockStore<IState, ThunkDispatch<IState, any, AnyAction>>(middlewares);

describe('goToNewExperience', () => {
  it('update new experience', () => {
    const initialState = { isNewExp: true };
    const store = mockStore(initialState);
    return store.dispatch(goToNewExperience()).then(() => {
      expect(store.getActions()).toEqual([{ type: UPDATE_EXP, payload: { experience: 'NewExperience' } }]);
    });
  });

  it('update error experience', () => {
    const initialState = { isNewExp: false };
    const store = mockStore(initialState);
    const request: ISessionRequest = { isError: true };
    return store.dispatch(goToNewExperience(request)).then(() => {
      expect(store.getActions()).toEqual([{ type: UPDATE_EXP, payload: { experience: 'ErrorExperience' } }]);
    });
  });

  it('do nothing', () => {
    const initialState = { isNewExp: false };
    const store = mockStore(initialState);
    const request: ISessionRequest = { isError: false };
    return store.dispatch(goToNewExperience(request)).then(() => {
      expect(store.getActions()).toEqual([]);
    });
  });
});

單元測試結果覆蓋率100％：

 PASS  src/stackoverflow/49824394/actionCreators.spec.ts (5.028s)
  goToNewExperience
    ✓ update new experience (10ms)
    ✓ update error experience (1ms)
    ✓ do nothing (1ms)

-------------------|----------|----------|----------|----------|-------------------|
File               |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------|----------|----------|----------|----------|-------------------|
All files          |      100 |      100 |      100 |      100 |                   |
 actionCreators.ts |      100 |      100 |      100 |      100 |                   |
-------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        6.09s, estimated 7s

這是完整的演示： https : //github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/49824394