Изучение снимков ферментов и чтение их отзывов
Я изучаю Enzyme, и у меня возникла проблема.
У меня есть компонент:
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import TextField from '@material-ui/core/TextField';
import FormControl from '@material-ui/core/FormControl';
import Button from '@material-ui/core/Button';
const styles = theme => ({
root: {
display: 'flex',
flexDirection: 'column'
},
title: {
fontSize: 26,
},
loginCard: {
width: '350px',
margin: 'auto',
display: 'flex',
justifyContent: 'center',
height: '400px'
},
button: {
marginTop: '25px'
},
loginContent: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center'
}
});
const Login = withStyles(styles) (( { classes }) => (
<Grid container spacing={12} className={classes.root}>
<Card variant="outlined" >
<CardContent className={classes.title}>Hellow</CardContent>
</Card>
<Card className={classes.loginCard} variant="outlined">
<CardContent className={classes.loginContent} >
<FormControl>
<TextField />
<TextField />
<Button variant="contained" className={classes.button}>Submit</Button>
</FormControl>
</CardContent>
</Card>
</Grid>
));
export default Login;
Затем у меня есть тестовый файл с этим кодом:
import React from 'react';
import { shallow } from 'enzyme';
import Login from './Login';
it('expect to render Login component', () => {
expect(shallow(<Login />)).toMatchSnapshot();
});
Затем я получаю это взамен:
// Jest Snapshot v1
exports[`expect to render Login component 1`] = `
<Component
classes={
Object {
"button": "Component-button-4",
"loginCard": "Component-loginCard-3",
"loginContent": "Component-loginContent-5",
"root": "Component-root-1",
"title": "Component-title-2",
}
}
/>
`;
Я считаю, что я должен видеть все части, составляющие Компонент, но, очевидно, это не то, что я вижу. Есть ли способ объяснить, почему это происходит?