createConnector, displayName, and Enzyme


I just noticed that a component that I hooked up via a custom connector doesn’t appear in the component tree in Enzyme via .debug() or .find(). Instead of appearing as whatever <CustomNameSetInDisplayName />, it comes up as <undefined />.

from InstantSearchHitsLoadingConnector.js:

import { createConnector } from 'react-instantsearch';

const connectHitsLoading = createConnector({
  displayName: 'HitsWithLoadingIndicator',
  // ...

module.exports = {

From my main component:

import InstantSearchResults from './InstantSearchResults';
import InstantSearchPagination from './InstantSearchPagination';

import { connectHitsLoading } from './InstantSearchHitsLoadingConnector';
import { connectPagination } from 'react-instantsearch/connectors';

const ConnectedInstantSearchResults = connectHitsLoading(InstantSearchResults);
const ConnectedInstantSearchPagination = connectPagination(InstantSearchPagination);

…and then inside render() of my main component:

<ConnectedInstantSearchResults />
<ConnectedInstantSearchPagination />

Over in my Jest spec, I shallow() render the main component via Enzyme:

const is_controller_view = shallow(<InstantSearchController />);

Calling is_controller_view.debug() on it yields:

// ...
<undefined />
<AlgoliaPagination(InstantSearchPagination) />
// ...

Trying .find() the customConnector-wrapped component yields nothing:


Whereas looking for components wrapping in the default Algolia connectors works just fine:


Any ideas what’s going on?


Hi @wrksprfct

Thanks for reporting the problem. To be honest that suprises us a little bit. Can you open an issue on the react-instantsearch project? Also could you share with us the code of the connector?


@Bobylito Sounds good. Once I create an isolated test case, I’ll open the ticket. Should be within the next few days. Thx!