unit testing - The changed value is not reflecting on the input field in ReactJS, TestUtils -

i using reactjs , mocha , trying few unit tests. have 2 mandatory form fields first name , last name. trying test validation if 1 field entered, other field displays missing value validation error.

below code simulates changes value , simulates form submit.

testutils.simulate.change(firstnameelement , {target: {value: 'joe'}}); testutils.simulate.submit(formelement) 

the changed value reflected in event handlers on first name. but, not in test. so, both fields display missing value validation failing test.

what doing wrong here?

below code:

//nameform.jsx 'use strict';  var react=require('react') var forms = require('newforms')  var nameform = forms.form.extend({     firstname: forms.charfield({maxlength: 100, label: "first name(s)"}),     lastname: forms.charfield({maxlength: 100, label: "last name"}),      cleanfirstname(callback) {         callback(null)     },      render() {         return this.boundfields().map(bf => {             return <div classname={'form-group ' + bf.status()}>                 <label classname="form-label" htmlfor={bf.name}>                   <span classname="form-label-bold">{bf.label}</span>                 </label>                 {bf.errors().messages().map(message => <span classname="error-message">{message}</span>)}                 <input classname="form-control" id={bf.name} type="text" name={bf.name} onchange = {this.onchangehandler}/>               </div>         })     }     , onchangehandler: function(e){         console.log("onchnage on input called ----- >> " + e.target.value)     } })  module.exports = {     nameform } 

here namepage.jsx: 'use strict';

var react = require('react') var {errorobject} = require('newforms') var superagent = require('superagent-ls')  var {api_url} = require('../../constants') var {nameform} = require('./nameform')  var namepage = react.createclass({    contexttypes: {     router: react.proptypes.func.isrequired   },   proptypes: {     data: react.proptypes.object,     errors: react.proptypes.object   },    statics: {     title: 'name',      willtransitionto(transition, params, query, cb, req) {       if (req.method != 'post') { return cb() }        superagent.post(`${api_url}/form/nameform`).send(req.body).withcredentials().end((err, res) => {         if (err || res.servererror) {           return cb(err || new error(`server error: ${res.body}`))         }          if (res.clienterror) {           transition.redirect('name', {}, {}, {             data: req.body,             errors: res.body           })         }         else {           transition.redirect('summary')         }         cb()       })     }   },    getinitialstate() {     return {       client: false,       form: new nameform({           onchange: this.forceupdate.bind(this),           data: this.props.data,           errors: this._geterrorobject()       })     }   },    componentdidmount() {     this.setstate({client: true})   },    componentwillreceiveprops(nextprops) {     if (nextprops.errors) {       var errorobject = this._geterrorobject(nextprops.errors)       this.refs.nameform.getform().seterrors(errorobject)     }   },    _geterrorobject(errors) {     if (!errors) { errors = this.props.errors }     return errors ? errorobject.fromjson(errors) : null   },    _onsubmit(e) {     e.preventdefault()     var form = this.state.form     form.validate(this.refs.form, (err, isvalid) => {       if (isvalid) {           this.context.router.transitionto('name', {}, {}, {           method: 'post',           body: form.data         })       }     })   },    render() {     return  <div>       <h1 classname="heading-large">your name</h1>       <form action='name' method="post" onsubmit={this._onsubmit} ref="form" autocomplete="off" novalidate={this.state.client}>           {this.state.form.render()}         <button type="submit" classname="button">next</button>       </form>     </div>   }, })  module.exports = namepage 

here nametest.js :

//nametest.js var react          = require('react') var reactaddons    = require('react/addons') var testutils = react.addons.testutils var inputfielditem = require('../../src/page/name/namepage')  describe('name page component', function(){     var renderedcomponent;     before('render element', function() {         console.log("*** in before")         renderedcomponent = testutils.renderintodocument(             <inputfielditem />         );     });      it('only first name entered should display 1 error message', function() {         renderedcomponent = testutils.renderintodocument(             <inputfielditem />         );         var formelement = testutils.findrendereddomcomponentwithtag(renderedcomponent, 'form').getdomnode()         var firstnameelement = testutils.scryrendereddomcomponentswithtag(renderedcomponent, 'input')[0].getdomnode()         var lastnameelement = testutils.scryrendereddomcomponentswithtag(renderedcomponent, 'input')[1].getdomnode()         var buttonelement = testutils.findrendereddomcomponentwithtag(renderedcomponent, 'button').getdomnode()          testutils.simulate.change(firstnameelement , {target: {value: 'joe'}});         testutils.simulate.submit(formelement)         var errorspans = testutils.scryrendereddomcomponentswithclass(renderedcomponent, 'error-message')         console.log("first name value :|"+  firstnameelement.value + "|")         expect (errorspans.length).to.equal(1)     })  });