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传播的打开值是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();
});

然后你会看到你的模态在体内

Answer 2

我认为您需要在文档上创建一个门户或元素来呈现对话框。您可以尝试 RTL hook beforeAll .....

const DIALOG_ROOT= "root"

beforeAll(() => {
    const noRootMounted = !document.getElementById(DIALOG_ROOT);
    if (noRootMounted) {
      const root = document.createElement("div");
      root.setAttribute("id", DIALOG_ROOT);
      document.body.appendChild(root);
    }
  });