Disabled property not rendered correctly

[hptk]

First of all I'm using chai-enzyme, but the nature of the error I'm experiencing suggests to me that the issue lies with the rendering and not the assertions.

Code:

import React, { Component } from 'react';
import cx from 'classnames';

class CarInsuranceEditor extends Component {
  constructor() {
    super();
    this.state = {
      disabled: true
    };
  }

  handleSubmit = () => {};

  render() {
    const disabled = this.state.disabled;
    return (
      <div>
        <button
          disabled={disabled}
          onClick={this.handleSubmit}
          className={cx('stb-btn', disabled && 'disabled')}
        >
          Commit
        </button>
      </div>
    );
  }
}

export default CarInsuranceEditor;

Tests:

import React from 'react';
import { shallow } from 'enzyme';
import CarInsuranceEditor from './CarInsuranceEditor.js';

describe('<CarInsuranceEditor />', () => {
  it('should disable button by default', () => {
    const wrapper = shallow(<CarInsuranceEditor />);
    const commitButton = wrapper.find('button');
    expect(commitButton).to.be.disabled();
  });

  it('should enable button on state change', () => {
    const wrapper = shallow(<CarInsuranceEditor />);
    const commitButton = wrapper.find('button');
    expect(commitButton).to.be.disabled();
    console.log(wrapper.state());
    wrapper.setState({ disabled: !wrapper.state().disabled });
    console.log(wrapper.state());
    expect(commitButton).to.not.be.disabled();
  });
});

test output:

 <CarInsuranceEditor />
    ✓ should disable button by default
{ disabled: true }
{ disabled: false }
    1) should enable button on state change
...
AssertionError: expected the node in <CarInsuranceEditor /> not to be disabled
     HTML:     
     <button disabled="" class="stb-btn disabled">Commit</button>

It seems to me like an error that disabled={false} in the react rendering code results in disabled="". In the browser DOM the state successfully changes and the button no longer has the disabled property at all. Also note that the class name has not changed from disabled either (should not be there), which is even harder for me to understand.

[ljharb]

After you call wrapper.setState, you need to call wrapper.update().

[hptk]

Still fails for me, no change in behaviour or output

[ljharb]

I think after the update, you'll need to re-find the button you want to check.

[hptk]

Passes now. Thanks.

Is this intended and/or good behaviour? As someone having used this lib for a few weeks only it was natural to me that when the component was actually rerendered (as the console output proves?) the wrapper would reflect this.

[ljharb]

The component doesn't re-render automatically when you set state, is all. Separately, once it's rerendered, previous references to wrapper children are invalid, and need to be refetched.

There's been some discussion about setState automatically triggering update, but you'd still need to re-find the button.

[hptk]

I would as mentioned find it natural for update to be triggered automatically.

The need to re-find makes more sense, refreshing references when you remove old and add new components/data/something is an action you do all the time in a lot of languages/situations so that's not new or unreasonable.

I do also realise that my understanding is limited and that I do not know all the consequences of auto-triggering update. There's probably good reasons for it not being default.

[ljharb]

I think #360 might be relevant, and should both help answer questions as well as be the right place to ask further :-)