La méthode personnalisée de test sur le composant React a été appelée, en utilisant Enzyme et Sinon

Question

Je veux vérifier que lorsqu'un bouton est cliqué sur mon composant, il appelle la méthode que j'ai créée pour gérer le clic. Voici mon élément:

import React, { PropTypes, Component } from 'react'; 

class Search extends Component { 

    constructor(){ 
    super(); 
    this.state = { inputValue: '' }; 
    } 

    handleChange = (e) => { 
    this.setState({ inputValue: e.target.value }); 
    } 

    handleSubmit = (e) => { 
    e.preventDefault(); 
    return this.state.inputValue; 
    } 

    getValue =() => { 
    return this.state.inputValue; 
    } 

    render(){ 
    return (
     <form> 
     <label htmlFor="search">Search stuff:</label> 
     <input id="search" type="text" value={this.state.inputValue} onChange={this.handleChange} placeholder="Stuff" /> 
     <button onClick={this.handleSubmit}>Search</button> 
     </form> 
    ); 
    } 
} 

export default Search; 

et voici mon test

import React from 'react'; 
    import { mount, shallow } from 'enzyme'; 
    import Search from './index'; 
    import sinon from 'sinon'; 

    describe('Search button',() => { 

    it('calls handleSubmit',() => { 
     const shallowWrapper = shallow(<Search />); 
     const stub = sinon.stub(shallowWrapper.instance(), 'handleSubmit'); 
     shallowWrapper.find('button').simulate('click', { preventDefault() {}  }); 
     stub.called.should.be.true(); 
    }); 

    }); 

L'appel a appelé la propriété revient faux. J'ai essayé des tas de variations sur la syntaxe et je pense que je manque peut-être quelque chose de fondamental. Toute aide serait grandement appréciée.

Answer 1

Je suis relativement nouveau à Sinon. Je généralement passais spy() s dans des accessoires de composants, et de vérifier ceux (bien que vous pouvez utiliser stub() de la même manière):

let methodSpy = sinon.spy(), 
 
    wrapper = shallow(<MyComponent someMethod={methodSpy} />) 
 

 
wrapper.find('button').simulate('click') 
 

 
methodSpy.called.should.equal(true)

Je souligne cela parce que je pense qu'il est le plus simple manière de tester les composants unitaires (test des méthodes internes can be problematic).

Dans votre exemple, lorsque vous essayez de tester des méthodes internes d'un composant, cela ne fonctionnerait pas. Je suis tombé sur this issue, cependant, ce qui devrait vous aider. Essayez:

it('calls handleSubmit',() => { 
 
    const shallowWrapper = shallow(<Search />) 
 
    let compInstance = shallowWrapper.instance() 
 

 
    let handleSubmitStub = sinon.stub(compInstance, 'handleSubmit'); 
 
    // Force the component and wrapper to update so that the stub is used 
 
    compInstance.forceUpdate() 
 
    shallowWrapper.update() 
 

 
    shallowWrapper.find('button').simulate('click', { preventDefault() {} }); 
 

 
    handleSubmitStub.called.should.be.true(); 
 
});