如何在绑定的 React 组件方法上使用 sinon？

Question

我在使用带有绑定方法的 Sinon 时遇到了一些困难 (https://babeljs.io/docs/plugins/transform-class-properties/)。

我应该怎么附上间谍？这是一个要点： https://gist.github.com/stevens32/b5eee5cc1781a687be03bf80ce8425e0

结果：

bound method spying
  √ should be an instance of FormComponent
  should spy on boundChangeInput
    √ should have calledOnce prop on boundChangeInput from spy
    1) should have boundChangeInput.calledOnce true on simulated input change
    √ has the correct value
  should spy on notBoundChangeInput
    √ should have calledOnce prop on notBoundChangeInput from spy
    √ should have notBoundChangeInput.calledOnce true on simulated input change
    √ has the correct value

 6 passing (133ms)
  1 failing

  1) bound method spying should spy on boundChangeInput should have boundChangeInput.calledOnce true on
mulated input change:

  AssertionError: expected false to equal true
  + expected - actual

  -false
  +true

Answer 1

您可能需要先创建组件的实例。试试这个：

describe('should have boundChangeInput.calledOnce true on simulated input change', function() {

  const node = mount(<FormComponent />)
  const component = wrapper.instance()

  let boundChangeSpy = sinon.spy(node, 'boundChangeInput')

  component.forceUpdate()
  wrapper.update()

  wrapper.find('input').at(0).simulate('change',{target:{value:'some value'}})

  expect(node.boundChangeSpy.calledOnce).to.equal(true)
})

来源：Test custom method on React component has been called, using Enzyme and Sinon