Redux 使用Axios的Jest进行异步操作创建者测试

Redux 使用Axios的Jest进行异步操作创建者测试,redux,jestjs,Redux,Jestjs,我试图用JEST测试身份验证异步操作创建者,但有一些错误响应“error:networkerror”。我试图更改服务器url,但它不起作用。当用户登录时,此应用程序使用jwt进行身份验证。服务器将使用jwt响应客户端。 这是我的动作创建者和测试代码 //TEST import thunk from 'redux-thunk'; import fetchMock from 'fetch-mock'; import configureMockStore from 'redux-mock-store

我试图用JEST测试身份验证异步操作创建者,但有一些错误响应“error:networkerror”。我试图更改服务器url,但它不起作用。当用户登录时,此应用程序使用jwt进行身份验证。服务器将使用jwt响应客户端。 这是我的动作创建者和测试代码

//TEST

import thunk from 'redux-thunk';
import fetchMock from 'fetch-mock';
import configureMockStore from 'redux-mock-store';
// import expect from 'expect';
import { userActions } from '../actions';
import { userConstants } from '../constants';

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

describe('Async action creator test', () => {
  afterEach(() => {
    fetchMock.reset();
    fetchMock.restore();
  });

  it('creates LOGIN_SUCCESS when sign in has been done', () => {
    fetchMock.postOnce('/api/sign-in', { body: {token: 'jwt'},headers:  { 'content-type': 'application/json' } });
    const store = mockStore({ user: [] });

    const expectedActions = [
      { type: userConstants.LOGIN_REQUEST, user: {username: 'testUsername'} },
      { type: userConstants.LOGIN_SUCCESS, token: 'jwt'},
    ];

    return store.dispatch(userActions.login('testUsername', 'testPassword')).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
})


// ACTION CREATOR
import axios from 'axios';
import { userConstants } from '../constants'

const login = (username, password) => {
  return dispatch => {
    dispatch(request({username}));

    return axios.post('http://www.example.com/api/sign-in', {username, password})
      .then(response => {
        console.log(response);
        dispatch(success(response));
      }).catch(error => {
        console.log(error);
        dispatch(failure(error.toString()));
      });
  };

  function request(user) { return { type: userConstants.LOGIN_REQUEST, user } }
  function success(user) { return { type: userConstants.LOGIN_SUCCESS, user } }
  function failure(error) { return { type: userConstants.LOGIN_FAILURE, error } }
};

export const userActions = {
  login,
};

您的测试试图执行实际的XHR调用,这通常不是期望的行为,因为这是关于单元测试的

有不同的可行方法可以跳过和模拟实际的网络请求


因为我知道您希望在测试中包含实际的<>代码> AXIOS调用,您可以考虑用HTTP嘲弄库来嘲弄网络请求,在代码中使用HT/P>P> AXIOS来进行HTTP请求,但是,在测试中使用FETCHMOK用于HTTP请求模拟。因此,要解决此问题,您需要:

  • 将axios替换为代码中的fetch。或:

  • 在测试中用moxios替换fetch mock