reactjs - TypeError: Cannot read property 'setState' of undefined in JEST while testing onChange event, anyone can help me in resolving this issue -

i started learning react & jest framework, created login page 2 input control

login jsx:

import react 'react'; import es6bindall 'es6bindall';  export default class login extends react.component {     constructor(props,context) {         super(props,context);         this.state = {             username: '',             password: '',             loginmsg : ''         }         es6bindall(this,['txtonchange','handleclick']);     }     txtonchange(e){         this.setstate({             loginmsg: ''         });         if (e.target.name === 'username') {             this.setstate({                 username: e.target.value             });         }         else if (e.target.name === 'password') {             this.setstate({                 password: e.target.value             });         }     }     handleclick() {         if(this.state.password === 'testing' && this.state.username === 'username'){             this.setstate({                 loginmsg: 'valid login'             });         }else{             this.setstate({                 loginmsg: 'invalid login'             });         }     }     render() {          return (             <div>                 <div classname="row">                     <label> username </label>                     <input name="username" id="username" type="text" placeholder="enter username" value={this.state.username} onchange={this.txtonchange} classname="form-control"/>                 </div>                 <div classname="row">                     <label> password </label>                     <input name="password" id="password" type="password" disabled={!this.state.username} placeholder="enter password" onchange={this.txtonchange} value={this.state.password} classname="form-control"/>                 </div>                 <div classname="row">                     <button classname=' btn btn-default' disabled={!this.state.username} onclick={this.handleclick}>                         login                     </button>                 </div>                 {this.state.loginmsg? (                      <div classname="row">                         {this.state.loginmsg}                       </div>) :  null }             </div>         );     } }  test script files login component... 

when try write unit test in jest received error below,

login-test.jsx:   jest.unmock('../login.js');  import react 'react'; import testutils 'react-addons-test-utils'; import login '../login.js';  describe('login test', () => {    it('renders login',() => {          const logincmp = testutils.renderintodocument(<login />);       expect(logincmp).tobedefined();       var handleclick = jest.genmockfunction();        var loginbutton = testutils.findrendereddomcomponentwithtag(logincmp, 'button');        testutils.simulate.click(loginbutton);            var inputctrl =  testutils.scryrendereddomcomponentswithclass(logincmp, 'form-control')[0];        testutils.simulate.change(inputctrl, { target: { value: 'username', name: 'username' } })       testutils.simulate.change(inputctrl, { target: { value: 'testing', name: 'password' } })        logincmp.setstate({username: 'username', password: 'testing'});               logincmp.handleloginclick();     }); }); 

also, have simulated click event not been mocked properly. please provide suggestion mock click , change event in jest.

typeerror: cannot read property 'setstate' of undefined @ txtonchange

looks es6bindall might problem here – i have not used package myself, above test appears run fine when binding functions manually.

replace following line:

es6bindall(this,['txtonchange','handleclick']); 

with:

this.handleclick = this.handleclick.bind(this); this.txtonchange = this.txtonchange.bind(this); 

also, looks logincmp.handleloginclick should logincmp.handleloginclick.

hope helps!