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

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: 无法在 txtOnChange

处读取未定义的属性 'setState'

Answer 1

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

替换以下行：

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

与：

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

此外，看起来 loginCmp.handleLoginClick 应该是 loginCmp.handleLoginClick。

希望对您有所帮助！

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

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

reactjs

jestjs