Enzyme renders wrapped component rather than base component

Question

I am snapshot testing my React app with Jest and Enzyme. I am trying to export a testable version of my component that is not wrapped in a higher order component.

I then want to export the wrapped component so my app can use it, and also a testable version, i.e. a non wrapped version of my component.

This is my component:

NavBar.jsx

const NavBar = ({props}) => {(
  <div>...</div>
)}

export { NavBar as TestableNavBar };

export default withStyles(styles)(NavBar);

NavBar.test.js

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { TestableNavBar } from './NavBar';

const props = {
  ...
};

describe('Navbar', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<TestableNavBar {...props} />);
    const tree = toJson(wrapper);
    expect(tree).toMatchSnapshot();
  });
});

The above produces a snapshot that looks like this:

<div>
  <withStyles(AppBar)
    className=""
  >
    <withStyles(Toolbar)
      disableGutters={true}
    >
      <withStyles(IconButton)
        aria-label="open drawer"
        className=""
        color="contrast"
        onClick={[Function]}
      >
      ...
</div>

I can't really make sense of why it still tries to render the HOC?

Answer 1

Enzyme's shallow method just renders the children declared in render method (AppBar, Toolbar, and so on), and the output shows that they are wrapped by the same withStyles HOC.

Exporting the testable version of your root component allows you to actually test its real output (div), but won't prevent its children component from being wrapped by withStyles HOC.

If you want to test the final output of your component you might consider switching to Enzyme's mount rendering method.