Question

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

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

你很近。

sroll排队执行回调。当当前的同步代码完成并且事件循环获取下一个排队的内容时，将执行回调。

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

给事件循环一个循环的机会，这样回调就有机会执行，这应该可以解决问题。可以通过使测试函数异步并等待已解决的Promise（要暂停测试并执行所有排队的回调）来实现：

create()

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

1 个答案: