Тест, если функция называется реакцией и ферментом

Question

Я пытаюсь проверить один из методов в моем компоненте реакции. Она вызывается после нажатия кнопки, так что я имею моделирование в месте с ферментом

it('clone should call handleCloneClick when clicked',() => { 
     const cloneButton = wrapper.find('#clone-btn'); 
     cloneButton.simulate('click'); 
}); 

Мой компонент метод здесь:

_handleCloneClick(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    this.props.handleClone(this.props.user.id); 
} 

_handleCloneClick вызывается, когда пользователь нажимает на кнопку Thats в симуляции, как я могу проверить, что его вызвали успешно?

Answer 1

Есть два варианта, либо вы должны следить за _handleCloneClick прототипа компонента, прежде чем вынести компонент:

export default class cloneButton extends Component { 
    constructor(...args) { 
    super(...args); 
    this. _handleCloneClick = this. _handleCloneClick.bind(this); 
    } 

    _handleCloneClick() { 
    event.preventDefault(); 
    event.stopPropagation(); 

    this.props.handleClone(this.props.user.id); 
    } 

    render() { 
    return (<button onClick={this. _handleCloneClick}>Clone</button>); 
    } 
} 

И в тесте:

it('clone should call handleCloneClick when clicked',() => { 
    sinon.spy(cloneButton.prototype, '_handleCloneClick'); 
    const wrapper = mount(<cloneButton/>); 
    wrapper.find('#clone-btn').simulate('click'); 
    expect(spy).toHaveBeenCalled() //adept assertion to the tool you use 
}); 

Или, вы можете попробовать установить шпиона после визуализации компонента и затем вызвать wrapper.update():

it('clone should call handleCloneClick when clicked',() => {  
    const wrapper = mount(<cloneButton/>); 
    sinon.spy(wrapper.instance(), "_handleCloneClick"); 
    wrapper.update(); 
    wrapper.find('#clone-btn').simulate('click'); 
    expect(spy).toHaveBeenCalled() //adept assertion to the tool you use 
});