Enzyme: Find() Does Not Find Parent, It's Finding Child in render()

Created on 18 Aug 2017 · 3Comments · Source: enzymejs/enzyme

this is a bit weird. When I debug, tab ends up being a shallow wrapper which is fine and expected. But.. when I look at the nodes array in WebStorm of the shallow wrapper, it's always returning the

component, not . Why?? I'm shallow rendering HeaderSearch, not Search!

video: https://youtu.be/yyhxWI6oLPA

import { expect, shallow, React } from 'test/test.helpers';
import { fakeStore } from 'test/test.doubles';
import HeaderSearch from 'app/components/Header/HeaderSearch/index';

describe('Header Search Category Tab', () => {

  describe('Successful', () => {

    describe('displayed as fourth category', () => {

      it('contains search', () => {
        const search = shallow(<HeaderSearch store={fakeStore()} />).dive().find('.ft-search');
        expect(search).to.exist;
      })
    })
  })
})

Container

I'm giving the bare minimal, the ... means "there is code here":

export class HeaderSearch extends Component {
  constructor() {
    ...
  }

  render() {
    ...
    return (
       <Search />
    );
  }
}

function mapStateToProps(state) {
  return {
    ...
  };
}

const TimeoutHeaderSearch = ReactTimeout(connect(mapStateToProps, {
  ...
})(HeaderSearch));

TimeoutHeaderSearch.fetchData = ({ store }) => store.dispatch(fetchSearch());

Here's the debug showing what was returned

screen shot 2017-08-18 at 2 56 09 am