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

【问题标题】：React-Testing library not rendering Material-UI Dialog in snapshotReact-Testing 库未在快照中呈现 Material-UI 对话框
【发布时间】：2023-04-06 03:35:01
【问题描述】：

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 来运行测试。

【问题讨论】：

尝试在动作块内渲染。

标签： reactjs jestjs material-ui react-testing-library

【解决方案1】：

我认为您需要在文档上创建一个门户或元素来呈现对话框。你可以试试 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);
    }
  });

【讨论】：

【解决方案2】：

您只需将container 替换为baseElement。可以是这样的：

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

然后你会在正文中看到你的模态

【讨论】：

谢谢，它对我有用。