@mui/internal-test-utils 1.0.6 → 1.0.7

package/src/describeConformance.tsx

@@ -41,7 +41,7 @@ export interface ConformanceOptions {
   refInstanceof: any;
   after?: () => void;
   inheritComponent?: React.ElementType;
-  render: (node: React.ReactElement<any>) => MuiRenderResult;
+  render: (node: React.ReactElement<any>) => MuiRenderResult | Promise<MuiRenderResult>;
   only?: Array<keyof typeof fullSuite>;
   skip?: Array<keyof typeof fullSuite | 'classesRoot'>;
   testComponentsRootPropWith?: string;
@@ -94,7 +94,7 @@ export function testClassName(
   element: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
-  it('applies the className to the root component', () => {
+  it('applies the className to the root component', async () => {
     const { render } = getOptions();
 
     if (!render) {
@@ -104,7 +104,7 @@ export function testClassName(
     const className = randomStringValue();
     const testId = randomStringValue();
 
-    const { getByTestId } = render(
+    const { getByTestId } = await render(
       React.cloneElement(element, { className, 'data-testid': testId }),
     );
 
@@ -121,7 +121,7 @@ export function testComponentProp(
   getOptions: () => ConformanceOptions,
 ) {
   describe('prop: component', () => {
-    it('can render another root component with the `component` prop', () => {
+    it('can render another root component with the `component` prop', async () => {
       const { render, testComponentPropWith: component = 'em' } = getOptions();
       if (!render) {
         throwMissingPropError('render');
@@ -130,7 +130,7 @@ export function testComponentProp(
       const testId = randomStringValue();
 
       if (typeof component === 'string') {
-        const { getByTestId } = render(
+        const { getByTestId } = await render(
           React.cloneElement(element, { component, 'data-testid': testId }),
         );
         expect(getByTestId(testId)).not.to.equal(null);
@@ -138,7 +138,7 @@ export function testComponentProp(
       } else {
         const componentWithTestId = (props: {}) =>
           React.createElement(component, { ...props, 'data-testid': testId });
-        const { getByTestId } = render(
+        const { getByTestId } = await render(
           React.cloneElement(element, {
             component: componentWithTestId,
           }),
@@ -156,7 +156,7 @@ export function testPropsSpread(
   element: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
-  it(`spreads props to the root component`, () => {
+  it(`spreads props to the root component`, async () => {
     // type def in ConformanceOptions
     const { render } = getOptions();
 
@@ -168,7 +168,7 @@ export function testPropsSpread(
     const value = randomStringValue();
     const testId = randomStringValue();
 
-    const { getByTestId } = render(
+    const { getByTestId } = await render(
       React.cloneElement(element, { [testProp]: value, 'data-testid': testId }),
     );
 
@@ -187,7 +187,7 @@ export function describeRef(
   getOptions: () => ConformanceOptions,
 ) {
   describe('ref', () => {
-    it(`attaches the ref`, () => {
+    it(`attaches the ref`, async () => {
       // type def in ConformanceOptions
       const { render, refInstanceof } = getOptions();
 
@@ -197,7 +197,7 @@ export function describeRef(
 
       const ref = React.createRef();
 
-      render(React.cloneElement(element, { ref }));
+      await render(React.cloneElement(element, { ref }));
 
       expect(ref.current).to.be.instanceof(refInstanceof);
     });
@@ -211,7 +211,7 @@ export function testRootClass(
   element: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
-  it('applies the root class to the root component if it has this class', () => {
+  it('applies the root class to the root component if it has this class', async () => {
     const { classes, render, skip } = getOptions();
     if (classes.root == null) {
       return;
@@ -219,7 +219,7 @@ export function testRootClass(
 
     const className = randomStringValue();
     const classesRootClassname = randomStringValue();
-    const { container } = render(
+    const { container } = await render(
       React.cloneElement(element, {
         className,
         classes: { ...classes, root: `${classes.root} ${classesRootClassname}` },
@@ -273,7 +273,7 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
   ));
 
   forEachSlot(slots, (slotName, slotOptions) => {
-    it(`allows overriding the ${slotName} slot with a component using the slots.${slotName} prop`, () => {
+    it(`allows overriding the ${slotName} slot with a component using the slots.${slotName} prop`, async () => {
       if (!render) {
         throwMissingPropError('render');
       }
@@ -284,7 +284,7 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
         [slotName]: slotComponent,
       };
 
-      const { queryByTestId } = render(React.cloneElement(element, { slots: components }));
+      const { queryByTestId } = await render(React.cloneElement(element, { slots: components }));
       const renderedElement = queryByTestId('custom');
       expect(renderedElement).not.to.equal(null);
       if (slotOptions.expectedClassName) {
@@ -293,7 +293,7 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
     });
 
     if (slotOptions.testWithElement !== null) {
-      it(`allows overriding the ${slotName} slot with an element using the slots.${slotName} prop`, () => {
+      it(`allows overriding the ${slotName} slot with an element using the slots.${slotName} prop`, async () => {
         if (!render) {
           throwMissingPropError('render');
         }
@@ -310,7 +310,7 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
           },
         };
 
-        const { queryByTestId } = render(
+        const { queryByTestId } = await render(
           React.cloneElement(element, { slots: components, slotProps }),
         );
 
@@ -328,7 +328,7 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
     if (testLegacyComponentsProp) {
       it(`allows overriding the ${slotName} slot with a component using the components.${capitalize(
         slotName,
-      )} prop`, () => {
+      )} prop`, async () => {
         if (!render) {
           throwMissingPropError('render');
         }
@@ -339,7 +339,7 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
           [capitalize(slotName)]: slotComponent,
         };
 
-        const { queryByTestId } = render(React.cloneElement(element, { components }));
+        const { queryByTestId } = await render(React.cloneElement(element, { components }));
         const renderedElement = queryByTestId('custom');
         expect(renderedElement).not.to.equal(null);
         if (slotOptions.expectedClassName) {
@@ -349,7 +349,7 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
 
       it(`prioritizes the 'slots.${slotName}' over components.${capitalize(
         slotName,
-      )} if both are defined`, () => {
+      )} if both are defined`, async () => {
         if (!render) {
           throwMissingPropError('render');
         }
@@ -386,7 +386,7 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
           [slotName]: ComponentForSlotsProp,
         };
 
-        const { queryByTestId } = render(
+        const { queryByTestId } = await render(
           React.cloneElement(element, { components, slots: slotOverrides }),
         );
 
@@ -397,7 +397,7 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
       if (slotOptions.testWithElement !== null) {
         it(`allows overriding the ${slotName} slot with an element using the components.${capitalize(
           slotName,
-        )} prop`, () => {
+        )} prop`, async () => {
           if (!render) {
             throwMissingPropError('render');
           }
@@ -414,7 +414,7 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
             },
           };
 
-          const { queryByTestId } = render(
+          const { queryByTestId } = await render(
             React.cloneElement(element, { components, componentsProps }),
           );
 
@@ -439,14 +439,14 @@ function testSlotPropsProp(element: React.ReactElement<any>, getOptions: () => C
   }
 
   forEachSlot(slots, (slotName, slotOptions) => {
-    it(`sets custom properties on the ${slotName} slot's element with the slotProps.${slotName} prop`, () => {
+    it(`sets custom properties on the ${slotName} slot's element with the slotProps.${slotName} prop`, async () => {
       const slotProps = {
         [slotName]: {
           'data-testid': 'custom',
         },
       };
 
-      const { queryByTestId } = render(React.cloneElement(element, { slotProps }));
+      const { queryByTestId } = await render(React.cloneElement(element, { slotProps }));
       const slotComponent = queryByTestId('custom');
       expect(slotComponent).not.to.equal(null);
 
@@ -456,7 +456,7 @@ function testSlotPropsProp(element: React.ReactElement<any>, getOptions: () => C
     });
 
     if (slotOptions.expectedClassName) {
-      it(`merges the class names provided in slotsProps.${slotName} with the built-in ones`, () => {
+      it(`merges the class names provided in slotsProps.${slotName} with the built-in ones`, async () => {
         const slotProps = {
           [slotName]: {
             'data-testid': 'custom',
@@ -464,7 +464,7 @@ function testSlotPropsProp(element: React.ReactElement<any>, getOptions: () => C
           },
         };
 
-        const { getByTestId } = render(React.cloneElement(element, { slotProps }));
+        const { getByTestId } = await render(React.cloneElement(element, { slotProps }));
 
         expect(getByTestId('custom')).to.have.class(slotOptions.expectedClassName);
         expect(getByTestId('custom')).to.have.class(slotProps[slotName].className);
@@ -472,14 +472,14 @@ function testSlotPropsProp(element: React.ReactElement<any>, getOptions: () => C
     }
 
     if (testLegacyComponentsProp) {
-      it(`sets custom properties on the ${slotName} slot's element with the componentsProps.${slotName} prop`, () => {
+      it(`sets custom properties on the ${slotName} slot's element with the componentsProps.${slotName} prop`, async () => {
         const componentsProps = {
           [slotName]: {
             'data-testid': 'custom',
           },
         };
 
-        const { queryByTestId } = render(React.cloneElement(element, { componentsProps }));
+        const { queryByTestId } = await render(React.cloneElement(element, { componentsProps }));
         const slotComponent = queryByTestId('custom');
         expect(slotComponent).not.to.equal(null);
 
@@ -488,7 +488,7 @@ function testSlotPropsProp(element: React.ReactElement<any>, getOptions: () => C
         }
       });
 
-      it(`prioritizes the 'slotProps.${slotName}' over componentsProps.${slotName} if both are defined`, () => {
+      it(`prioritizes the 'slotProps.${slotName}' over componentsProps.${slotName} if both are defined`, async () => {
         const componentsProps = {
           [slotName]: {
             'data-testid': 'custom',
@@ -503,7 +503,7 @@ function testSlotPropsProp(element: React.ReactElement<any>, getOptions: () => C
           },
         };
 
-        const { queryByTestId } = render(
+        const { queryByTestId } = await render(
           React.cloneElement(element, { componentsProps, slotProps }),
         );
         const slotComponent = queryByTestId('custom');
@@ -525,14 +525,14 @@ function testSlotPropsCallback(
   }
 
   forEachSlot(slots, (slotName) => {
-    it(`sets custom properties on the ${slotName} slot's element with the slotProps.${slotName} callback`, () => {
+    it(`sets custom properties on the ${slotName} slot's element with the slotProps.${slotName} callback`, async () => {
       const slotProps = {
         [slotName]: (ownerState: Record<string, any>) => ({
           'data-testid': ownerState.className,
         }),
       };
 
-      const { queryByTestId } = render(
+      const { queryByTestId } = await render(
         React.cloneElement(element, { slotProps, className: 'custom' }),
       );
       const slotComponent = queryByTestId('custom');
@@ -550,7 +550,7 @@ function testComponentsProp(
   getOptions: () => ConformanceOptions,
 ) {
   describe('prop components:', () => {
-    it('can render another root component with the `components` prop', () => {
+    it('can render another root component with the `components` prop', async () => {
       const { render, testComponentsRootPropWith: component = 'em' } = getOptions();
       if (!render) {
         throwMissingPropError('render');
@@ -558,7 +558,7 @@ function testComponentsProp(
 
       const testId = randomStringValue();
 
-      const { getByTestId } = render(
+      const { getByTestId } = await render(
         React.cloneElement(element, { components: { Root: component }, 'data-testid': testId }),
       );
       expect(getByTestId(testId)).not.to.equal(null);
@@ -576,7 +576,7 @@ function testThemeDefaultProps(
   getOptions: () => ConformanceOptions,
 ) {
   describe('theme default components:', () => {
-    it("respect theme's defaultProps", () => {
+    it("respect theme's defaultProps", async () => {
       const testProp = 'data-id';
       const { muiName, render, ThemeProvider, createTheme } = getOptions();
 
@@ -606,7 +606,7 @@ function testThemeDefaultProps(
         },
       });
 
-      const { container } = render(<ThemeProvider theme={theme}>{element}</ThemeProvider>);
+      const { container } = await render(<ThemeProvider theme={theme}>{element}</ThemeProvider>);
 
       expect(container.firstChild).to.have.attribute(testProp, 'testProp');
     });
@@ -622,7 +622,7 @@ function testThemeStyleOverrides(
   getOptions: () => ConformanceOptions,
 ) {
   describe('theme style overrides:', () => {
-    it("respect theme's styleOverrides custom state", function test() {
+    it("respect theme's styleOverrides custom state", async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
       }
@@ -666,7 +666,7 @@ function testThemeStyleOverrides(
         return;
       }
 
-      const { container } = render(
+      const { container } = await render(
         <ThemeProvider theme={theme}>
           {React.cloneElement(element, {
             [testStateOverrides.prop]: testStateOverrides.value,
@@ -677,7 +677,7 @@ function testThemeStyleOverrides(
       expect(container.firstChild).to.toHaveComputedStyle(testStyle);
     });
 
-    it("respect theme's styleOverrides slots", function test() {
+    it("respect theme's styleOverrides slots", async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
       }
@@ -742,7 +742,7 @@ function testThemeStyleOverrides(
         },
       });
 
-      const { container, setProps } = render(
+      const { container, setProps } = await render(
         <ThemeProvider theme={theme}>{element}</ThemeProvider>,
       );
 
@@ -788,7 +788,7 @@ function testThemeStyleOverrides(
       }
     });
 
-    it('overrideStyles does not replace each other in slots', function test() {
+    it('overrideStyles does not replace each other in slots', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
       }
@@ -844,7 +844,7 @@ function testThemeStyleOverrides(
         return;
       }
 
-      render(
+      await render(
         <ThemeProvider theme={theme}>
           {React.cloneElement(element, {
             [testStateOverrides.prop]: testStateOverrides.value,
@@ -866,7 +866,7 @@ function testThemeStyleOverrides(
  */
 function testThemeVariants(element: React.ReactElement<any>, getOptions: () => ConformanceOptions) {
   describe('theme variants:', () => {
-    it("respect theme's variants", function test() {
+    it("respect theme's variants", async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
       }
@@ -910,7 +910,7 @@ function testThemeVariants(element: React.ReactElement<any>, getOptions: () => C
         },
       });
 
-      const { getByTestId } = render(
+      const { getByTestId } = await render(
         <ThemeProvider theme={theme}>
           {React.cloneElement(element, { ...testVariantProps, 'data-testid': 'with-props' })}
           {React.cloneElement(element, { 'data-testid': 'without-props' })}
@@ -921,7 +921,7 @@ function testThemeVariants(element: React.ReactElement<any>, getOptions: () => C
       expect(getByTestId('without-props')).not.to.toHaveComputedStyle(testStyle);
     });
 
-    it('supports custom variant', function test() {
+    it('supports custom variant', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
       }
@@ -954,7 +954,7 @@ function testThemeVariants(element: React.ReactElement<any>, getOptions: () => C
         },
       });
 
-      const { getByTestId } = render(
+      const { getByTestId } = await render(
         <ThemeProvider theme={theme}>
           {React.cloneElement(element, { variant: 'unknown', 'data-testid': 'custom-variant' })}
         </ThemeProvider>,

package/src/fireDiscreteEvent.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { configure, fireEvent, getConfig } from '@testing-library/react';
+import reactMajor from './reactMajor';
 
 const noWrapper = (callback: () => void) => callback();
 
@@ -8,7 +8,7 @@ const noWrapper = (callback: () => void) => callback();
  * @returns {void}
  */
 function withMissingActWarningsIgnored(callback: () => void) {
-  if (React.version.startsWith('18')) {
+  if (reactMajor >= 18) {
     callback();
     return;
   }

package/src/flushMicrotasks.ts

@@ -1,8 +1,5 @@
 import { act } from './createRenderer';
 
 export default async function flushMicrotasks() {
-  if (/jsdom/.test(window.navigator.userAgent)) {
-    // This is only needed for JSDOM and causes issues in real browsers
-    await act(async () => {});
-  }
+  await act(async () => {});
 }

package/src/index.ts

@@ -15,9 +15,12 @@ export {} from './initMatchers';
 export * as fireDiscreteEvent from './fireDiscreteEvent';
 export * as userEvent from './userEvent';
 export { default as flushMicrotasks } from './flushMicrotasks';
+export { default as reactMajor } from './reactMajor';
 
 /**
  * Set to true if console logs during [lifecycles that are invoked twice in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) are suppressed.
  * Useful for asserting on `console.warn` or `console.error` via `toErrorDev()`.
+ * TODO: Refactor to use reactMajor when fixing the React 17 cron test.
+ * https://github.com/mui/material-ui/issues/43153
  */
 export const strictModeDoubleLoggingSuppressed = React.version.startsWith('17');

package/src/reactMajor.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default Number(React.version.split('.')[0]);

package/src/userEvent.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { click, mouseDown, mouseUp, keyDown, keyUp } from './fireDiscreteEvent';
 import { act, fireEvent } from './createRenderer';
+import reactMajor from './reactMajor';
 
 export function touch(target: Element): void {
   fireEvent.touchStart(target);
@@ -11,7 +11,7 @@ export const mousePress: (...args: Parameters<(typeof fireEvent)['mouseUp']>) =>
   target,
   options,
 ) => {
-  if (React.version.startsWith('18')) {
+  if (reactMajor >= 18) {
     fireEvent.mouseDown(target, options);
     fireEvent.mouseUp(target, options);
     fireEvent.click(target, options);
@@ -24,7 +24,7 @@ export const mousePress: (...args: Parameters<(typeof fireEvent)['mouseUp']>) =>
 };
 
 export function keyPress(target: Element, options: { key: string; [key: string]: any }): void {
-  if (React.version.startsWith('18')) {
+  if (reactMajor >= 18) {
     fireEvent.keyDown(target, options);
     fireEvent.keyUp(target, options);
   } else {