Javascript 模拟点击反应组件测试时,状态未定义
我一直在尝试测试我的handleFormSubmit方法的行为。单击提交时,应触发调用。在我添加下面列出的两行之前,这是绝对正常的。似乎是在更新上下文还是不调用构造函数 任何帮助,非常感谢。我已经尽我所能精简了这篇文章 失败状态的行未定义Javascript 模拟点击反应组件测试时,状态未定义,javascript,reactjs,jestjs,enzyme,Javascript,Reactjs,Jestjs,Enzyme,我一直在尝试测试我的handleFormSubmit方法的行为。单击提交时,应触发调用。在我添加下面列出的两行之前,这是绝对正常的。似乎是在更新上下文还是不调用构造函数 任何帮助,非常感谢。我已经尽我所能精简了这篇文章 失败状态的行未定义 data.username = this.state.username.trim(); data.password = this.state.password.trim(); 组成部分: 从“React”导入React // Renders login fo
data.username = this.state.username.trim();
data.password = this.state.password.trim();
组成部分:
从“React”导入React
// Renders login form.
export default class LoginView extends React.Component {
static propTypes = {
model: React.PropTypes.object.isRequired,
params: React.PropTypes.object.isRequired
}
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
}
handleUsernameChange(event) {
this.setState({error: false, username: event.target.value});
}
handlePasswordChange(event) {
this.setState({error: false, password: event.target.value});
}
handleFormSubmit(event) {
event.preventDefault();
let failureMsg = {},
data = this.props.params,
options = {
success: (response) => {
if (response.attributes.successfulLogin) {
window.location = this.props.params.redirect +
'?authenticationToken=' + response.get('authenticationToken') +
this.createParams();
} else {
throw Error('Helpful error');
}
},
error: () => {
throw Error('Helpful error');
}
};
// PROBLEM LINES!
data.username = this.state.username.trim();
data.password = this.state.password.trim();
if (this.state.username && this.state.password && this.state.terms) {
this.props.model.save(data, options);
} else {
this.setState({
error: true,
errorMessage: !this.state.username || !this.state.password ? LoginConstants.LOGIN.BLANK_INPUT : LoginConstants.LOGIN.BLANK_TERMS
});
}
}
render() {
return (
<form>
<input type="text" ref="username" id="username" placeholder="Customer ID" onChange={this.handleUsernameChange.bind(this)} maxLength={75} value={this.state.username} />
<input type="password" ref="password" id="password" placeholder="Password" onChange={this.handlePasswordChange.bind(this)} maxLength={75} value={this.state.password} />
<button type="submit" ref="login" id="login" className="Button Button--primary u-marginT-md" onClick={this.handleFormSubmit.bind(this)}>LOGIN</button>
</form>
);
}
}
单元测试:
import React from 'react';
import { mount } from 'enzyme';
import LoginView from './LoginView';
describe('Login screen', () => {
let mountedComp;
beforeAll(() => {
mountedComp = mount(<LoginView />);
});
it('should show error if submitted blank', () => {
mountedComp.instance().state = {
username: '',
password: ''
};
expect(mountedComp.find('#js-errorMessage').length).toEqual(0);
mountedComp.ref('login').simulate('click', { preventDefault: () => undefined, state: {} });
expect(mountedComp.find('#js-errorMessage').length).toBeGreaterThan(0);
});
});
看起来您的this.state:超出范围。考虑添加
var _self = this;
和使用
_self.state.username.trim();
_self.state.password.trim();
尝试将onClick函数绑定到
我认为问题的根源可能就在这一行:
let data = this.props.params
在JavaScript中,它不会通过值将this.props.params对象复制到数据对象,而是通过引用。它将为数据和this.props.params设置相同的引用–这意味着如果更改数据内容,它将反映在this.props.params中,反之亦然。
所以你实际上是在改变道具,这些道具应该是不变的
您应该创建一个浅拷贝,例如:
let data = Object.assign({}, this.props.params)
我通过手动将参数传递给我的jsx对象来解决这个问题。我不确定这是正确的测试方法,但它现在起作用了
<LoginView model={model} params={params} />
无运气-类型错误:无法设置未定义的属性“username”无运气-类型错误:无法设置未定义的属性“username”