TestUtils.Simulate.change不更新輸入值

Question

我製作了一個非常簡單的組件來測試TestUtils.Simulate reactJS方法。但我不知道爲什麼這個方法不會更新我的組件的值。我想我錯誤地寫了我的代碼。

這是我的小部件：

'use strict'; 

var React = require('react'); 

var MyComponent = React.createClass({ 


    getInitialState: function() { 
     return {value: 'a'}; 
    }, 
    handleChange: function (event) { 
     this.setState({value: event.target.value}); 
    }, 
    render: function() { 
     return (
      <div> 
       <input 
        ref="inp" 
        type="text" 
        value={this.state.value} 
        onChange={this.handleChange} 
       /> 
      </div> 
     ); 
    } 
}); 

module.exports = MyComponent; 

這是測試頁面：

jest.disableAutomock(); 
jest.unmock('../resources/assets/js/testcomponents/testvalue'); 


var React = require('react'), 
    MyComponent = require('../resources/assets/js/testcomponents/testvalue.js'), 
    TestUtils = require('react-addons-test-utils'), 
    ReactDOM = require('react-dom'); 



describe('MyComponent', function() { 

    var AppElement = TestUtils.renderIntoDocument(<MyComponent/>); 
    var DomElement = ReactDOM.findDOMNode(AppElement); 

    var input = DomElement.getElementsByTagName('input')[0]; 



    console.log('INPUT 1 as string: ' + input.outerHTML); 

    it('type', function() { 
     console.log('type=' + input.getAttribute('type')); 
     expect(input.getAttribute('type')).toEqual('text'); 
    }); 

    it('value', function() { 
     console.log('value=' + input.getAttribute('value')); 
     expect(input.getAttribute('value')).toEqual('a'); 
    }); 

    it('change', function(){ 


     TestUtils.Simulate.change(input, {target: {value: 'giraffe'}}); 
     expect(input.getAttribute('value')).toEqual('giraffe'); 
    }); 
}); 

線TestUtils.Simulate.change（輸入，{目標：{值： '長頸鹿' }}）;沒有做任何事情，

Answer 1

我認爲主要的問題是，你比較反對

input.getAttribute('value') 

其中只包含原始值。你必須檢查更新後的值，如：

expect(input.value).toEqual('giraffe'); 

我成立了一個工作茉莉測試上的jsfiddle Click