I am doing unit-testing on React Components with karma+jasmine involving Login. The tests always throws error
? LoginForm test > ValidatedInput test > should validate password
TypeError: this.props.onChange is not a function
at ValidatedInput.handleChangeValue (src/ponents/ValidatedInput.js:14:24)
at node_modules/enzyme/build/ShallowWrapper.js:844:23
at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/shallow/Transaction.js:143:20)
at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactDefaultBatchingStrategy.js:62:26)
at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactUpdates.js:97:27)
at ReactShallowRenderer.unstable_batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:130:25)
at performBatchedUpdates (node_modules/enzyme/build/ShallowWrapper.js:103:21)
at node_modules/enzyme/build/ShallowWrapper.js:843:13
at withSetStateAllowed (node_modules/enzyme/build/Utils.js:284:3)
at ShallowWrapper.simulate (node_modules/enzyme/build/ShallowWrapper.js:840:42)
at Object.<anonymous> (src/__tests__/login-test.js:93:37)
at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
at process._tickCallback (internal/process/next_tick.js:109:7)
Following are my files:
LoginForm.js renders the ponent
<ValidatedInput
name={'userId'}
type={'text'}
title={'User ID'}
value={this.state.userId}
placeholder={'Enter User ID'}
onChange={this.handleUserIdChange}
onComponentMounted={this.handleRegisterFormFields}
validations={/^[0-9]{5,10}$/}
validationError={'This is not valid user Id'}
isRequired={true}
/>
I have bind the handleUserIdChange in constructor and defined in the class body as
handleUserIdChange(value) {
this.setState({ userId : value });
}
ValidatedInput.js
import React, { Component } from 'react';
class ValidatedInput extends Component {
constructor(props) {
super(props);
this.handleChangeValue = this.handleChangeValue.bind(this);
this.isValid = this.isValid.bind(this);
this.validateInput = this.validateInput.bind(this);
}
/**********************************************/
// referred function //
handleChangeValue(e) {
this.props.onChange(e.target.value);
var isValidField = this.isValid(e.target);
}
/**********************************************/
isValid(input) {
if (input.getAttribute('required') !== null && input.value === "") {
input.classList.add('Error');
input.nextSibling.textContent = this.props.validationError;
return false;
} else {
input.classList.remove('Error');
input.nextSibling.textContent = '';
}
if(input.value !== "") {
if(!this.validateInput(input.value)) {
input.classList.add('Error');
input.nextSibling.textContent = this.props.validationError;
return false;
} else {
input.classList.remove('Error');
input.nextSibling.textContent = '';
}
}
return true;
}
validateInput(value) {
var regularExpressionToBeMatched = this.props.validations;
return regularExpressionToBeMatched.test(value);
}
ponentDidMount() {
if (this.props.onComponentMounted) {
this.props.onComponentMounted(this);
}
}
render () {
console.log(this.props.onChange);
return (
<div className="form-group">
<div className="col-5 text-center">
<label htmlFor={this.props.name}>{this.props.title}</label>
</div>
<div className="col-5 text-center">
<input
className="form-input text-center"
type={this.props.type}
ref={this.props.name}
name={this.props.name}
value={this.props.value}
required={this.props.isRequired}
placeholder={this.props.placeholder}
onChange={this.handleChangeValue}
/>
<span className='Error'></span>
</div>
</div>
);
}
}
export default ValidatedInput;
The following is the code of the test:
it('should validate userId', () => {
const ponent = shallow( <ValidatedInput
name={'userId'}
type={'text'}
title={'User Id'}
value={'001251623'}
placeholder={'Enter User Id'}
validations={/^[0-9]{5,10}$/}
validationError={'This is not valid user Id'}
isRequired={true}
/>);
const handleChangeValue = spyOn(ponent.instance(), 'handleChangeValue');
ponent.find('input').simulate('change', {target: { value: '00125' } });
// expect(ponent.state().value).equals("00125");
expect(handleChangeValue.calledWith('00125'));
});
I have looked extensively in all resources. The app is working fine and console.log(this.props.onChange) in ValidatedInput says bound handleUserIdChange. Please suggest a work-around or change. Thanks.
EDIT 1
LoginForm.js
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
userId : '',
password : '',
loginType : ['Customer', 'Payer', 'Super-User'],
userLoggedInAs : ['Customer'],
userType : '',
FieldsRegister : [],
serverMessage : '',
}
this.handleClearForm = this.handleClearForm.bind(this);
this.handleSubmitForm = this.handleSubmitForm.bind(this);
this.handleUserIdChange = this.handleUserIdChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleUserTypeChangeSelect = this.handleUserTypeChangeSelect.bind(this);
this.handleRegisterFormFields = this.handleRegisterFormFields.bind(this);
}
handleUserIdChange(value) {
this.setState({ userId : value });
}
...
EDIT 2
it('should validate userId', () => {
const ponent = shallow( <ValidatedInput
name={'userId'}
type={'text'}
title={'User Id'}
value={'001251623'}
placeholder={'Enter User Id'}
validations={/^[0-9]{5,10}$/}
validationError={'This is not valid user Id'}
isRequired={true}
onChange={handleUserIdChange()}
/>);
const handleChangeValue = spyOn(ponent.instance(), 'handleChangeValue');
ponent.find('input').simulate('change', {target: { value: '00125' } });
// expect(ponent.state().value).equals("00125");
expect(handleChangeValue.calledWith('00125'));
});
I am doing unit-testing on React Components with karma+jasmine involving Login. The tests always throws error
? LoginForm test > ValidatedInput test > should validate password
TypeError: this.props.onChange is not a function
at ValidatedInput.handleChangeValue (src/ponents/ValidatedInput.js:14:24)
at node_modules/enzyme/build/ShallowWrapper.js:844:23
at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/shallow/Transaction.js:143:20)
at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactDefaultBatchingStrategy.js:62:26)
at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactUpdates.js:97:27)
at ReactShallowRenderer.unstable_batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:130:25)
at performBatchedUpdates (node_modules/enzyme/build/ShallowWrapper.js:103:21)
at node_modules/enzyme/build/ShallowWrapper.js:843:13
at withSetStateAllowed (node_modules/enzyme/build/Utils.js:284:3)
at ShallowWrapper.simulate (node_modules/enzyme/build/ShallowWrapper.js:840:42)
at Object.<anonymous> (src/__tests__/login-test.js:93:37)
at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
at process._tickCallback (internal/process/next_tick.js:109:7)
Following are my files:
LoginForm.js renders the ponent
<ValidatedInput
name={'userId'}
type={'text'}
title={'User ID'}
value={this.state.userId}
placeholder={'Enter User ID'}
onChange={this.handleUserIdChange}
onComponentMounted={this.handleRegisterFormFields}
validations={/^[0-9]{5,10}$/}
validationError={'This is not valid user Id'}
isRequired={true}
/>
I have bind the handleUserIdChange in constructor and defined in the class body as
handleUserIdChange(value) {
this.setState({ userId : value });
}
ValidatedInput.js
import React, { Component } from 'react';
class ValidatedInput extends Component {
constructor(props) {
super(props);
this.handleChangeValue = this.handleChangeValue.bind(this);
this.isValid = this.isValid.bind(this);
this.validateInput = this.validateInput.bind(this);
}
/**********************************************/
// referred function //
handleChangeValue(e) {
this.props.onChange(e.target.value);
var isValidField = this.isValid(e.target);
}
/**********************************************/
isValid(input) {
if (input.getAttribute('required') !== null && input.value === "") {
input.classList.add('Error');
input.nextSibling.textContent = this.props.validationError;
return false;
} else {
input.classList.remove('Error');
input.nextSibling.textContent = '';
}
if(input.value !== "") {
if(!this.validateInput(input.value)) {
input.classList.add('Error');
input.nextSibling.textContent = this.props.validationError;
return false;
} else {
input.classList.remove('Error');
input.nextSibling.textContent = '';
}
}
return true;
}
validateInput(value) {
var regularExpressionToBeMatched = this.props.validations;
return regularExpressionToBeMatched.test(value);
}
ponentDidMount() {
if (this.props.onComponentMounted) {
this.props.onComponentMounted(this);
}
}
render () {
console.log(this.props.onChange);
return (
<div className="form-group">
<div className="col-5 text-center">
<label htmlFor={this.props.name}>{this.props.title}</label>
</div>
<div className="col-5 text-center">
<input
className="form-input text-center"
type={this.props.type}
ref={this.props.name}
name={this.props.name}
value={this.props.value}
required={this.props.isRequired}
placeholder={this.props.placeholder}
onChange={this.handleChangeValue}
/>
<span className='Error'></span>
</div>
</div>
);
}
}
export default ValidatedInput;
The following is the code of the test:
it('should validate userId', () => {
const ponent = shallow( <ValidatedInput
name={'userId'}
type={'text'}
title={'User Id'}
value={'001251623'}
placeholder={'Enter User Id'}
validations={/^[0-9]{5,10}$/}
validationError={'This is not valid user Id'}
isRequired={true}
/>);
const handleChangeValue = spyOn(ponent.instance(), 'handleChangeValue');
ponent.find('input').simulate('change', {target: { value: '00125' } });
// expect(ponent.state().value).equals("00125");
expect(handleChangeValue.calledWith('00125'));
});
I have looked extensively in all resources. The app is working fine and console.log(this.props.onChange) in ValidatedInput says bound handleUserIdChange. Please suggest a work-around or change. Thanks.
EDIT 1
LoginForm.js
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
userId : '',
password : '',
loginType : ['Customer', 'Payer', 'Super-User'],
userLoggedInAs : ['Customer'],
userType : '',
FieldsRegister : [],
serverMessage : '',
}
this.handleClearForm = this.handleClearForm.bind(this);
this.handleSubmitForm = this.handleSubmitForm.bind(this);
this.handleUserIdChange = this.handleUserIdChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleUserTypeChangeSelect = this.handleUserTypeChangeSelect.bind(this);
this.handleRegisterFormFields = this.handleRegisterFormFields.bind(this);
}
handleUserIdChange(value) {
this.setState({ userId : value });
}
...
EDIT 2
it('should validate userId', () => {
const ponent = shallow( <ValidatedInput
name={'userId'}
type={'text'}
title={'User Id'}
value={'001251623'}
placeholder={'Enter User Id'}
validations={/^[0-9]{5,10}$/}
validationError={'This is not valid user Id'}
isRequired={true}
onChange={handleUserIdChange()}
/>);
const handleChangeValue = spyOn(ponent.instance(), 'handleChangeValue');
ponent.find('input').simulate('change', {target: { value: '00125' } });
// expect(ponent.state().value).equals("00125");
expect(handleChangeValue.calledWith('00125'));
});
1 Answer
Reset to default 8In your example the <ValidateInput> ponent has the onChange prop:
<ValidatedInput
...
onChange={this.handleUserIdChange}
But inside your test it doesn't:
const ponent = shallow( <ValidatedInput
name={'userId'}
type={'text'}
title={'User Id'}
value={'001251623'}
placeholder={'Enter User Id'}
validations={/^[0-9]{5,10}$/}
validationError={'This is not valid user Id'}
isRequired={true}
---> Missing the onChange={..} <---
/>);