ShallowWrapper::dive fails when Context and React.memo is used

[andris-silis]

Current behavior

dive() throws TypeError: ShallowWrapper::dive() can only be called on components when diving into component wrapped with Context Provider/Consumer and React.memo.

Started to work as expected when isMemo(type) was added to condition in ReactSixteenAdapter.js::isCustomComponent. Not sure if this is a right change so no PR yet.

Expected behavior

dive() dives into deepest components just as it does when React.memo is not used:

>>>  console.log(subject.dive().debug());
<App />

>>>  console.log(subject.dive().dive().debug());
<ContextConsumer>
  [function]
</ContextConsumer>

>>>  console.log(subject.dive().dive().dive().debug());
<div>
  {{ name: 'Guest' }}
</div>

Example

const UserContext = React.createContext({
  name: 'Guest',
});

const App = () => (
  <UserContext.Consumer>
    {(user) => <div>{user}</div>}
  </UserContext.Consumer>
);

const AppMemoized = React.memo(App);

const WithProvider = () => (
  <UserContext.Provider value='test'>
    <AppMemoized />
  </UserContext.Provider>
);

const subject = shallow(<WithProvider />);

>>> subject.dive().debug();
<App />

>>> subject.dive().dive().debug();
TypeError: ShallowWrapper::dive() can only be called on components

Your environment

API

• shallow

Version

library	version
enzyme	3.9.0
react	16.8.6
react-dom	16.8.6
react-test-renderer	16.8.6
adapter (below)

Adapter

• enzyme-adapter-react-16

[ljharb]

Interesting:

shallow(React.createElement(() => <App />)).dive() // works, is ContextConsumer
shallow(React.createElement(() => <App />)).dive().dive() // works, is App's div
shallow(React.createElement(() => <App />)).dive().dive().dive() // throws, should throw

shallow(React.createElement(() => <AppMemoized />)).dive() // throws, should be ContextConsumer

Looks like this is specific to memo, and doesn't have anything to do with createContext. Fix coming shortly.