使用Jest + Enzyme API模拟调用进行测试无法运行

Question

I have a problem that I can't understand and I was hoping that someone could help me with.

This is my test: state.messages is an empty array and api.botReply is called 0 times when it is in the function to be ran.

state.typing is set to true so I know I run the function.

test('test to resolve data from botReply', done => {
    const wrapper = shallow(<Bot />);

    api.botReply = jest.fn(() =>
        Promise.resolve(wrapper.setState({ typing: false }))
    );

    wrapper.instance().sendReply();

    setImmediate(() => {
        wrapper.update();
        console.log(wrapper.state('typing'));
        console.log(wrapper.state('messages'));
        expect(api.botReply).toHaveBeenCalledTimes(1);
        done();
    });
});

And this is the function that is run:

 sendReply = () => {
    this.setState({ typing: true });
    api.botReply()
      .then(reply => {
        this.setState({ messages: [...this.state.messages, reply], typing: false });
      })
  };

Answer 1

Discarding promise chains and using random delays can lead to race conditions like this one.

Since a promise is provided in tests, it should be chained to maintain correct control flow. It's not a good practice to assign Jest spies as methods because they won't be cleaned up afterwards. A promise is supposed to resolve with reply , not set state.

It should be something like:

test('test to resolve data from botReply', async () => {
    const wrapper = shallow(<Bot />);
    const promise = Promise.resolve('reply')'

    jest.spyOn(api, 'botReply').mockImplementation(() => promise);

    wrapper.instance().sendReply();
    expect(wrapper.state('typing')).toBe(true);
    await promise;
    expect(api.botReply).toHaveBeenCalledTimes(1);
    expect(wrapper.state('typing')).toBe(false);
});