How to find a child component from the enzyme mounted, react-redux stateToProps connected parent?

Question

Here in the following component, I am hiding the <HeaderContainer /> from the dom when isHybrid prop is truthy:

{...}
import { initializeRoutes, lazy } from 'hooks/useRouteHook';
import { isHybridSelector } from 'store/selectors';
import HeaderContainer from './header';

const routes = [
  { component: lazy(...component) },
  {...}
];

export const UpgradeBlock = ({ isHybrid }) => {

  return (
    <Fragment>
      {!isHybrid && (
        <HeaderContainer />
      )}
      <div
      >
        <Suspense fallback={<Loader />}>{initializeRoutes(routes)}</Suspense>
      </div>
    </Fragment>
  );
};

const mapStateToProps = state => ({
  isHybrid: isHybridSelector(state),
});

CashUpgradeBlock.propTypes = {
  isHybrid: PropTypes.bool,
}

export default connect(mapStateToProps)(UpgradeBlock);

And here I want to check the presence of the <HeaderContainer /> component by mocking isHybrid prop value.

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', () => {
  // 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(<div>Redirect</div>),
  };
});

//Mock selectors
jest.mock('store/selectors', () => ({
  ...jest.requireActual('store/selectors'),
  isHybridSelector: jest.fn(),
}));

function UpgradeBlockWithStore({ history, ...props } = {}) {
  return mount(
    <Router {...}>
      <MockProvider
        {...props}
        {...}
      >
        <UpgradeBlock {...props} />
      </MockProvider>
    </Router>
  );
}

describe('CashUpgradeBlock', () => {
  it('renders CashUpgradeBlock', () => {
    const wrapper = UpgradeBlockWithStore();
    const headerContainer = wrapper.find(HeaderContainer);

    isHybridSelector.mockImplementation(() => false);
    
    //Since isHybrid is set to false HeaderContainer should be present in the dom.
    expect(headerContainer.exists()).toBe(true); //or .toBeTruthy()
  })
})

Result of console.log(wrapper.debug()) on console is following:

console.log organisms/upgrade-block/upgrade-block.spec.js:57

<Router history={{...}}>
  <MockProvider resources={{...}}>
    <Provider store={{...}}>
      <Connect(UpgradeBlock) history={{...}} location={{...}} resources={{...}} />
    </Provider>
  </MockProvider>
</Router> 

I couldn't find any solution even after hours of searching on the internet... I am not a testing expert neither; although isHybrid is set to false by default in redux, I have as well tried supplying it via ({isHybrid: false}) to the UpgradeBlockWithStore(props) still didn't help, test case not finding the headerContainer in the dom tree and expecting it to be falsy.

Answer 1

My test strategies:

1. Create a mock redux store instead of mocking selectors.
2. Create memory history or use MemoryRouter instead of mocking react-router-dom.

I added your code and removed the unrelated part.

E.g.

index.jsx:

import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import HeaderContainer from './header';
import { isHybridSelector } from './selectors';

export const UpgradeBlock = ({ isHybrid }) => {
  console.log('isHybrid: ', isHybrid);
  return <Fragment>{!isHybrid && <HeaderContainer />}</Fragment>;
};

const mapStateToProps = (state) => ({
  isHybrid: isHybridSelector(state),
});

export default connect(mapStateToProps)(UpgradeBlock);

header.jsx:

import React from 'react';

export default function Header() {
  return <div>Header</div>;
}

selectors.js:

const { createSelector } = require('reselect');

const selectEnvironment = (state) => state.environment;
export const isHybridSelector = createSelector(selectEnvironment, (environment) => environment.isHybrid);

index.test.jsx:

import React from 'react';
import { Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import { mount } from 'enzyme';
import { createMemoryHistory } from 'history';
import { createStore } from 'redux';

import HeaderContainer from './header';
import UpgradeBlock from './';

const rootReducer = (state = { environment: { isHybrid: false } }) => state;
const store = createStore(rootReducer);
const MockProvider = ({ children }) => {
  return <Provider store={store}>{children}</Provider>;
};

function UpgradeBlockWithStore({ history, ...props } = {}) {
  return mount(
    <Router history={history}>
      <MockProvider>
        <UpgradeBlock {...props} />
      </MockProvider>
    </Router>
  );
}

describe('71118716', () => {
  test('should pass', () => {
    const history = createMemoryHistory();
    const wrapper = UpgradeBlockWithStore({ history });
    const headerContainer = wrapper.find(HeaderContainer);
    expect(headerContainer.exists()).toBe(true);
  });
});

Test result:

 PASS  stackoverflow/71118716/index.test.jsx (9.425 s)
  71118716
    ✓ should pass (58 ms)

  console.log
    isHybrid:  false

      at UpgradeBlock (stackoverflow/71118716/index.jsx:7:11)

--------------|---------|----------|---------|---------|-------------------
File          | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------|---------|----------|---------|---------|-------------------
All files     |     100 |      100 |     100 |     100 |                   
 header.jsx   |     100 |      100 |     100 |     100 |                   
 index.jsx    |     100 |      100 |     100 |     100 |                   
 selectors.js |     100 |      100 |     100 |     100 |                   
--------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.023 s