unit testing material ui components with jest - reactjs

Question

There is a grid component in material ui and I want it to be unit tested using jest in my React application. Please find my code below
For the above code, how we will write unit test? I went through their testing guide https://material-ui.com/guides/testing, but it is not clear.Any ideas/suggestions are really appreciated
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
import "./styles.scss";
const styles = theme => ({
root: {
flexGrow: 1
},
paper: {
height: 140,
width: 100
}
});
function Space({ classes }) {
const x = [1, 2, 3];
return (
<div className="center">
<Grid container className={classes.root}>
<Grid item xs={12}>
<Grid container justify="center" spacing={Number(32)}>
{x.map(value => (
<Grid key={value} item>
<Paper className={classes.paper} />
</Grid>
))}
</Grid>
</Grid>
</Grid>
</div>
);
}
I should be able to unit test the above code using jest

Answer 1

People might hate me for saying this. Since this case does not contain any logic I would just export the function, setup props which reflect real data, and make a snapshot of your shallow rendered function.
Whenever it changes, check it before you update it and all is okay.
EDIT: export the normal component without the withStyles HOC and add the classes to your mocked props.
ANOTHER EDIT:
Your test should probably look something like this in this case:
describe('SpaceComponent', () => {
it('it renders the component correctly', () => {
const props = { classes: { root: 'root', paper: 'paper' } };
const component = shallow(<Space {...props} />);
expect(component).toMatchSnapshot();
});
});