React-Testing library未渲染材质-快照中的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值是真的，因此对话框应该是打开的，但在我的快照上它只显示按钮。

我不认为它与任何异步的东西有关，它在加载之前就触发了。我使用JSDOM16和Jest来运行测试。

Answer 1

您只需要用baseElement替换container即可。可以是这样的：

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);
    }
  });