测试调用异步函数的组件

Question

我有一个react 组件，它调用作为prop 传入的async 函数，然后调用then 函数中的另一个函数。

我在下面简单化了它作为插图。

例如

const Form = ({ doSomething, closeModal }) => 
<form onSubmit={(e) => {doSomething().then(() => closeModal())
}}>
...
</form>

我正在尝试测试 closeModal 是这样调用的：

it('should doSomething then call closeModal', () => {

  const doSomethingStub = sinon.stub().resolves()
  const closeModalStub = sinon.stub()

  const props = {
    doSomething: doSomethingStub,
    closeModal: closeModalStub
  }

  const wrapper = shallow(<Form {...props}/>)

  wrapper.find(`form`).simulate(`submit`)

  expect(doSomethingStub.called).toEqual(true)
  expect(closeModalStub.called).toEqual(true)

})

在我的示例中，只有第一个期望是正确的。我对 sinon.stub 设置做错了吗？或者我期待什么？感觉像是小事，但我无法确定

Answer 1

你说得对，只是需要稍作改动：

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

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

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

it('should doSomething then call closeModal', async () => {

  const doSomethingStub = sinon.stub().resolves()
  const closeModalStub = sinon.stub()

  const props = {
    doSomething: doSomethingStub,
    closeModal: closeModalStub
  }

  const wrapper = shallow(<Form {...props}/>)

  wrapper.find(`form`).simulate(`submit`);

  // Pause the synchronous test here and let any queued callbacks execute
  await Promise.resolve();

  expect(doSomethingStub.called).toEqual(true)
  expect(closeModalStub.called).toEqual(true)

});