Как издеваться над создателем асинхронных действий в редуксе с шуткой - PullRequest
Новая
       15

Как издеваться над создателем асинхронных действий в редуксе с шуткой

0 голосов
/ 23 апреля 2019

Я пытаюсь написать модульный тест для создателя асинхронного действия с использованием Jest.

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. Однако я думаю, что эту библиотеку называют настоящим Api. Я пытался издеваться над api axios, используя jest 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',
            }),
      );
    });
  }

__ тесты / 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]

Как я могу издеваться над создателем асинхронных действий только шуткой?

Ответы [ 2 ]

0 голосов
/ 23 апреля 2019

Похоже, вам нужно обновить макет, чтобы разрешить объект, подобный этому: 

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

... тогда вы действительно проверяете, что actions.signInUser возвращает функцию который может быть вызван с помощью user ...

..., который затем возвращает другую функцию , которая может быть вызвана с помощью dispatch, которая отправляет соответствующие действия: 

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

describe('Async action creators', () => {
  it('Should create SIGN_IN_USER_SUCCEEDED when signIn user has been done', async () => {
    const user = {
      login: 'user 1',
      password: 'password'
    };
    const dispatch = jest.fn();
    await actions.signInUser(user)(dispatch);  // <= call the function on a user, then call the resulting function on a dispatch
    expect(dispatch).toHaveBeenCalledTimes(2);  // Success!
    expect(dispatch).toHaveBeenNthCalledWith(1, { type: START_SIGNIN_REQUEST });  // Success!
    expect(dispatch).toHaveBeenNthCalledWith(2, { type: SIGNIN_USER_SUCCEEDED, user: 'the username' });  // Success!
  })
});
0 голосов
/ 23 апреля 2019

РЕДАКТИРОВАТЬ: я должен отредактировать свой ответ, так как первый указал неверное направление.

Итак, из моего понимания, вы хотите высмеять значение 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'
    });
  }
...