lundi 22 janvier 2018

React Redux async action tests

Hello I have some problems with testing react redux async actions every time i run the test I am receiving this array [{"type": "LOGIN"}] instead of this:

[{"type": "LOGIN"}, {"body": {"data": {"token": "1ca9c02f-d6d2-4eb8-92fd-cec12441f091", "userName": "8888888888888888"}}, "type": "LOGIN_SUCCESS"}]

Here are my code snippets:

The code from the actions:

export const LOGIN = 'LOGIN';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_ERROR = 'LOGIN_ERROR';

import { Api } from '../../../constants/api';

const api = new Api();

function loginSuccess(data) {
  return {
    type: LOGIN_SUCCESS,
    data,
  };
}

function loginError(error) {
  return {
    type: LOGIN_ERROR,
    error,
  };
}

export function login(fields) {
  return async dispatch => {
    dispatch({ type: LOGIN });
    api
      .register(fields.vin)
      .then(response => {
        const data = Object.assign(response.data, fields);
        return dispatch(loginSuccess(data));
      })
      .catch(error => dispatch(loginError(error)));
  };
}

And the code from the action.test file:

import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';
import fetchMock from 'fetch-mock';
import * as actions from './actions';

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

describe('async actions', () => {
  afterEach(() => {
    fetchMock.reset();
    fetchMock.restore();
  });

  it('creates LOGIN_SUCCESS when fetching data has been done', () => {
    fetchMock.getOnce('/register', {
      body: {
        data: {
          userName: '8888888888888888',
          token: '1ca9c02f-d6d2-4eb8-92fd-cec12441f091',
        },
      },
      headers: { 'content-type': 'application/json' },
    });

    const expectedActions = [
      { type: actions.LOGIN },
      {
        type: actions.LOGIN_SUCCESS,
        body: {
          data: {
            userName: '8888888888888888',
            token: '1ca9c02f-d6d2-4eb8-92fd-cec12441f091',
          },
        },
      },
    ];

    const store = mockStore({ data: { id: null, token: null, userName: null } });

    return store.dispatch(actions.login({ id: '8888888888888888' })).then(response => {
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

This is the first time testing async actions so I'm not sure what's going wrong.

Aucun commentaire:

Enregistrer un commentaire