Question

我正在尝试测试以下onChange事件-测试通过了，但根据玩笑-覆盖率未正确调用

使用JEST-ENZYME REACT JS

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

以下是组件：前两个onChange事件正在传递：

this

}

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

工作

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

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

onChange事件没有被调用

0 个答案: