OnChange is called with an undefined value
See original GitHub issueI am testing my component with jest and enzyme but when try to change the value in this component the onChange event is called with the undefined method. But when run the app using the npm start
the component works very well.
This is my code:
const onChange = sinon.spy()
const wrapper = mount(<InputField dispatch={dispatch} onChange={onChange} label="Phone" name="phonenumber"/>)
describe('with valid form data', () => {
it('dispatches an action', () => {
dispatch.resetHistory()
wrapper
.find('input[name="telephone"]')
.simulate('change', { target: { name: 'telephone', value: '5555555555' } }) //Undefined Value
expect(onChange.calledOnce).toEqual(true)
........
InputField:
const InputField = props => {
return (
<div>
<label className="input-label">{props.label}</label>
<PhoneInput
country="US"
onChange={props.onChange}
name={props.name}
/>
</div>
)
}
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Assigned input value is undefined since onChange is never ...
The problem is handleChange is not getting the parameters of name and value. You can try something like: (Assuming name is a variable ......
Read more >Controller | React Hook Form - Simple React forms validation
Calling onChange with undefined is not valid. You should use null or the empty string as your default/cleared value instead. rules, Object.
Read more >Deal with Undefined 'this' in React Event Handlers Correctly
When teaching React to developers, one thing that comes up often is dealing with a common error. In this post, learn how to...
Read more >event.target.name is undefined: What you need to know
You're likely getting this error because you're trying to get a name attribute on elements that don't have a name attribute. For example;...
Read more >Forms - React
An input form element whose value is controlled by React in this way is called ... <label> Name: <input type="text" value={this.state.value} onChange={this.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@catamphetamine Ok, I understand. I was reviewing the code and the problem is with the simulated event. It should be this way:
.simulate ('change', '+18888888888')
Thanks for the support.
@eugenio-caicedo Ok. I had similar thoughts, but then saw that you have
country="US"
set up. Don’t know why didn’t it like the pre-defined country from<Phone country="US"/>
. I guess pre-settingcountry
property doesn’t work in Enzyme. But ok, for application testing just international numbers will be enough.