Вызывается тестовый метод на компоненте React, используя Enzyme и Sinon

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

Я относительно новичок в Синоне. Я, как правило, проходит spy() сек на составные реквизита и проверки тех (хотя вы можете использовать stub() таким же образом):

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