类型错误：在测试更改事件时无法读取 JEST 中未定义的属性'setState'，任何人都可以帮助我解决此问题

Question

我开始学习React & &;JEST框架，创建了一个带有2个输入控件的登录页面

登录JSX:

import React from 'react';
import es6BindAll from '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 for Login component...

当我尝试在JEST中编写单元测试时，收到如下错误，

Login-Test.jsx: 
jest.unmock('../Login.js');
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import Login from '../Login.js';
describe('Login test', () => {
   it('renders the 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();
   });
});

此外，我还模拟了未正确模拟的单击事件。所以请提供一些建议，在JEST中正确模拟点击和更改事件。

TypeError:无法读取未定义的属性setState

Answer 1

看起来es6bindall可能是这里的问题—我自己没有使用这个包，但是在手动绑定函数时，上面的测试似乎运行得很好。

替换以下行:

es6BindAll(this,['txtOnChange','handleClick']);

:

this.handleClick = this.handleClick.bind(this);
this.txtOnChange = this.txtOnChange.bind(this);

同样，看起来loginCmp.handleLoginClick应该是loginCmp.handleLoginClick。

希望有帮助!