如何檢查React酶中模擬變化事件後的更新值？

Question

我試圖在模擬更改事件後檢查輸入字段的更新值。

const wrapper = mount(<input type="number" value="hello" onChange="onChangeFunc"/>); 
wrapper.simulate('change', {target: {value: "2"}}); 
expect(wrapper.props().value).to.equal('3'); 

任何想法，爲什麼這不工作？我在想setState是異步的，它可能發生在測試返回之後。

Answer 1

首先你輸入type =「number」，你輸入文字，其次你不處理onChange事件，這是你的輸入值應該更新的地方。看看下面的代碼

import React, { Component } from 'react'; 

class Test extends Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     value: '' 
    }; 
    } 

    handleInputChange(e) { 
    this.setState({value: e.target.value}); 
    } 

    render() { 
    return (
     <input type="text" value={this.state.value} onChange={this.handleInputChange.bind(this)} /> 
    ); 
    } 
} 

export default Test; 

，然後在測試做這樣的

describe("Test",() => { 

    const wrapper = mount(
     <Test /> 
    ); 

    it("should enter valid value",() => { 
     wrapper.find('input').simulate('change', {target: {value: "hello!"}}); 
     expect(wrapper.find('input').props().value).to.equal('hello!'); 
     console.log(wrapper.find('input').props().value); 
    }); 


    });