Repository: mui/material-ui
File: packages-internal/test-utils/src/describeConformance.tsx (TypeScript)

Code before:
  element: React.ReactElement<any>,
  getOptions: () => ConformanceOptions,
) {
  it(`spreads props to the root component`, () => {
    // type def in ConformanceOptions
    const { render } = getOptions();

    if (!render) {
      throwMissingPropError('render');
    }

    const testProp = 'data-test-props-spread';
    const value = randomStringValue();
    const testId = randomStringValue();

    const { getByTestId } = render(
      React.cloneElement(element, { [testProp]: value, 'data-testid': testId }),
    );

    expect(getByTestId(testId)).to.have.attribute(testProp, value);
  });
}

/**
 * Tests that the `ref` of a component will return the correct instance
 *
 * This is determined by a given constructor i.e. a React.Component or HTMLElement for
 * components that forward their ref and attach it to a host component.
 */
export function describeRef(
  element: React.ReactElement<any>,
  getOptions: () => ConformanceOptions,
) {
  describe('ref', () => {
    it(`attaches the ref`, () => {
      // type def in ConformanceOptions
      const { render, refInstanceof } = getOptions();

      if (!render) {
        throwMissingPropError('render');
      }

      const ref = React.createRef();

      render(React.cloneElement(element, { ref }));

      expect(ref.current).to.be.instanceof(refInstanceof);
    });
  });
}


Review comment (suggestion):
Here, we lose the aspect of testing that the inherited component is being used and only maintain that the props are spread into whatever the component considers its root.

This follows RTL's principle of not testing implementation details. There might be a way for us to test that the inherited component is the one used, but I think it would be better to test that on each component's tests, by testing the expected functionality, classes, or whatever the inherited component provides.

Code after:
}

/**
 * MUI components spread additional props to its root.
 */
export function testPropsSpread(
  element: React.ReactElement<any>,
  getOptions: () => ConformanceOptions,
) {
  it(`spreads props to the root component`, () => {
    // type def in ConformanceOptions
    const { render } = getOptions();

    if (!render) {
      throwMissingPropError('render');
    }

    const testProp = 'data-test-props-spread';
    const value = randomStringValue();
    const testId = randomStringValue();

    const { getByTestId } = render(
      React.cloneElement(element, { [testProp]: value, 'data-testid': testId }),
    );

    expect(getByTestId(testId)).to.have.attribute(testProp, value);
  });
}

/**
 * Tests that the `ref` of a component will return the correct instance
 *
 * This is determined by a given constructor i.e. a React.Component or HTMLElement for
 * components that forward their ref and attach it to a host component.
 */
export function describeRef(
  element: React.ReactElement<any>,
  getOptions: () => ConformanceOptions,
) {
  describe('ref', () => {
    it(`attaches the ref`, () => {
      // type def in ConformanceOptions
      const { render, refInstanceof } = getOptions();

      if (!render) {
        throwMissingPropError('render');
      }

      const ref = React.createRef();

      render(React.cloneElement(element, { ref }));