модульное тестирование материалов UI компонентов с шуткой - PullRequest
Новая
       4

модульное тестирование материалов UI компонентов с шуткой

0 голосов
/ 14 февраля 2019

В пользовательском интерфейсе материала есть компонент сетки, и я хочу, чтобы он был протестирован модулем jest в моем приложении React.Пожалуйста, найдите мой код ниже

Для приведенного выше кода, как мы будем писать модульный тест?Я прошел их руководство по тестированию https://material -ui.com / guides / testing , но это не ясно. Любые идеи / предложения действительно приветствуются 

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>
  );
}

Я должен быть в состояниидля модульного тестирования вышеуказанного кода, используя Jest

1 Ответ

0 голосов
/ 14 февраля 2019

Люди могут ненавидеть меня за это.Поскольку этот случай не содержит никакой логики, я бы просто экспортировал функцию, установил реквизиты, которые отражают реальные данные, и сделал бы снимок вашей поверхностной функции.

Всякий раз, когда она изменяется, проверяйте ее перед обновлением и всевсе в порядке.

РЕДАКТИРОВАТЬ: экспортировать нормальный компонент без HOC withStyles и добавить классы в ваши макеты реквизита.ДРУГОЕ РЕДАКТИРОВАНИЕ:

Ваш тест, вероятно, должен выглядеть примерно так в этом случае: 

describe('SpaceComponent', () => {
  it('it renders the component correctly', () => {
    const props = { classes: { root: 'root', paper: 'paper' } };
    const component = shallow(<Space {...props} />);
    expect(component).toMatchSnapshot();
  });
});
...