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

[GeorgeWL]

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

[ljharb]

@GeorgeWL specifically, your componentDidMount is an async function, which returns a promise. You’d have to get access to this promise, and await it in your test, and wrapper.update() after that, to be able to assert on the updated state.

One alternative is to explicitly wrapper.setState({ loaded: true }) rather than relying on cDM to set it.

Either way, this is due to the nature of your component, and not something enzyme-related, so I’m going to close.