Question

我正在尝试使用Enzyme + Sinon间谍测试React组件。我的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);

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

1 个答案: