Изучение снимков ферментов и чтение их отзывов

Я изучаю 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",
    }
  }
/>
`;

Я считаю, что я должен видеть все части, составляющие Компонент, но, очевидно, это не то, что я вижу. Есть ли способ объяснить, почему это происходит?

0 ответов

Другие вопросы по тегам