Question

我正在尝试通过以下测试用例：

it('text should be set to bold when checkbox is checked', () => {
const wrapper = mount(<FontChooser min='2' size='6' max='10' bold='false' 
text='hello' />);
wrapper.find("#boldCheckbox").simulate('change');
expect(wrapper.find('#textSpan').prop('style').fontWeight).to.equal('bold');
});

使用以下反应组件：

class FontChooser extends React.Component {

   constructor(props) {
   super(props);

   if(this.props.bold=='true'){
      this.state={weight:'bold',checked:true,hidden:true};
   }else {
      this.state={weight:'normal',checked:false,hidden:true};
   }
}

   handleTextClick(){
    this.setState({hidden:!this.state.hidden});

    if(this.props.bold=='true')
        document.getElementById("boldCheckbox").checked = true;
   }

   handleCheckBoxChange(e){
    var checked = e.target.checked;
    this.setState({checked : checked ? true : false ,weight: checked ? 'bold' : 'normal'});
   }

   render() {
     var myWeight=this.state.weight;
     var checked = this.state.checked;

     return(
       <div>
       <input type="checkbox" id="boldCheckbox"
       onChange={this.handleCheckBoxChange.bind(this)} hidden={this.state.hidden} checked={checked} />
       <button id="decreaseButton" hidden={this.state.hidden} >-</button>
       <span id="fontSizeSpan" hidden={this.state.hidden}>{this.props.size}</span>
       <button id="increaseButton" hidden={this.state.hidden}>+</button>
       <span id="textSpan" onClick={this.handleTextClick.bind(this)}
       style={{fontWeight:myWeight}}>{this.props.text} </span>
       </div>
   );
}
}

现在这里是非常奇怪的部分：如果我添加

this.setState({bold: !this.state.bold});

到handelCheckBoxChange（）函数的末尾并使用：

var myWeight = (this.state.bold) ? 'bold' : 'normal';
var checked  = (this.state.bold) ? true : false;

测试通过的render（）函数中的

。使用

var myWeight=this.state.weight;
var checked = this.state.checked;

console.log（）显示正确的值，但测试失败。到底是怎么回事？

Answer 1

单击组件时，会调用this.setState({hidden:!this.state.hidden})，但稍后会重新呈现组件。重新渲染将在React更新循环结束时附加，也就是在document.getElementById("boldCheckbox").checked = true;被调用之后。

请参阅React setState() documentation：

setState（）并不总是立即更新组件。它可以批量推迟更新或推迟更新。

因此document.getElementById("boldCheckbox").checked = true;会影响之前的渲染。不应该是下一个应有的。

解决这个问题的唯一方法就是不要在点击时调用this.setState()，或者在尝试时调用具有React状态的经理bold值。

为什么反应组件失败的测试用例？

1 个答案: