How to test for data output for material UI table using jest

Question

I have used the following table from 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);

I am trying to test the data that is displayed. For example test that the headers name``calories``fat``carbs and protein are displayed and also test for each row of data that is entered.

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

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

this returns the following

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

how can I test for each of the strings and not the whole above line? for example something like expect(wrapper.find(TabkeCell)).get(1)).toEqual('calories')

The above also returns the same line

skyboyer · Accepted Answer · 2018-12-18 14:12:35Z

2

Calling .html() or .text() on particular element will strip off HOC wrappers(like this WithStyles).

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

But is there any value from testing manually things already covered by toMatchSnapshot()?

If you believe snapshots are too verbose so nobody will look into(with default Enzyme's implementation it is so!) you can just

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

answered Dec 18, 2018 at 14:12

skyboyer

24k7 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to test for data output for material UI table using jest

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related