Question

今天下午我开玩笑地开始了我的第一个单元测试。我必须做的5首测试是关于测试返回函数的。没有那么困难。

但是我很难理解如何对我的函数登录进行单元测试，这些返回的内容我还不了解。有人看到我在action.test.js中必须输入的内容，告诉我并向我解释吗？

我该如何对登录进行单元测试，什么代表返回登录功能的调度？

**In action.js**

<pre>
import { userConstants } from '../shared/constants';
import { userService } from '../shared/services';
import { history } from '../shared/helpers';

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

function login(username, password) {
  return (dispatch) => {
    dispatch(request({ username }));

    userService.login(username, password).then(
      (user) => {
        dispatch(success(user));
        history.push('/');
      },
      (error) => {
        dispatch(failure(error));
        console.error(error); // eslint-disable-line no-console
      },
    );
  };
}

function logout() {
  userService.logout();
  return { type: userConstants.LOGOUT };
}

function oldLogin() {
  return { type: userConstants.OLD_LOGIN };
}

export const userActions = {
  login,
  logout,
  oldLogin,
};
</pre>

**In service.js**

<pre>
function logout() {
  // remove user from local storage to log user out
  if (localStorage.getItem('user')) {
    localStorage.removeItem('user');
  }
}

function handleResponse(response) {
  return response.text().then((text) => {
    const data = text && JSON.parse(text);

    if (!response.ok) {
      if (response.status === 401) {
        // auto logout if 401 response returned from api
        logout();
        window.location.reload(true);
      }

      const error = (data && data.message) || response.statusText;
      return Promise.reject(error);
    }

    return data;
  });
}


function login(username, password) {
  return fetch(
    'https://mon-api',
    {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username,
        password,
        context: {
          deviceToken: '1cb1b51d19665cb45dc1caf254b02af',
        },
      }),
    },
  )
    .then(handleResponse)
    .then((user) => {
      // login successful if there's a jwt token in the response
      if (user.sessionToken) {
        // store user details and jwt token in local storage to
        // keep user logged in between page refreshes
        localStorage.setItem('user', JSON.stringify(user));
      }

      return user;
    });
}

export const userService = {
  login,
  logout,
};
</pre>

Answer 1

dispatch是一个还原动作。为了能够进行测试，您需要对其进行模拟。有redux-mock-store之类的实用工具可以简化此任务，请参考following article了解更多详细信息。

开玩笑地对功能进行单元测试

1 个答案: