Как проверить вывод данных для таблицы пользовательского интерфейса материала при помощи jest - PullRequest
Новая
       5

Как проверить вывод данных для таблицы пользовательского интерфейса материала при помощи jest

0 голосов
/ 17 декабря 2018

Я использовал следующую таблицу из material-ui 

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
});

let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

function SimpleTable(props) {
  const { classes } = props;

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell numeric>Calories</TableCell>
            <TableCell numeric>Fat (g)</TableCell>
            <TableCell numeric>Carbs (g)</TableCell>
            <TableCell numeric>Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => {
            return (
              <TableRow key={row.id}>
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell numeric>{row.calories}</TableCell>
                <TableCell numeric>{row.fat}</TableCell>
                <TableCell numeric>{row.carbs}</TableCell>
                <TableCell numeric>{row.protein}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </Paper>
  );
}

SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleTable);

Я пытаюсь проверить отображаемые данные.Например, проверьте, что отображаются заголовки name``calories``fat``carbs и protein, а также проверьте для каждой введенной строки данных. 

I have something like the following
it('testing', () => {
  const wrapper = mount(<SimpleTable />);

  expect(wrapper).toMatchSnapshot();
  expect(wrapper.find(TableCell).get(1)).stringMatching('Calories');
});

, это возвращает следующие 

<WithStyles(TableCell)><b>Calories</b></WithStyles(TableCell)>

какя могу проверить каждую из строк, а не всю строку выше?например что-то вроде expect(wrapper.find(TabkeCell)).get(1)).toEqual('calories')

Выше также возвращает ту же строку

1 Ответ

0 голосов
/ 18 декабря 2018

Вызов .html() или .text() на конкретном элементе снимает обертки HOC (как это WithStyles). 

expect(wrapper.find(TableCell)).get(1).text()).toEqual('Calories')

Но этоЕсть ли какое-либо значение от тестирования вручную вещей, уже охваченных toMatchSnapshot()?

Если вы считаете, что снимки слишком многословны, так что никто не будет изучать (с реализацией Enzyme по умолчанию это так!), Вы можете просто 

 expect(wrapper.html()).toMatchSnapshot();
...