How to mockup data of table using react testing library in react 17?

Question

I want to write the test cases for mockup data of the table. Following are the sample snippets of files.

import {Grid, Table, TableBody, TableCell, TableHead, TableRow} from '@material-ui/core';

export const renderTableData = (item) => {
  const classes = useStyles();
  return (
    <Grid item xs={12} className={classes.tableContianer}>
      <Table>
        <TableHead>
          <TableRow classes={{root: classes.tableRow}}>
            {item.columns &&
              item.columns.map((subItem, index) => {
                return (
                  <TableCell padding="none" key={index}>
                    {subItem}
                  </TableCell>
                );
              })}
          </TableRow>
        </TableHead>
        <TableBody>
          {item.rows.map((row, index) => (
            <TableRow key={index} classes={{root: classes.tableRow}}>
              {Object.keys(row).map((key, index) => {
                return (
                  <TableCell padding="none" key={index} classes={{root: classes.tableCell}}>
                    {row[key]}
                  </TableCell>
                );
              })}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Grid>
  );
};

And here is my sample test files for the test cases

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import {renderTableData} from "./Table"

 it('renders without crashing', async () => { 
    
    const props = {
        
        columns:['one','two','three','four'],
        rows:[{one:"onedata",two:"twodata",three:"threedata",four:"fourdata"}]
    }
    render(<renderTable props={props}/>)
    screen.debug();
 }

when I am running the test cases of this files and check the console because of the screen.debug() ,it only shows me the props ={object object} rather it should render the html view of the files but I can not get it. Could some one take a look and let me know what should I modify the code to render the table with data into the screen.debug().

Thanks

AJ72 · Accepted Answer · 2021-05-12 19:31:47Z

1

props ={object object} is correct because you're passing an object.

If you want to see the contents, try JSON.stringify(props)

Not sure if you're trying to console.log your props or display on screen

<div>
    { JSON.stringify(props) }
</div>

To view the debug, you'll need to destructure debug from the render

const { debug } = render(<renderTable props={props}/>);
debug();

See this example

Sample component...

onst Content = ({props}) => {
    return (
        <div
            data-qa="content"
            className={styles.container}
        >
            {
                JSON.stringify(props)
            }
        </div>
    );
};

export default Content;

In your test...

            const { debug } = render(
                <Content props={{
                    columns:['one','two','three','four'],
                    rows:[{one:"onedata",two:"twodata",three:"threedata",four:"fourdata"}]
                }} />,
            )
            debug();

Output in terminal...

  Content
    Component Elements
      ✓ should ... (23ms)

  console.log node_modules/@testing-library/react/dist/pure.js:93
    <body>
      <div>
        <div
          data-qa="content"
        >
          {"columns":["one","two","three","four"],"rows":[{"one":"onedata","two":"twodata","three":"threedata","four":"fourdata"}]}
        </div>
      </div>
    </body>

edited May 12, 2021 at 19:31

answered May 12, 2021 at 17:01

AJ72

1682 silver badges12 bronze badges

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

1 Comment

Amit Over a year ago

but screen.debug should show all the header and data

Maulik · Accepted Answer · 2022-10-13 10:15:59Z

0

It's not a good choice to test data table using RTL. Try jest instead.

answered Oct 13, 2022 at 10:15

Maulik

3794 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to mockup data of table using react testing library in react 17?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related