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

Question

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

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

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

Javascript promises In React-Enzyme test not returning mocked value

javascript

reactjs

es6-promise

jestjs

enzyme