reactjs - React-Testing 库未在快照中呈现 Material-UI 对话框

Question

export default function CommentDialog(props) {
  const {
    approvalValue,
    handleSubmit,
    handleDialog,
    handleChange,
    handleApprovalChange,
    value,
    characterCount,
    maxCharacterValue,
  } = props;

  const { handleOpen, handleClose, open } = handleDialog;
  const classes = useStyles();

  return (
    <>
      <AddCommentButton onClick={handleOpen} />
      <Dialog fullWidth onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
          Please select an outcome for this Targeting Request
        </DialogTitle>
        <RadioGroup
          aria-label="quiz"
          name="quiz"
          value={approvalValue}
          onChange={handleApprovalChange}
          className={classes.radioButtons}
        >
          <FormControlLabel value="Approved" control={<Radio color="primary" />} label="APPROVE" />
          <FormControlLabel value="Denied" control={<Radio color="secondary" />} label="DENY" />
        </RadioGroup>
        <DialogContent>
          <MarkdownEditor
            id="comment-markdown"
            error={characterCount >= maxCharacterValue && MAX_CHARACTER_MSG}
            value={value}
            onChange={handleChange}
            label="Please enter your comments"
          />
        </DialogContent>
        <Divider />
        <DialogActions className={classes.bottomDiv}>
          <TextField
            disableUnderline
            id="max-character-counter"
            label="Maximum Characters"
            InputProps={{
              readOnly: true,
            }}
            value={`${characterCount}/${maxCharacterValue}`}
            disabled
            error={characterCount >= maxCharacterValue && MAX_CHARACTER_MSG}
          />
          <div>
            <Button
              disabled={(approvalValue === 'Denied' && value === '') || approvalValue === ''}
              onClick={handleSubmit}
              color="primary"
            >
              Submit
            </Button>
            <Button onClick={handleClose} color="primary">
              Cancel
            </Button>
          </div>
        </DialogActions>
      </Dialog>
    </>
  );
}

it('onChange called on type in markdown box', async () => {
  const { container } = render(<CommentDialog {...modifiedProps} />);
  expect(container).toMatchSnapshot();
});

预期行为:呈现按钮和对话框
实际行为:单独呈现按钮。
此渲染仅渲染组件顶部的按钮。从 handleDialog 传播的 open 值为 true，因此对话框应该是打开的，但在我的快照上它只显示按钮。
我不认为这与任何异步和它在加载之前触发有关。我使用 JSDOM 16 和 Jest 来运行测试。

Answer 1

您只需要更换 container与 baseElement .它可以是这样的:

it('onChange called on type in markdown box', async () => {
  const { baseElement } = render(<CommentDialog {...modifiedProps} />);
  expect(baseElement).toMatchSnapshot();
});

然后你会在 body 内部看到你的模态