Sprawdź, czy funkcja jest nazywana reagowaniem i enzymem

Question

Próbuję przetestować jedną z metod w moim komponencie reagowania. Jest on nazywany po kliknięciu przycisku więc mam symulacji w miejscu enzymu

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

Moja metoda elementem jest tutaj:

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

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

_handleCloneClick jest wywoływana, gdy użytkownik kliknie w przycisk ów w symulacji, w jaki sposób mogę przejść do testowania, który został nazwany pomyślnie?

Answer 1

Istnieją dwie opcje, albo należy szpiegować _handleCloneClick prototypu komponentu, zanim renderowania komponentu:

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>); 
    } 
} 

aw testu:

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 
}); 

Albo można spróbować ustaw szpiega po wyrenderowaniu komponentu i później wywołaj: :

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 
});