Javascript 承诺在 React-Enzyme 测试中不返回模拟值

Question

我正在尝试测试一个 React 组件，其中包含对 api 库的调用，因此返回了一个承诺。

api 库如下所示：(utils/api.js)

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

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

我已经模拟如下：(utils/__mocks__/api.js)

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

我正在测试的功能是：

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

测试是：

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([]);
});

我相信这应该可行，但测试结果是：

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>

我不确定如何解决此测试，如果有人可以提供帮助，我将不胜感激？

Answer 1

你很接近。

then 将回调排队等待执行。回调在当前同步代码完成并且事件循环抓取接下来排队的任何内容时执行。

在then 从create() 中排队的回调有机会运行之前，测试正在运行完成并失败。

给事件循环一个循环的机会，以便回调有机会执行，这应该可以解决问题。这可以通过使您的测试函数异步并等待您想要暂停测试并让任何排队的回调执行的已解决承诺来完成：

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([]);
});