React-testing-library: Empty snapshot with animated Component

[bdauria]

• react-testing-library version: 8.0.5
• react version: 16.8
• node version: 10.16.0
• npm (or yarn) version: 6.9.0

I'm trying to write a snapshot test for a Component based on mui's Dialog which contains an animation (with a duration set to 0 in my case). It seems that I'm able to find the content using the regular API (findByText for example), but the snapshot output is null.

Here's the code of the Component I'm trying to snapshot-test:

import React from 'react';

import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import red from '@material-ui/core/colors/red';
import styled from '@emotion/styled';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';

import IconError from '../../Icons/IconError';

const errorRed = red[900];

const RedErrorIcon = styled(IconError)(() => ({
  color: errorRed,
  marginRight: 10,
}));

export default function ErrorDialog({ open, title, text, confirmLabel, onClose }) {
  return (
    <Dialog transitionDuration={0} open={open} aria-labelledby="error-dialog">
      <DialogTitle id="error-dialog-title">{title}</DialogTitle>
      <DialogContent>
        <DialogContentText>
          <RedErrorIcon />
          {text}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary" autoFocus>
          {confirmLabel}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

The test itself:

import React from 'react';
import { render } from '@testing-library/react';
import ErrorDialog from '.';

describe('ErrorDialog', () => {
  it('renders', async () => {
    const { container, findByText } = render(
      <ErrorDialog
        open
        title="Error"
        text="Something unexpected happened..."
        confirmLabel="Close"
        onClose={() => {}}
      />,
    );

    await findByText('Error');

    expect(container.firstChild).toMatchSnapshot();
  });
});

the line await findByText('Error'); doesn't fail, but the generated snapshot is null:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ErrorDialog renders 1`] = `null`;

I'm not sure if there's a way to deactivate all kinds of animations, and if that's even the issue at all. Any thoughts?

Thanks in advance.

[weyert]

I would consider not using snapshots here and just type out the intent you are trying to test instead?

[alexkrolick]

It's probably not the firstChild of the container. More likely a dialog or portal is appended to the DOM as a sibling.

@kentcdodds I think that demonstrating .firstChild in the examples is more trouble than it's worth. It only avoids one nesting level in the output and adds a little 🤔🤔 to simple tests.

- expect(container.firstChild).toMatchSnapshot()
+ expect(container).toMatchSnapshot()

[kentcdodds]

Yes, we should remove it.

[kentcdodds]

Also, I think we should try to de-emphasize snapshots... I wanted to include it to show it was possible, but I don't think it's necessary.