Javascript promises In React-Enzyme test not returning mocked value

Question

I am trying to test a React Component which includes a call to an api library and therefore returns a promise.

The api library looks like this: (utils/api.js)

import axios from "axios";
import Q from "q";

export default {
    createTrip(trip) {
        return Q.when(axios.post("/trips/", trip));
    }
}

I have mocked it as follows: (utils/__mocks__/api.js)

export default {
    createTrip(trip) {
        return new Promise((resolve, reject) => {
            let response = {status: 201, data: trip};
            resolve(response)
        })
    }
}

The function I am testing is:

create() {
    api.createTrip(this.state.trip).then(response => {
        if (response.status === 201) {
            this.setState({trip: {}, errors: []});
            this.props.onTripCreate(response.data);
        } else if (response.status === 400) {
            this.setState({errors: response.data})
        }
    });
}

The test is:

jest.mock('utils/api.js');
test('succesful trip create calls onTripCreate prop', () => {
    const trip = {'name': faker.random.word()};

    const spy = jest.fn();
    const container = shallow(<TripCreateContainer onTripCreate={spy}/>);

    container.setState({'trip': trip});
    container.instance().create();

    expect(spy).toHaveBeenCalledWith(trip);
    expect(container.state('trip')).toEqual({});
    expect(container.state('errors')).toEqual([]);
});

I believe this should work, yet the result of the test is:

succesful trip create calls onTripCreate prop

expect(jest.fn()).toHaveBeenCalledWith(expected)

Expected mock function to have been called with:
  [{"name": "copy"}]
But it was not called.

  at Object.test (src/Trips/__tests__/Containers/TripCreateContainer.jsx:74:21)
      at new Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>

I'm not sure how to fix this test, and would be grateful if anyone could help?

Answer 1

You are close.

then queues a callback for execution. Callbacks execute when the current synchronous code completes and the event loop grabs whatever is queued next.

The test is running to completion and failing before the callback queued by then from within create() has a chance to run.

Give the event loop a chance to cycle so the callback has a chance to execute and that should resolve the issue. That can be done by making your test function asynchronous and awaiting on a resolved promise where you want to pause the test and let any queued callbacks execute:

jest.mock('utils/api.js');
test('succesful trip create calls onTripCreate prop', async () => {
    const trip = {'name': faker.random.word()};

    const spy = jest.fn();
    const container = shallow(<TripCreateContainer onTripCreate={spy}/>);

    container.setState({'trip': trip});
    container.instance().create();

    // Pause the synchronous test here and let any queued callbacks execute
    await Promise.resolve();

    expect(spy).toHaveBeenCalledWith(trip);
    expect(container.state('trip')).toEqual({});
    expect(container.state('errors')).toEqual([]);
});