2016-05-17 3 views
0

Я делаю очень простой компонент для тестирования метода TestUtils.Simulate reactJS. Но я не знаю, почему этот метод не обновляет значение моего компонента. Наверное, я написал свой код неправильно.TestUtils.Simulate.change не обновляет значение ввода

Это мой маленький компонент:

'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 (вход, {цель: {значение: 'жираф' }}); не делает что-нибудь

ответ

1

Я думаю, что главная проблема в том, что вы сравниваете против

input.getAttribute('value') 

, который содержит только исходное значение. Вы должны проверить обновленное значение как:

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

Я создал тест рабочего жасмина на jsfiddle Click

+0

Спасибо людей! Ты прав !! Отличная работа :) – kMM

Смежные вопросы