时间戳

首页 > 解决方案 > 如何用玩笑在 redux 中模拟异步动作创建者

javascript - 如何用玩笑在 redux 中模拟异步动作创建者

问题描述

我正在尝试使用 jest 为 redux 异步操作创建者编写单元测试。

asyncActions.js：

const startSignInRequest = () => ({
  type: START_SIGNIN_REQUEST
});

// action creator to dispatch the success of sign In
export const signInSucceded = user => ({
  type: SIGNIN_USER_SUCCEEDED,
  user
});

// action creator to dispatch the failure of the signIn request
export const signInFailed = error => ({
  type: SIGNIN_USER_FAILED,
  error
});

const signInUser = user => dispatch => {
dispatch(startSignInRequest);
  return signInApi(user).then(
    response => {
      const { username, token } = response.data;
      dispatch(signInSucceded(username));
      localStorage.setItem("token", token);
      history.push("/homepage");
    },
    error => {
      let errorMessage = "Internal Server Error";
      if (error.response) {
        errorMessage = error.response.data;
      }
      dispatch(signInFailed(errorMessage));
      dispatch(errorAlert(errorMessage));
    }
  );
};

signInApi.js：

import axios from "axios";
import { url } from "../../env/config";

const signInApi = async user => {
  const fetchedUser = await axios.post(`${url}/signIn`, {
    email: user.email,
    password: user.password
  });
  return fetchedUser;
};

在redux 官方文档的编写测试fetch-mock中，他们使用library. 但是，我认为这个库调用了真正的 Api。我尝试使用jest mocks.

/__mocks/signInApi.js：

const users = [
{
    login: 'user 1',
    password: 'password'
}
];

  export default function signInApi(user) {
    return new Promise((resolve, reject) => {
      const userFound = users.find(u => u.login === user.login);
      process.nextTick(() =>
        userFound
          ? resolve(userFound)
          // eslint-disable-next-line prefer-promise-reject-errors
          : reject({
              error: 'Invalid user credentials',
            }),
      );
    });
  }

__tests/asyncActions.js：

jest.mock('../axiosApis/signInApi');
import * as actions from '../actions/asyncActions';

describe('Async action creators', async () => {
it('Should create SIGN_IN_USER_SUCCEEDED when signIn user has been done', () => {
    const user = {
                    login: 'user 1',
                    password: 'password'
                }
    await expect(actions.signInUser(user)).resolves.toEqual({
        user
    })
})
});

测试失败，我得到：

expect(received).resolves.toEqual()

Matcher error: received value must be a promise

Received has type:  function
Received has value: [Function anonymous]

我怎样才能只用玩笑来模拟这个异步动作创建者？

标签： javascriptreactjsunit-testingreduxjestjs

解决方案

编辑：我必须编辑我的答案，因为第一个指向错误的方向。

因此，据我了解，您想模拟 Action + Return 值。在你的情况下，我会立即返回你的模拟函数的结果。由于您不是在嘲笑，因此axios.post您不需要将所有内容都包装在一个承诺中并返回它。您不仅在模拟 HTTP 调用，还模拟了整个操作。

const users = [
{
    login: 'user 1',
    password: 'password'
}
];

  export default function signInApi(user) {
    const userFound = users.find(u => u.login === user.login);
    return (userFound ? userFound : {
      error: 'Invalid user'
    });
  }

推荐阅读