Enzyme shallowRender doesn't work with MUI

I am pretty new to the testing framework Enzyme. Maybe I misunderstood something about shallowRender.

I am trying to create tests with Enzyme and it turns out I can’t use shallowRender. I think the reason is the wrapping of MUI with the withStyles function.

I have the following code that I want to test:

function NavMenu({ classes, projects }: Props) {
	return (
		<div className={classes.root}>
			<List component="nav" className={classes.root}>
				{projects &&
					projects.map(project => (
						<ProjectNavItem project={project} key={project.id} />
					))}
			</List>
		</div>
	);
}

export default withStyles(styles, { withTheme: true })(NavMenu);

When I do a shallowRender, I can’t see for example the div rendered (or the List). I only see the <NavMenu />. This is an example of how I do shallowRender:

describe("<NavMenu />", () => {
	let shallow;

	beforeEach(() => {
		shallow = createShallow();
	});

	it("should render", () => {
		const wrapper = shallow(<NavMenu projects={[mockProject()]} />);
                expect(wrapper).toContain(<div>); // An example (untested code).
	});
});

Expected Behavior

I would expect the wrapper to contain at least one level of children. For example:

<NavMenu>
   <div></div>
</NavMenu>

Current Behavior

Currently, I get only the root tag I am trying to render: <NavMenu />

Steps to Reproduce (for bugs)

(See “should render” test)

1. Create a React project with create-react-app
2. Make a Component
3. Make a test for the component with a shallowRender using Enzyme and Jest.

Context

I want to be able to test using shallowRender and not mount.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.38
React	16.2.0
browser	Not important
enzyme	3.3.0
enzyme-adapter-react-16	1.1.1
jest	20.0.4

• I have searched the issues of this repository and believe that this is not a duplicate.

[oliviertassinari]

@eluchsinger You have a single HOC, use the dive property over the untilSelector. It sounds like we haven’t updated the shallow recursion logic to handle fragments.

const shallow = createShallow({ dive: true });

[eluchsinger]

@oliviertassinari I have created new tests with Enzyme and if I use their shallow and it works. Maybe I am using createShallow wrong?

https://codesandbox.io/s/m7qkyzk9op