Sinon Spy + ReactJs 属性初始化器语法

Question

我正在尝试使用 Enzyme + Sinon 间谍测试 React 组件。我的反应代码在我的组件实例中使用属性初始化器语法：

class FixedButton extends React.Component {

    handleMouseOver = (e) => {
        const { fixedButtonHover = _fixedButtonHover } = this.props;
        const { backgroundColor, color } = fixedButtonHover;
        e.target.style.backgroundColor = backgroundColor;
        e.target.style.color = color;
    }
}

我正试图弄清楚如何监视 handleMouseOver 函数，尽管据我了解，由于上下文绑定到实例而不是原型上的属性，所以我无法监视它。

我知道该函数被调用，并且我知道我可以通过将我的语法修改为标准属性样式来使间谍正常工作。我也知道组件的挂载实例具有方法作为属性。

这是两者不能一起工作的情况之一，还是有我没看到的技巧？

编辑：这是我尝试建议解决方案的方式，但 spy.callOnce 与 spy.call 一样返回 false：

test('FixedButton component methods are called as expected', t => {

    const wrapper = mount(<FixedButton />);
    const instance = wrapper.instance();
    const spy = sinon.spy(instance, 'handleMouseOver');

    const button = wrapper.find('button');
    button.simulate('mouseover');

    t.is(spy.calledOnce, true);
})

Answer 1

带有bind 的原型方法更适合for several reasons including testability，它们可以在类实例化之前被监视或模拟。这对于在构造函数或初始生命周期钩子中调用的方法很重要。

handleMouseOver 显然是在组件实例化后触发的事件处理程序，因此只要组件实例可以通过 Enzyme 访问，它就可以被窥探。设置间谍后需要重新渲染组件，以便<button> 接收新的事件处理程序。有a bug with Enzyme update()，需要解决：

const instance = wrapper.instance();
const spy = sinon.spy(instance, 'handleMouseOver');
instance.forceUpdate(); // necessary for button to receive proper handler

const button = wrapper.find('button');
button.simulate('mouseover');

t.is(spy.calledOnce, true);