如何使用jest在redux中模拟异步动作创建者

Question

I'm trying to write a unit test for a redux async action creator using 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;
};

In the Writing tests of redux's official documentation, they use fetch-mock library. However, I think that this library call the real Api. I tried to mock the axios api using 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
    })
})
});

The test failed and I got:

expect(received).resolves.toEqual()

Matcher error: received value must be a promise

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

How can I mock this async action creator only with jest?

Answer 1

EDIT: I have to edit my answer as the first one pointed to a wrong direction.

So from my understanding you want to mock the Action + Return value. In your case I would just immediately return the result of your mock function. As you're not mocking axios.post you don't need to wrap everything inside a promise and return that. You're not mocking only the HTTP call but the whole action.

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

Answer 2

Looks like you need to update your mock to resolve to an object like this:

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

...then what you are really testing is that actions.signInUser returns a function which can be called with a user ...

...which then returns another function which can be called with a dispatch which dispatches the proper actions:

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