useState реагирует на проблемы с Jest

Question

В настоящее время я пытаюсь протестировать модификации, внесенные в компонент реагирования пользовательского материала. я добавил хук useState к компоненту и хочу проверить, что handleOnCloseFunction вызывается, когда переменная, раскрытая в состоянии, установлена ​​в значение true.

Проблема, с которой я столкнулся, заключается в том, что я не могу установить переменную в jest до true тест начинается.

Это компонент, в котором я пытаюсь установить состояние.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Collapse from '@material-ui/core/Collapse';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Typography from '@material-ui/core/Typography';
import { red } from '@material-ui/core/colors';
import PropTypes from 'prop-types';
import shortId from 'shortid';

const useStyles = (disableMaxWidth) => makeStyles((theme) => ({
  root: {
    maxWidth: disableMaxWidth ? '100%' : 345,
    boxShadow: `0px 3px 5px -1px rgba(0,0,0,.2), 
    0px 5px 8px 0px rgba(0,0,0,.14), 
    0px 1px 14px 0px rgba(0,0,0,.12)`,
  },
  header: {
    borderBottomWidth: '1px',
    borderBottomColor: 'lightgray',
    borderBottomStyle: 'solid',
  },
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
  expand: {
    transform: 'rotate(0deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: 'rotate(180deg)',
  },
  avatar: {
    backgroundColor: red[500],
  },
  actionBar: {
    borderTopWidth: '1px',
    borderTopColor: 'lightgray',
    borderTopStyle: 'solid',
    borderBottomWidth: '1px',
    borderBottomColor: 'lightgray',
    borderBottomStyle: 'solid',
  },
}));

const MuiCard = ({
  id,
  wrapperClasses,
  description,
  header,
  enableImage,
  enableHeader,
  expandableSection,
  disableMaxWidth,
  handleCloseExpanableSection,
}) => {
  const thumbnailImageLetter = header.thumbnailImageName[0].toUpperCase();
  const classes = useStyles(disableMaxWidth)();
  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <div className={wrapperClasses}>
      <Card className={classes.root}>
        {
          enableHeader && (
          <CardHeader
            className={classes.header}
            avatar={(
              <Avatar aria-label="avatar" className={classes.avatar}>
                {thumbnailImageLetter}
              </Avatar>
            )}
            title={header.title}
            subheader={header.subHeader}
          />
          )
        }
        {
          enableImage
          && (
            <CardMedia
              className={classes.media}
              image="/static/images/cards/paella.jpg"
              title="Paella dish"
            />
          )
        }
        <CardContent>
          {
            description.component
              ? (description.component)
              : (
                description.content.map((paragraph) => (
                  <div key={shortId.generate()} className="pb-1">
                    <Typography variant="body2" color="textSecondary" component="p">
                      {paragraph}
                    </Typography>
                  </div>
                ))
              )
          }
        </CardContent>
        {
          expandableSection.component && !expandableSection.isDisabled
            && (
              <CardActions className={classes.actionBar}>
                <IconButton
                  className={clsx(classes.expand, {
                    [classes.expandOpen]: expanded,
                  })}
                  onClick={() => {
                    if (expanded) handleCloseExpanableSection(id);
                    handleExpandClick();
                  }}
                  aria-expanded={expanded}
                  aria-label="show more"
                >
                  <ExpandMoreIcon />
                </IconButton>
              </CardActions>
            )
        }
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <CardContent>
            {expandableSection.component}
          </CardContent>
        </Collapse>
      </Card>
    </div>
  );
};

MuiCard.propTypes = {
  id: PropTypes.string.isRequired,
  wrapperClasses: PropTypes.string,
  description: PropTypes.shape({
    component: PropTypes.node,
    content: PropTypes.arrayOf(PropTypes.string),
  }),
  header: PropTypes.shape({
    thumbnailImageName: PropTypes.string,
    title: PropTypes.string,
    subHeader: PropTypes.string,
  }),
  enableImage: PropTypes.bool,
  enableHeader: PropTypes.bool,
  expandableSection: PropTypes.shape({
    isDisabled: PropTypes.bool,
    component: PropTypes.node,
  }),
  disableMaxWidth: PropTypes.bool,
  handleCloseExpanableSection: PropTypes.func,
};

MuiCard.defaultProps = {
  wrapperClasses: '',
  description: {
    content: [],
    component: undefined,
  },
  header: {
    thumbnailImageName: '',
    title: '',
    subHeader: '',
  },
  enableImage: false,
  enableHeader: false,
  expandableSection: {
    isDisabled: false,
    component: undefined,
  },
  disableMaxWidth: false,
  handleCloseExpanableSection: () => {},
};

export default MuiCard;

Я пробовал кучу вещей, высмеивая функцию React.useState, но в идеале я хотел бы установите значение до, а затем щелкните элемент, чтобы он вызывал функцию, но я не могу понять, как это сделать / если это вообще возможно с помощью jest.

   describe('Given the card is expanded AND onClick is called', () => {
      beforeEach(() => {
        const iconButton = wrapper.find(IconButton);
        iconButton.prop('onClick')();
        iconButton.prop('onClick')();
      });

      it('close function is called', () => {
        expect(props.handleCloseExpanableSection).toHaveBeenCalled();
      });
    });