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

Code before:
/**
 * MUI components have a `component` prop that allows rendering a different
 * Component from @inheritComponent
 */
export function testComponentProp(
  element: React.ReactElement<any>,
  getOptions: () => ConformanceOptions,
) {
  describe('prop: component', () => {
    it('can render another root component with the `component` prop', () => {
      const { render, testComponentPropWith: component = 'em' } = getOptions();
      if (!render) {
        throwMissingPropError('render');
      }

      if (typeof component === 'string') {
        const testId = randomStringValue();

        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 { getByTestId } = render(React.cloneElement(element, { component }));
        expect(getByTestId('custom')).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(

Review comment (suggestion):
It's now mandatory to add `data-testid="custom"` when using `testComponentPropWith`. This is documented. It's the same as `testSlotsProp` is implemented.

Code after:
/**
 * MUI components have a `component` prop that allows rendering a different
 * Component from @inheritComponent
 */
export function testComponentProp(
  element: React.ReactElement<any>,
  getOptions: () => ConformanceOptions,
) {
  describe('prop: component', () => {
    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');
    }