enzyme: wrapper.find(Component).instance().setState(STATE) sets state, doesn't update render

Current behavior

Setting a wrapped components instance state does show that it has updated the state when observed, but doesn’t update the render when observed

wrapper = mount(
          <Router>
            <IntlProvider locale="en">
              <ComponentExample
                userStore={userStore}
                lenderStore={lenderStore}
                history={history}
                location={history.location}
                match={match}
              />
            </IntlProvider>
          </Router>
        );

Test

wrapper
      .find(ComponentExample)
      .instance()
      .setState(TEST_STATE);
    expect(
      wrapper
        .find(ComponentExample)
        .instance()
        .state
    ).toEqual(TEST_STATE);

Result

PASS

component snippet

public state = {
     loaded:false
}
//other stuff like async componentDidMount, clickHandlers, etc.

public render(){
  const {
    loaded,
    //other state not mentioned here
  } = state;
  return (
    <div className='container'>
      {loaded &&
        (
          <div className='pageHeader'>
            {/* other children */}
          </div>
        )}
      <span>Loading</span>
    </div>
  )
}

TEST 2:

 wrapper
      .find(ComponentExample)
      .instance()
      .setState(TEST_STATE);
    expect(
      wrapper
        .find(ComponentExample)
        .instance()
        .state
    ).toEqual(TEST_STATE);
    wrapper.update();
    expect(
      wrapper
        .find('.pageHeader')
        .isEmptyRender()
    ).toEqual(false)
    expect(
      wrapper
        .find('.pageHeader')
    ).toHaveLength(1)

RESULT

FAIL: ReactWrapper::getNode() can only be called when wrapping one node
FAIL: Expected Length 1, Received Length 0

Expected behavior

TEST 2:

 wrapper
      .find(ComponentExample)
      .instance()
      .setState(TEST_STATE);
    expect(
      wrapper
        .find(ComponentExample)
        .instance()
        .state
    ).toEqual(TEST_STATE);
    wrapper.update();
    expect(
      wrapper
        .find('.pageHeader')
        .isEmptyRender()
    ).toEqual(false)

RESULT

PASS

Your environment

Windows 10

API

  • shallow
  • mount
  • render

Version

library version
enzyme 3.9.0
react 16.4.1
react-dom 16.4.1
react-test-renderer 16.8.6
adapter (below) 1.11.2

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 ( )

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 17 (2 by maintainers)

Most upvoted comments

Thank you. I wasn’t certain of the cause you see.