fix

Author: sai6855

packages-internal/test-utils/src/describeConformance.tsx

@@ -91,7 +91,7 @@ function throwMissingPropError(field: string): never {
  * the root component.
  */
 export function testClassName(
-  element: React.ReactElement<unknown>,
+  element: React.ReactElement<HTMLElement & { 'data-testid': string }>,
   getOptions: () => ConformanceOptions,
 ) {
   it('applies the className to the root component', async () => {
@@ -117,7 +117,12 @@ export function testClassName(
  * Component from @inheritComponent
  */
 export function testComponentProp(
-  element: React.ReactElement<unknown>,
+  element: React.ReactElement<
+    HTMLElement & {
+      component?: string | ((props: {}) => React.ReactElement);
+      'data-testid': string;
+    }
+  >,
   getOptions: () => ConformanceOptions,
 ) {
   describe('prop: component', () => {
@@ -153,7 +158,7 @@ export function testComponentProp(
  * MUI components spread additional props to its root.
  */
 export function testPropsSpread(
-  element: React.ReactElement<unknown>,
+  element: React.ReactElement<HTMLElement & { [key: `data-${string}`]: string }>,
   getOptions: () => ConformanceOptions,
 ) {
   it(`spreads props to the root component`, async () => {
@@ -183,7 +188,7 @@ export function testPropsSpread(
  * components that forward their ref and attach it to a host component.
  */
 export function describeRef(
-  element: React.ReactElement<unknown>,
+  element: React.ReactElement<HTMLElement & { ref?: React.Ref<any> }>,
   getOptions: () => ConformanceOptions,
 ) {
   describe('ref', () => {
@@ -208,7 +213,7 @@ export function describeRef(
  * Tests that the root component has the root class
  */
 export function testRootClass(
-  element: React.ReactElement<unknown>,
+  element: React.ReactElement<HTMLElement & { classes: Record<string, string> }>,
   getOptions: () => ConformanceOptions,
 ) {
   it('applies the root class to the root component if it has this class', async () => {
@@ -260,7 +265,17 @@ function forEachSlot(
   });
 }
 
-function testSlotsProp(element: React.ReactElement<unknown>, getOptions: () => ConformanceOptions) {
+function testSlotsProp(
+  element: React.ReactElement<
+    HTMLElement & {
+      slots: Record<string, any>;
+      slotProps: Record<string, any>;
+      components: Record<string, any>;
+      componentsProps: Record<string, any>;
+    }
+  >,
+  getOptions: () => ConformanceOptions,
+) {
   const { render, slots, testLegacyComponentsProp } = getOptions();
 
   const CustomComponent = React.forwardRef<
@@ -432,7 +447,9 @@ function testSlotsProp(element: React.ReactElement<unknown>, getOptions: () => C
 }
 
 function testSlotPropsProp(
-  element: React.ReactElement<unknown>,
+  element: React.ReactElement<
+    HTMLElement & { slotProps: Record<string, any>; componentsProps: Record<string, any> }
+  >,
   getOptions: () => ConformanceOptions,
 ) {
   const { render, slots, testLegacyComponentsProp } = getOptions();
@@ -518,7 +535,7 @@ function testSlotPropsProp(
 }
 
 function testSlotPropsCallback(
-  element: React.ReactElement<unknown>,
+  element: React.ReactElement<HTMLElement & { slotProps: Record<string, any> }>,
   getOptions: () => ConformanceOptions,
 ) {
   const { render, slots } = getOptions();
@@ -549,7 +566,9 @@ function testSlotPropsCallback(
  * Components from @inheritComponent
  */
 function testComponentsProp(
-  element: React.ReactElement<unknown>,
+  element: React.ReactElement<
+    HTMLElement & { components: Record<string, any>; 'data-testid': string }
+  >,
   getOptions: () => ConformanceOptions,
 ) {
   describe('prop components:', () => {
@@ -868,7 +887,7 @@ function testThemeStyleOverrides(
  * Components from @inheritComponent
  */
 function testThemeVariants(
-  element: React.ReactElement<unknown>,
+  element: React.ReactElement<HTMLElement & { 'data-testid': string; variant: string }>,
   getOptions: () => ConformanceOptions,
 ) {
   describe('theme variants:', () => {
@@ -976,7 +995,7 @@ function testThemeVariants(
  * The components that iterate over the palette via `variants` should be able to render with or without applying the custom palette styles.
  */
 function testThemeCustomPalette(
-  element: React.ReactElement<unknown>,
+  element: React.ReactElement<HTMLElement>,
   getOptions: () => ConformanceOptions,
 ) {
   describe('theme extended palette:', () => {
@@ -1021,7 +1040,7 @@ const fullSuite = {
  * components.
  */
 function describeConformance(
-  minimalElement: React.ReactElement<unknown>,
+  minimalElement: React.ReactElement<HTMLElement>,
   getOptions: () => ConformanceOptions,
 ) {
   let originalMatchmedia: typeof window.matchMedia;