Repository: mui/material-ui
File: packages/material-ui/src/Paper/Paper.test.js (JavaScript)

Code before:
import { expect } from 'chai';
import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils';
import Paper from './Paper';
import { createMuiTheme, ThemeProvider } from '../styles';

describe('<Paper />', () => {
  const mount = createMount();
  const render = createClientRender();
  let classes;

  before(() => {
    classes = getClasses(<Paper />);
  });

  describeConformance(<Paper />, () => ({
    classes,
    inheritComponent: 'div',
    mount,
    refInstanceof: window.HTMLDivElement,
    testComponentPropWith: 'header',
  }));

  describe('prop: square', () => {
    it('can disable the rounded class', () => {
      const { container } = render(<Paper square>Hello World</Paper>);
      expect(container.firstChild).not.to.have.class(classes.rounded);
    });

    it('adds a rounded class to the root when omitted', () => {
      const { container } = render(<Paper>Hello World</Paper>);
      expect(container.firstChild).to.have.class(classes.rounded);
    });
  });

  describe('prop: variant', () => {
    it('adds a outlined class', () => {
      const { container } = render(<Paper variant="outlined">Hello World</Paper>);
      expect(container.firstChild).to.have.class(classes.outlined);
    });
  });

  it('should set the elevation elevation class', () => {
    const { container, setProps } = render(<Paper elevation={16}>Hello World</Paper>);
    expect(container.firstChild).to.have.class(classes.elevation16);

    setProps({ elevation: 24 });
    expect(container.firstChild).to.have.class(classes.elevation24);

    setProps({ elevation: 2 });
    expect(container.firstChild).to.have.class(classes.elevation2);
  });

Review comment (suggestion):
`getByTestId` is the correct choice. `container.firstChild` is acceptable for faster iteration but more brittle. So when we already have the robust version we don't need to downgrade to the brittle version.

Code after:
import { expect } from 'chai';
import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils';
import Paper from './Paper';
import { createMuiTheme, ThemeProvider } from '../styles';

describe('<Paper />', () => {
  const mount = createMount();
  const render = createClientRender();
  let classes;

  before(() => {
    classes = getClasses(<Paper />);
  });

  describeConformance(<Paper />, () => ({
    classes,
    inheritComponent: 'div',
    mount,
    refInstanceof: window.HTMLDivElement,
    testComponentPropWith: 'header',
  }));

  describe('prop: square', () => {
    it('can disable the rounded class', () => {
      const { getByTestId } = render(
        <Paper data-testid="root" square>
          Hello World
        </Paper>,
      );

      expect(getByTestId('root')).not.to.have.class(classes.rounded);
    });

    it('adds a rounded class to the root when omitted', () => {
      const { getByTestId } = render(<Paper data-testid="root">Hello World</Paper>);

      expect(getByTestId('root')).to.have.class(classes.rounded);
    });
  });

  describe('prop: variant', () => {
    it('adds a outlined class', () => {
      const { getByTestId } = render(
        <Paper data-testid="root" variant="outlined">
          Hello World
        </Paper>,
      );

      expect(getByTestId('root')).to.have.class(classes.outlined);
    });
  });