如何测试 Redux 动作创建者

Question

我有一个动作创建者，我应该如何用 jest 测试它？ 问题是，我什至无法进入 Api 函数，这就是为什么我无法获得 LOGIN_SUCCESS， 当我检查 store.getState() 它只给我 LOGIN_REQUEST 和 LOGIN_FAILURE

const authUser = (login, password) => async (dispatch) => {
  dispatch({
    type: actionTypes.LOGIN_REQUEST,
  });

  try {
    return await Api('login', 'post', { login, password })
      .then((response) => {
        const { data } = response;
        if (data.error) {
          throw data;
        }
        const { value } = response.data;
        let encoded = [];
        encoded = JSON.parse(Base64.decode(value));
        dispatch({
          type: actionTypes.LOGIN_SUCCESS,
          payload: {
            encoded,
          },
        });
        return encoded;
      })
      .catch((error) => {
        throw error;
      });
  } catch (error) {
    dispatch({
      type: actionTypes.LOGOUT_FAILURE,
      payload: {
        error,
      },
    });
  }
};

api.js

axios.defaults.withCredentials = true;
const Api = (path, method, data) => {
  return axios({
    method,
    url: `${process.env.REACT_APP_URL}${path}`,
    headers: {
      Authorization: `Basic ${process.env.REACT_APP_SECRET_TOKEN}`,
      'Content-Type': 'application/json;charset=utf-8',
    },
    data,
  });
};

Answer 1

您拥有的是不是action creator。它与副作用（即 api 调用）混合在一起。请考虑将其拆分为更小的部分，以便更简单、更简短地进行测试。

回过头来，动作创建者只是生成动作的函数。

像这样：

const loginRequest = () => {
  type: "LOGIN_REQUEST",
  payload: {}
};

const loginSuccess = (encoded) => {
  type: "LOGIN_SUCCESS",
  payload: {
    encoded
  }
};

那么测试就很简单了：

import { loginRequest, loginSuccess } from "./actions";

it('creates a LOGIN_REQUEST action', () => {
  const expectedAction = {
    type: 'LOGIN_REQUEST',
  }

  expect(loginRequest()).toEqual(expectedAction);
});

it('creates a LOGIN_SUCCESS action', () => {
  const encoded = 'xxxx';
  const expectedAction = {
    type: 'LOGIN_SUCCESS',
    payload: {
      encoded
    }
  }

  expect(loginSuccess(encoded)).toEqual(expectedAction)
});

测试动作创建者的目标是确保生成的动作正确/符合预期。可以通过模拟或通过 Redux saga 生成器来测试 API 调用。