Синтаксис инициализаторов свойств Sinon Spy + ReactJs

Question

Я пытаюсь протестировать компоненты React с помощью Enzyme + Sinon spies.Мой код реакции использует синтаксис инициализатора свойства в экземпляре моего компонента:

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.calledOnce возвращает false, как и spy.called :

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 предпочтительнее по нескольким причинам, включая тестируемость , их можно шпионить или высмеивать до создания экземпляра класса. Это важно для методов, вызываемых в конструкторе или начальных хуках жизненного цикла.

handleMouseOver - явно обработчик событий, который запускается после создания экземпляра компонента, поэтому его можно отслеживать, пока экземпляр компонента доступен через Enzyme. Компонент должен быть повторно обработан после настройки шпиона, чтобы <button> получил новый обработчик событий. Есть ошибка с ферментом 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);