EnzymeとSinonを使用してReactコンポーネントのテストカスタムメソッドが呼び出されました

Question

コンポーネントでボタンがクリックされたときに、クリックを処理するために作成したメソッドを呼び出すことを確認します。ここに私のコンポーネントである：

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; 

、ここでは私のテストは

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

    }); 

あるプロパティと呼ばれるコールバック偽きます。私は文法のバリエーションを試してみましたが、おそらく私は何か基本的なものを見逃していると思います。どんな助けでも大歓迎です。

Answer 1

私はシノンにも比較的新しいです。 （あなたが同じようにstub()を使用することができますが）私は一般的にコンポーネント小道具にspy() Sを渡し、そしてそれらをチェックされています：

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

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

 
methodSpy.called.should.equal(true)

私はそれが最も簡単だと思うので、私はこれを指摘しますユニットテストコンポーネント（テスト内部メソッドcan be problematic）に方法。

コンポーネントの内部メソッドをテストしようとしているこの例では、これは機能しません。私はthis issueに出くわしましたが、それはあなたを助けるはずです。試してみてください：

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