React Hooks Wrapper not getting updated after state change in useEffect

[prabhjot3]

Current behavior
I'm using a functional component with a setState hook in useEffect. The state variable that is set inside useEffect is wrapped over the return statement to render the JSX for the component.

When I debug into it, the component renders with the correct state variable but my wrapper in my test does Not show the correct information.

wrapper.update() isn't fixing this issue.

Below is a snippet of what I am trying to achieve:

const DummyComponent= ({}) => {
const [selected, setSelected] = React.useState(false);

useEffect(() => {
  setSelected(true)
}, [someDependency])

return (
  { 
     selected && (
     <div id= 'container'>
        {childComponents}
      </div>)
   }
);
})

it('test', () => {
const wrapper= mount( );
wrapper.find('container')first().props().onClick();
wrapper = wrapper.update(); // this doesn't fix my problem
expect(wrapper.toMatchSnapshot());
});

I am getting the below error:

Method “props” is meant to be run on 1 node. 0 found instead.

Expected Behaviour

After state update in useEffect re-render should be triggered in test case and element with id="container" should be found.

Note: This is not same as #2305