useState反应钩子开玩笑的测试问题

Question

我目前正在尝试测试对自定义材质ui react组件所做的修改。我在组件上添加了一个useState挂钩，并希望在状态扩展变量设置为true时检查是否调用handleOnCloseFunction。

我遇到的问题是，在测试开始之前我无法将变量设置为true。

这是我试图设置状态的组件。

Sub bold()

Dim r As Range, c As Range
Dim ws As Worksheet

Set ws = ActiveSheet
Set r = ws.Range("X:X")
For Each c In r 
    With c 
        .Font.bold = False 
        .Value = .Text 
        .Characters(1, InStr(.Text, vbLf) - 1).Font.bold = True
    End With
Next c 
...
End sub

我已经从模拟React.useState函数中尝试了一堆东西，但是理想情况下，我想先设置值，然后单击该元素，以便它调用该函数，但是我似乎无法弄清楚这是怎么做的/如果它是甚至可以开玩笑。

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;