reactjs - onChange 事件没有被调用

Question

我正在尝试测试以下 onChange 事件-测试通过，但根据 jest--coverage 未正确调用

使用 JEST - 酶反应 JS

总共有 4 个 onChange 事件，我能够测试前 2 个。

这是组件：前 2 个 onChange 事件正在传递：

renderBottomPanel = (type) => {
if(type !== 'none'){
  return(
    <div className="bottom-panel">
      <SplitPane split="vertical" minSize={50} maxSize={50} defaultSize={50}>
          <div>
            <a onClick={this.saveChartTemplateToView}>
              <FontAwesome title="Save Chart Template" name='savetemplate' className={'fa-floppy-o no-border fa-floppy-o-override-color'}/>
            </a>
            <a onClick={this.prettyChartTemplate}>
              <FontAwesome title="Format JSON" name='formathtml' className={'fa-list-ul no-border'}/>
            </a>
          </div>
          <SplitPane split="vertical" minSize={300} defaultSize={window.screen.availWidth/2 - 75}>
            <div className="liquid-content-panel">
              <textarea id='chartcontent' name='chartcontent' className='liquid-content-input' type='text' onChange={e => this.setState({viewChartScript:e.target.value})} value={this.state.viewChartScript}/>
            </div>
            <div className="shaped-JSON-panel">
              <textarea id = 'shapedJSON' name='shapedJSON' className='shaped-JSON-input' type='text' onChange={e => this.setState({chartPrototype:e.target.value})} value={JSON.stringify(this.state.chartPrototype, null, 2)} disabled={true}/>
            </div>
          </SplitPane>
      </SplitPane>
    </div>
  )
}
else{
  return(
    <div className="bottom-panel">
      <SplitPane split="vertical" minSize={50} maxSize={50} defaultSize={50}>
          <div>
            <a onClick={this.saveTemplateToView}>
              <FontAwesome title="Save Template" name='savetemplate' className={'fa-floppy-o no-border fa-floppy-o-override-color'}/>
            </a>
            <a onClick={this.prettyTemplate}>
              <FontAwesome title="Format HTML" name='formathtml' className={'fa-list-ul no-border'}/>
            </a>
          </div>
          <SplitPane split="vertical" minSize={300} defaultSize={window.screen.availWidth/2 - 75}>
            <div className="liquid-content-panel">
              <textarea id='liquidcontent' name='liquidcontent' className='liquid-content-input' type='text' onChange={e => this.setState({viewScript:e.target.value})} value={this.state.viewScript}/>
            </div>
            <div className="shaped-JSON-panel">
          //    <textarea  name='shapedJSON' className='shaped-JSON-input' type='text' onChange={e => this.setState({cleanJSON:e.target.value})} value={this.state.cleanJSON} disabled={true}/>
            </div>
          </SplitPane>
      </SplitPane>
    </div>
  )
}

}

这就是我的测试。我为前两个编写了设置，它们正在工作。

在职的

    it(" RenderBottomPanel method : should test onChange event on chart content :", () => {
baseProps.onChange.mockClear();
wrapper.setState({
    viewChartScript:'test-id'
    });
wrapper.update()
wrapper.find('#chartcontent').simulate('change',{target: {value: 'testing'}} )
expect(wrapper.state().viewChartScript).toEqual('testing');
});

失败

it(" RenderBottomPanel method : should test onChange event on liquidcontent :", () => {
  baseProps.onChange.mockClear();
  wrapper.setState({
    viewScript:'test-id'
    });

 wrapper.update()

wrapper.find('#liquidcontent').simulate('change',{target: {value: 'testing'}} )
expect(wrapper.state().viewScript).toEqual('testing');
});

谢谢：目标是通过此测试并正确模拟更改

标签： reactjsunit-testingonchange