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

Code before:
      expect(container.firstChild?.nodeName.toLowerCase()).to.eq(component);
    });
  });
}

/**
 * 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 { container } = render(React.cloneElement(element, { [testProp]: value }));

    expect(container.firstChild).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();

      const ref = React.createRef();

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

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

Review comment (suggestion):
I think that to make this test valid we need to use a similar approach to `testClassName` by passing a `testId` and then selecting that element to avoid problems where we need certain additional wrappers for the tests, like in this case: https://github.com/mui/mui-x/pull/12295/files#diff-9d9c553a774da8e7527c95c670405a6cfeba292cf0be9962179d58a21f24d426R39

Code after:
    it('can render another root component with the `component` prop', () => {
      const { render, testComponentPropWith: component = 'em' } = getOptions();
      if (!render) {
        throwMissingPropError('render');
      }

      const testId = randomStringValue();

      if (typeof component === 'string') {
        const { getByTestId } = render(
          React.cloneElement(element, { component, 'data-testid': testId }),
        );
        expect(getByTestId(testId)).not.to.equal(null);
        expect(getByTestId(testId).nodeName.toLowerCase()).to.eq(component);
      } else {
        const componentWithTestId = (props: {}) =>
          React.createElement(component, { ...props, 'data-testid': testId });
        const { getByTestId } = render(
          React.cloneElement(element, {
            component: componentWithTestId,
          }),
        );
        expect(getByTestId(testId)).not.to.equal(null);
      }
    });
  });
}

/**
 * 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 }),
    );