Enzyme: shallow - Cannot see `connect`ed child component

[lukebarton]

I cannot seem to .find() a redux-connected component in my components render tree

// components/Header/Header.jsx
import React from 'react';
import NavigationContainer from 'containers/NavigationContainer';
import Navigation from 'components/Navigation';
import { Container } from 'stardust';

export const Header = () => (
  <Container>
    <div />
    <Navigation />
    <NavigationContainer />
  </Container>
);

export default Header;

import React from 'react';
import { shallow } from 'enzyme';
import { Header } from 'components/Header/Header';

describe('(Component) Header', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<Header />);
  });

  it('Should render a Navigation', () => {
    expect(wrapper.find('Container')).to.have.length(1); // true
    expect(wrapper.find('div')).to.have.length(1); // true
    expect(wrapper.find('Navigation')).to.have.length(1); // true
    expect(wrapper.find('NavigationContainer')).to.have.length(1); // <--- false
  });
});

// containers/NavigationContainer.js
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import Navigation from '../components/Navigation';

const mapDispatchToProps = {
  push,
};

const mapStateToProps = (state) => ({});

export default connect(mapStateToProps, mapDispatchToProps)(Navigation);

[rochdev]

connect() wraps the display name of the original component. So in your case the selector would be Connect(Navigation) instead of NavigationContainer. Also note that it's the name of the original component, not the name of the import.

[erezcohen]

Just to clarify: it should be 'Connect(Navigation)'

[ljharb]

(although better would be to never find by displayName, and to instead export the constructor for the wrapped component, and search for that)

[jd-erreape]

@ljharb could you please elaborate a little bit more your response? I'm really interested into knowing how to do it properly. Thanks!

[ljharb]

@jd-erreape in short, never pass a string into .find :-)