Ngrx单元测试茉莉花还原剂如何比较状态

Question

我已经完成了这个简单的测试

//嘲笑

    const loginResponseData: LoginResponseDto = {
      auth: { id: 1, username: 'me', roles: [] },
      token: {
        token: 'abc',
        expirationEpochSeconds: 12345
      }
    };
    describe('AuthReducer', () => {
      describe('loginSuccess', () => {
        it('should show loginResponseData state', () => {
          const createAction = loginSuccess({ payload: loginResponseData });

          const result = reducer(initialState, createAction);
          console.log('AUTH', result);
          // How Can I test this?
          //expect(result).toEqual(loginResponseData);
        });
      });
    });

export const initialState: State = {
  error: null,
  loading: false,
  registered: false,
  payload: null
};

const authReducer = createReducer(
  initialState,
  on(AuthActions.login, state => {
    return {
      ...state,
      error: null,
      loading: true
    };
  }),
  on(AuthActions.loginFailure, (state, { error }) => {
    return {
      ...state,
      error,
      loading: false
    };
  }),
  on(AuthActions.loginSuccess, (state, { payload }) => {
    return {
      ...state,
      error: null,
      loading: false,
      payload
    };
  })
);

如何使用loginResponseData测试结果？

Answer 1

减速器的结果是一个新状态。您需要共享减速器的代码才能获得正确的答案。或共享console.log的输出。

因为您的问题代码是正确的

describe('AuthReducer', () => {
  describe('loginSuccess', () => {
    it('should show loginResponseData state', () => {

      const actionPayload: LoginResponseDto = {
        auth: { id: 1, username: 'me', roles: [] },
        token: {
          token: 'abc',
          expirationEpochSeconds: 12345
        }
      };

      const initialState = {
        random: 123, // <- checking that custom data isn't affected
      };

      // in case if reducer does {...state, ...action.payload}
      const expectedState = {
        random: 123,
        payload: {
          auth: { id: 1, username: 'me', roles: [] },
          token: {
            token: 'abc',
            expirationEpochSeconds: 12345
          },
        },
        error: null,
        loading: false,
      };

      const createAction = loginSuccess({ payload: loginResponseData });

      // returns updated state we should compare against expected one.
      const actualState = reducer(initialState, createAction);

      // assertions
      expect(actualState).toEqual(expectedState);
    });
  });
});