setTimeout needed with enzyme 3.10.0

[tomraut]

Current behavior

I have component including following:

componentDidMount() {
    this.props.errors.observe('errorShow', this.errorShowHandler)
    this.props.errors.observe('errorHide', this.errorHideHandler)
  }

errorShowHandler(errorObject) {
    this.setState({errorMessage: errorObject.code})
}

errorHideHandler() {
    this.setState({errorMessage: undefined})
}

render() {
    if (this.state.errorMessage) {
      return (
        <div id="error">{{ this.state.errorMessage }}</div>
      )
    }
    return null
}

And following way to test this:

describe('when error appears', () => {
    let wrapper, errors
    beforeAll(() => {
      errors = new ObservableModel()
      const strings = {}
      wrapper = mount(<ErrorUI errors={errors}/>)
      errors.update('errorShow', { code: 'TEST_ERROR' } )
      wrapper.update()
    })

    it('should show error code', () => {
      expect(wrapper.text()).toContain('TEST_ERROR')
    })

    describe('when error is hidden', () => {
      beforeAll(() => {
        errors.update('errorHide')
        wrapper.update()
      })

      it('should not show error message', () => {
        expect(wrapper.find('#error').length).toBe(0)
      })
    })

Expected behavior

Second test should work also with enzyme 3.10.0 but instead it says that "Expected 1 to be 0." Same test works with enzyme 3.7.0 - 3.9.0. Modifying test like this makes it also work with 3.10.0:

it('should not show error message', () => {
        setTimeout(function() { expect(wrapper.find('#error').length).toBe(0) }, 500)
 })

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	3.10.0
react	16.11.0
react-dom	16.11.0
react-test-renderer	16.11.0
adapter (below)	1.6.0

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

[ljharb]

Using setTimeout like that is a race condition. The timing of your "ObservableModel" is not clear, but that is what everything depends on.

[tomraut]

@ljharb I forgot to include constructor in my example:

constructor(props) {
    super(props, logger)
    this.errorShowHandler = this.errorShowHandler.bind(this)
    this.errorHideHandler = this.errorHideHandler.bind(this)
  }

So basically whenever I need to show or hide this component, I'm calling for "errors.update('errorShow')" or "errors.update('errorHide')" and the code I have in componentDidMount() does the rest.

I'm not really sure what changes there have been in 3.10.0 compared to earlier versions where test worked correctly but it feels that with 3.10.0 there's just not enough time for component to update itself before test is executed.