ReactJS Simulate change value / unit testing - unit-testing

Question

i try to simulate a test of a value change on my InputText component. I really don't know how to make that. I just know I must use the ref and the onChange method. But when I put a ref on my test I got an error like "you might be adding a ref to a component that was not created inside a component's render method".
Edit = I give a ref in the render of my InputText component
This is the render of my InputText component
render: function () {
console.log('passerender');
var attrs = this.generateAttributes();
var type = this.props.area ? "textarea" : "text";
return (
<Input
className={this.props.menuClassName}
type={type}
{...attrs}
{...this.props.evts}
className={this.props.menuClassName}
onChange = {this.handleChange}
onBlur = {this.handleBlur}
value={this.state.value}
ref = "InputField"
hasFeedback
/>
);
}
});
This is my test page of my InputText component:
var React = require('react'),
InputText = require('../resources/assets/js/testcomponents/InputText.js').InputTextEditable,
TestUtils = require('react-addons-test-utils'),
ReactDOM = require('react-dom');
describe('InputText', function () {
var InputElement = TestUtils.renderIntoDocument(
<InputText
area={false}
//evts={{onChange: handleChange}}
attributes={{
label:'Test Input Isole',
name:'InputTextArea',
value: '',
wrapperClassName: 'col-md-4',
labelClassName: 'col-md-2',
groupClassName: 'row'
}}
//ref="InputField"
editable={true}/>);
var DomElement = ReactDOM.findDOMNode(InputElement);
var inputV = ReactDOM.findDOMNode(InputElement.refs.InputField);
var input = DomElement.getElementsByTagName('input')[0];
var inputspan = DomElement.getElementsByTagName('span')[1];
it('updates input value on key press', function () {
inputV.value = 'test';
expect(input.getAttribute('value')).toEqual('');
TestUtils.Simulate.change(inputV);
TestUtils.Simulate.keyDown(inputV, {key: "Entrer", keyCode: 13, which: 13});
expect(input.getAttribute('value')).toEqual('test');
});

Answer 1

You can use findRenderedComponentWithType or findRenderedDOMComponentWithTag
You don't need to call findDOMNode explicitly, because TestUtils has done this for you.
var InputElement = TestUtils.renderIntoDocument(
<InputText {...yourProps}/>
);
// Assuming there is only one <input /> DOM element in your Input
var input = TestUtils.findRenderedComponentWithType(InputElement, Input)
// or you can just find <input /> directly
var input = TestUtils.findRenderedDOMComponentWithTag(InputElement, 'input');
TestUtils.Simulate.change(input);
TestUtils.Simulate.keyDown(input, {key: "Entrer", keyCode: 13, which: 13});

Answer 2

Ok I find the problem of the syntax error. It was on my html5validator on my input mixin. I put a try/catch to solve this :
var html5Validity = true;
if (DOM !== undefined) {
try {
html5Validity = $(DOM).find(':invalid').length == 0;
console.log('passe');
} catch (e) {
console.log('html5Validity = [catch]');
html5Validity = true;
}
}
attrs = _.extend({'data-valid': validation.isValid && html5Validity}, attrs);
Now it's OK ! Thank you ! :)