unit-testing - tutorial - reactjs redux

React-redux: Cómo escribir una prueba de integración

Question

Estoy usando Enzyme para probar mis porciones de reacción y reducción. He leído y he encontrado que es una buena práctica escribir una prueba de integración para el componente también. Entonces, es simple ya que tengo que llamar a los creadores de acciones y verificar sus valores actualizados contra la tienda, pero tengo algunas acciones asincrónicas que devuelven acciones de 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
  };
}

Entonces, para realizar una prueba de integración completa, tendría que probar el login.actions.js también, pero dado que el envío normalmente devuelve objetos simples, en mi caso están devolviendo una función de despacho. ¿Cómo los pruebo?

Answer 1

Es simple probar las acciones asíncronas.

Estoy usando moxios ans sinon . Básicamente puede ampliar esto a todos los casos diferentes y probarlo en el mismo patrón

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);
    });
  });
});