React-Testing library not rendering Material-UI Dialog in snapshot

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

Expected behaviour: The button and the dialog are rendered Actual behaviour: The button alone is rendered.

This render is only rendering the button at the top of the component. The open value spread from handleDialog is true, therefore the dialog should be open, but on my snapshot it only shows the button.

I don't think it's to do with anything asynchronous and it firing before something has loaded. I have using JSDOM 16 and Jest to run the tests.

Answer 1

You just need to replace container with baseElement. It can be like this:

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

and then you'll see your modal inside of the body