Unable to change the value of form inputs
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
First... let me mention that I love using enzyme. Great work. I am currently putting togther training materials for React that will use enzyme for testing.
#### Problem
I am having a problem testing a form. Specifically changing input values on the form.
`wrapper.ref('first').simulate('change', {target: {value: 'David'}});` is not working
`wrapper.find("input#first").simulate('change', {target: {value: 'David'}});` is not working
I have created a reduced test case that demonstrates the problem. The output for this example looks like:
#### Output
```
Testing a form
first name: Mike
last name: Tyson
✓ can fill out the form
```
No matter what the default **Mike Tyson** is always the name, despite the fact that I am chanign it. Why does this happen? Is there another way to change the values for the form?
#### Test
``` javascript
import { Component } from 'react'
import { expect } from 'chai'
import { mount } from 'enzyme'
class TheForm extends Component {
submit() {
console.log('first name:', this.refs.first.value);
console.log('last name:', this.refs.last.value);
}
render() {
return (
ADD
);
}
}
describe("Testing a form", () => {
it("can fill out the form", () => {
const wrapper = mount();
wrapper.ref('first').simulate('change', {target: {value: 'David'}});
wrapper.ref('last').simulate('change', {target: {value: 'Blane'}});
wrapper.find('form').simulate('submit');
});
});
```
also... wrapper.find('form').simulate('submit') works, but clicking the button does not. Even though clicking the button submits the form in the browser.
Contributor guide
Research direction
Start by running the reduced JavaScript test case in the issue and compare the input change and form submission simulations with the reported output. Trace the Enzyme event-simulation entry points involved in refs, input values, and button clicks; done means the intended behavior is reproduced by a focused regression test or the issue’s expected behavior is clearly documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100