enzymejs / enzymejs/enzyme

Simulating click does not honor the disabled attribute

Open
#386 20 comments 14 reactions 0 assignees View on GitHub
API: shallow bug Need To Reproduce
Dominant language
JavaScript
Stars
19.8k
Forks
2k
PR merge metrics
No merged PRs in 30d

Description

There seems to be a difference in behaviour between shallow/mount and react-addons-test-utils when it comes to simulating a click on an element with the `disabled` attribute. React and react-addons-test-utils does not call the onClick handler when the disabled attribute is present but shallow/mount does.

Component under test:

```
export const DisabledButton = React.createClass({
getInitialState (){
return {
clicks: 0
}
},
handleClick () {
console.log(`the click was registered`)
this.setState({
clicks: ++this.state.clicks
})
},
render () {
return (

Clicks: {this.state.clicks}


Click Me!

)
}
})
```

All tests pass using `react-addons-test-utils`:

```
import TestUtils from 'react-addons-test-utils'
import ReactDOM from 'react-dom'

describe(' TestUtils', function () {

it('should start with zero clicks', () => {
const component = TestUtils.renderIntoDocument(

)
const p = ReactDOM.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(component, 'p'))
expect(p.textContent).toContain('0')
})

it('should not do anything when clicked because the button is disabled', () => {
const component = TestUtils.renderIntoDocument(

)
TestUtils.Simulate.click(TestUtils.findRenderedDOMComponentWithTag(component, 'button'))

const p = ReactDOM.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(component, 'p'))
expect(p.textContent).toContain('0')
})
})
```

Using `shallow` the second test will fail:

```
import { shallow } from 'enzyme'

describe(' shallow', function () {

it('should start with zero clicks', () => {
const wrapper = shallow(

)
expect(wrapper.find('p').text()).toContain('0')
})

it('should not do anything when clicked because the button is disabled', () => {
const wrapper = shallow(

)
wrapper.find('button').simulate('click')
expect(wrapper.find('p').text()).toContain('0')
})
})
```

Using `mount` the second test will fail:

```
import { mount } from 'enzyme'

describe(' mount', function () {

it('should start with zero clicks', () => {
const wrapper = mount(

)
expect(wrapper.find('p').text()).toContain('0')
})

it('should not do anything when clicked because the button is disabled', () => {
const wrapper = shallow(

)
wrapper.find('button').simulate('click')
expect(wrapper.find('p').text()).toContain('0')
})
})
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the discrepancy with the shown shallow and mount examples, then compare their button simulate('click') behavior with React TestUtils.Simulate.click on a disabled button. Trace the shallow and mount simulation entry points. Done means disabled buttons no longer invoke onClick, while the existing enabled-click behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.