Automatically set data-testid

mui · Jun 14, 2024 · 5fdc832 · 5fdc832
1 parent 81f9574
commit 5fdc832
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx
@@ -51,9 +51,9 @@ export interface ConformanceOptions {
    *
    * It must either:
    * - Be a string that is a valid HTML tag, or
-   * - Contain at least one DOM which has `data-testid="custom"`
+   * - A component that spread props to the underlying rendered element.
    *
-   * If not provided, the default 'em' element is used
+   * If not provided, the default 'em' element is used.
    */
   testComponentPropWith?: string | React.ElementType;
   testDeepOverrides?: SlotTestOverride | SlotTestOverride[];
@@ -128,17 +128,23 @@ export function testComponentProp(
         throwMissingPropError('render');
       }
 
-      if (typeof component === 'string') {
-        const testId = randomStringValue();
+      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 { getByTestId } = render(React.cloneElement(element, { component }));
-        expect(getByTestId('custom')).not.to.equal(null);
+        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);
       }
     });
   });

diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx
@@ -31,7 +31,7 @@ describe('<SvgIcon />', () => {
       muiName: 'JoySvgIcon',
       refInstanceof: window.SVGSVGElement,
       testComponentPropWith: (props: SvgIconProps) => (
-        <svg {...props} data-testid="custom">
+        <svg {...props}>
           <defs>
             <linearGradient id="gradient1">
               <stop offset="20%" stopColor="#39F" />

diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.test.js b/packages/mui-material/src/SvgIcon/SvgIcon.test.js
@@ -24,7 +24,7 @@ describe('<SvgIcon />', () => {
       muiName: 'MuiSvgIcon',
       refInstanceof: window.SVGSVGElement,
       testComponentPropWith: (props) => (
-        <svg {...props} data-testid="custom">
+        <svg {...props}>
           <defs>
             <linearGradient id="gradient1">
               <stop offset="20%" stopColor="#39F" />