enzymejs / enzymejs/enzyme

Unable to change the value of form inputs

Open
#364 32 comments 24 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.