reactjs - 如何测试 Redux Action 创建者

Question

我有一个 Action 创建器，我应该如何用 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 调用)。请考虑将其分成更小的部分，以便测试更加简单和简短。

回想起来， Action 创建者只是生成 Action 的函数。

像这样:

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

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