React Redux 异步动作测试

Question

你好，我每次测试 React redux 异步操作时都会遇到一些问题运行我收到的测试是这个数组 [{"type": "LOGIN"}] 而不是这个：

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

这是我的代码片段：

动作代码：

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

来自 action.test 文件的代码：

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

这是第一次测试异步操作，所以我不确定出了什么问题。

Answer 1

您需要return API 承诺，因为您正在解决测试用例中的承诺

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

你的动作必须像

export function login(fields) {
  return dispatch => {              // async is not needed here since no await is used
    dispatch({ type: LOGIN });
    return api                      // return here
      .register(fields.vin)
      .then(response => {
        const data = Object.assign(response.data, fields);
        return dispatch(loginSuccess(data));
      })
      .catch(error => dispatch(loginError(error)));
  };
}

React Redux 异步动作测试

React Redux async action tests

testing

action

asynchronous

reactjs

redux