单元测试反应与玩笑改变成分，酶

Question

我有以下简称反应成分

render() { 
     return (
      <div className={styles.srchBoxContaner}> 
       <input 
        className={styles.incSrchTextBox} 
        type="text" name="search" placeholder="Search.." 
        onChange={this.onChange} 
       /> 
      </div> 
     ); 
    } 

现在我想单元测试这一点，特别是我想模拟输入并确认的onChange被称为

我该如何使用Enzyme和Jest来做到这一点。到目前为止，这是我已经拿出

it('calls \'onPerformIncrementalSearch\' when the user types in something',() => { 
    const incrementalSearchWrapper = mount(<IncrementalSearch />); 

    const onChangeSpy = sinon.spy(IncrementalSearch.prototype, 'onChange'); 

    //find the input element 
    const searchInput = incrementalSearchWrapper.find('#search'); 
    searchInput.simulate('change', { target: { value: 'new search value' } }); 
    expect(IncrementalSearch.prototype.onChange.called).toEqual(true); 
    onChangeSpy.restore(); 
}); 

但是，这似乎并不奏效。

Answer 1

为防万一有人遇到这个问题，修正是在调用mount之前移动间谍。所以工作代码是

const onChangeSpy = sinon.spy(IncrementalSearch.prototype, 'onChange'); 
    const incrementalSearchWrapper = mount(<IncrementalSearch />); 

    //find the input element 
    const searchInput = incrementalSearchWrapper.find('#searchInput'); 
    searchInput.node.value = 'David'; 
    searchInput.simulate('change', searchInput); 
    expect(onChangeSpy.called).toEqual(true); 
    onChangeSpy.restore();