Question

我尝试使用JEST测试身份验证异步操作创建者，但我收到一些错误响应“错误：网络错误”。我尝试更改服务器的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,
};

Answer 1

您的测试正在尝试执行实际的XHR调用，这通常不是所需的行为，因为这与单元测试有关。

有多种可行的方法可以跳过和模拟实际的网络请求。

由于我了解到您想在测试中包括实际的axios调用，因此您可以考虑使用HTTP模拟库（例如nock）来模拟网络请求。

Answer 2

axios用于代码中的HTTP请求，但是，fetch-mock用于测试中的HTTP请求模拟。因此，要解决此问题，您需要：

将axios替换为代码中的fetch。或：
在测试中用moxios替换访存模拟。

通过Axios与Jest进行异步Action Creator测试

2 个答案: