Reactjs 如何测试异步react redux调用

我正在尝试测试登录用户操作，但我总是为我的

store.getActions（）

获取空数组。如何测试登录用户功能，以获取操作类型

SET\u user

，如果成功，则获取操作类型；如果失败，则获取操作类型

SET\u user

。这是我的身份验证操作代码

export const loginUser = (user) => dispatch => {
axios
    .post('http://localhost:5000/users/login', user)
    .then(res => {

        dispatch({
            type: 'SET_USER',
            payload: res.data
        })
    })
    .catch(err => 
        dispatch({
            type: 'ERROR',
            payload: err.response
          })
    );
};

下面是验证操作测试

import { loginUser } from '../../actions/authActions';

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

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

describe('Auth actions', () => {
    const user = {
        email: 'user@test.com',
        password: '123456',
    }

    let store;
    beforeEach(() => {
      store = mockStore();
    });

    it('should login user', () => {
        store.dispatch(loginUser())
       console.log(store.getActions())
    });
});

---

看起来需要首先传递dispatch来创建一个函数，该函数接受用户并使用dispatch进行响应：

// ---- authActions.js ----
import axios from 'axios';

export const loginUser = dispatch => user => {
  axios
      .post('http://localhost:5000/users/login', user)
      .then(res => {

          dispatch({
              type: 'SET_USER',
              payload: res.data
          })
      })
      .catch(err => 
          dispatch({
              type: 'ERROR',
              payload: err.response
            })
      );
  };

要测试它，您需要模拟axios.post（），并创建一个模拟，作为

调度传递。您需要使测试函数
异步
，并暂停它们以执行回调。总的来说，测试如下所示：

// ---- authActions.test.js ----
import axios from 'axios';
import { loginUser } from '../../actions/authActions';

describe('Auth actions', () => {

  const user = {
    email: 'user@test.com',
    password: '123456',
  }

  let postMock;
  let dispatchMock;

  beforeEach(() => {
    postMock = jest.spyOn(axios, 'post');
    postMock.mockImplementation((url, u) => {
      if (u === user) {
        return Promise.resolve({ data: 'mocked response' });
      }
      else {
        return Promise.reject({ response: 'login failed' });
      }
    });
    dispatchMock = jest.fn();
  });

  afterEach(() => {
    postMock.mockRestore();
  });

  it('should login user', async () => {
    loginUser(dispatchMock)(user);
    // Pause the synchronous test here to let the event loop cycle
    await Promise.resolve();

    expect(dispatchMock).toHaveBeenCalledTimes(1);
    expect(dispatchMock).toHaveBeenCalledWith({
      type: 'SET_USER',
      payload: 'mocked response'
    });
  });

  it('should return error', async () => {
    loginUser(dispatchMock)({ email: 'something', password: 'invalid' });
    // Allow two event loop cycles for the catch to execute
    await Promise.resolve().then();

    expect(dispatchMock).toHaveBeenCalledTimes(1);
    expect(dispatchMock).toHaveBeenCalledWith({
      type: 'ERROR',
      payload: 'login failed'
    });
  });
});

谢谢，但我总是得到错误操作类型，有效负载为undefined。@Dalies我刚刚意识到您可能应该首先传递
dispatch
，所以我用建议的代码更改和一个函数更新了我的答案test@Dalies友好提示，如果答案提供了您需要的信息，请向上投票并标记为已接受。如果您还有任何问题，请告诉我们