Question

我有一个具有以下渲染方法的组件

render() {
    var id=this.props.itemid
    var maxquantity = this.props.maxquantity
    return(

        <tr>
            <td>{this.props.name}</td>
            <td><img width="50px" height="50px" src={this.props.img} /></td>
            <td> {this.props.price}</td>
            <td><input id="quantity" type="number" value={this.state.quant} ref="quantity" onChange = {()=> this.handleQuantityChange(maxquantity,this.props.name)}/></td>
            <td><button type="button" onClick={() => this.addItem(id,this.props.price)}>Add</button></td>
        </tr>
    )
}

onChange输入的数量，调用this.handleQuantityChange()方法，该方法如下所示

handleQuantityChange(maxquantity,name) {

    const newQuantity = parseInt(this.refs.quantity.value)

    if(newQuantity > parseInt(maxquantity)) {
        var message="You cannot buy more than " +maxquantity+" "+name
        this.setState({errorMessage:"You cannot buy more than " +maxquantity+" "+name})
    }

    this.setState({quant:newQuantity})
    this.props.quantityChange(message)
}

将量子状态的值更改为参考值

我写了一个如下所示的测试用例

describe('quantity input', () => {
it('should respond to the change event and change the state of Item component', () => {
    const wrapper = shallow (<Item/>);
    const input = wrapper.find('#quantity')
    console.log(input)
    input.simulate('change', {target: {value:3}});
    expect(wrapper.state('quant')).toEqual(3);
    });     
});

但是它抛出一个错误提示

无法读取未定义的属性“值”

this.refs.quantity.value

我的测试用例应该是什么。请帮助

Answer 1

浅呈现不适用于参考。

如果您使用的是酶，则可以使用mount代替shallow，这应该可以解决您的问题。

欢呼

使用Jest进行测试

1 个答案: