title: How to find a child component from the enzyme mounted, react-redux stateToProps connected parent?
body: <p>Here in the following component, I am hiding the <code>&lt;HeaderContainer /&gt;</code> from the dom when <code>isHybrid</code> prop is truthy:</p>
  <pre><code>{...}
  import { initializeRoutes, lazy } from 'hooks/useRouteHook';
  import { isHybridSelector } from 'store/selectors';
  import HeaderContainer from './header';
  
  const routes = [
    { component: lazy(...component) },
    {...}
  ];
  
  export const UpgradeBlock = ({ isHybrid }) =&gt; {
  
    return (
      &lt;Fragment&gt;
        {!isHybrid &amp;&amp; (
          &lt;HeaderContainer /&gt;
        )}
        &lt;div
        &gt;
          &lt;Suspense fallback={&lt;Loader /&gt;}&gt;{initializeRoutes(routes)}&lt;/Suspense&gt;
        &lt;/div&gt;
      &lt;/Fragment&gt;
    );
  };
  
  const mapStateToProps = state =&gt; ({
    isHybrid: isHybridSelector(state),
  });
  
  CashUpgradeBlock.propTypes = {
    isHybrid: PropTypes.bool,
  }
  
  export default connect(mapStateToProps)(UpgradeBlock);
  </code></pre>
  <p>And here I want to check the presence of the <code>&lt;HeaderContainer /&gt;</code> component by mocking <code>isHybrid</code> prop value.</p>
  <pre><code>import React from 'react';
  import { Router } from 'react-router-dom';
  import { mount } from 'enzyme';
  //Internal MockProvider Component.
  import { MockProvider } from 'utils/tests';    
  import HeaderContainer from './header';
  import UpgradeBlock from './index';
  
  //Mock router-dom
  jest.mock('react-router-dom', () =&gt; {
    // Require the original module to not be mocked...
    const originalModule = jest.requireActual('react-router-dom');
    return {
      __esModule: true, // Use it when dealing with esModules
      ...originalModule,
      Redirect: jest.fn().mockReturnValue(&lt;div&gt;Redirect&lt;/div&gt;),
    };
  });
  
  //Mock selectors
  jest.mock('store/selectors', () =&gt; ({
    ...jest.requireActual('store/selectors'),
    isHybridSelector: jest.fn(),
  }));
  
  function UpgradeBlockWithStore({ history, ...props } = {}) {
    return mount(
      &lt;Router {...}&gt;
        &lt;MockProvider
          {...props}
          {...}
        &gt;
          &lt;UpgradeBlock {...props} /&gt;
        &lt;/MockProvider&gt;
      &lt;/Router&gt;
    );
  }
  
  describe('CashUpgradeBlock', () =&gt; {
    it('renders CashUpgradeBlock', () =&gt; {
      const wrapper = UpgradeBlockWithStore();
      const headerContainer = wrapper.find(HeaderContainer);
  
      isHybridSelector.mockImplementation(() =&gt; false);
      
      //Since isHybrid is set to false HeaderContainer should be present in the dom.
      expect(headerContainer.exists()).toBe(true); //or .toBeTruthy()
    })
  })
  </code></pre>
  <p>Result of console.log(wrapper.debug()) on console is following:</p>
  <pre><code>console.log organisms/upgrade-block/upgrade-block.spec.js:57
  
  &lt;Router history={{...}}&gt;
    &lt;MockProvider resources={{...}}&gt;
      &lt;Provider store={{...}}&gt;
        &lt;Connect(UpgradeBlock) history={{...}} location={{...}} resources={{...}} /&gt;
      &lt;/Provider&gt;
    &lt;/MockProvider&gt;
  &lt;/Router&gt; 
  </code></pre>
  <p>I couldn't find any solution even after hours of searching on the internet... I am not a testing expert neither; although <code>isHybrid</code> is set to <code>false</code> by default in redux, I have as well tried supplying it via <code>({isHybrid: false})</code> to the <code>UpgradeBlockWithStore(props)</code> still didn't help, test case not finding the <code>headerContainer</code> in the dom tree and expecting it to be falsy.</p>