javascript - 使用 Jest+Enzyme API 模拟调用进行测试未运行

Question

我有一个我无法理解的问题，我希望有人能帮助我。

这是我的测试:state.messages 是一个空数组，并且 api.botReply 在要运行的函数中被调用 0 次。

state.typing 设置为 true，所以我知道我运行了该函数。

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

这是运行的函数:

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

Answer 1

丢弃 promise 链并使用随机延迟可能会导致像这样的竞争条件。

由于测试中提供了 promise ，因此应该将其链接起来以维护正确的控制流。将 Jest spy 指定为方法并不是一个好的做法，因为它们之后不会被清理。 promise 应该通过回复来解决，而不是设置状态。

应该是这样的:

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