Bump karma-webpack to ^5.0.1 (#104)

Co-authored-by: Michał Dudak <michal@mui.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>

package.json

@@ -131,7 +131,7 @@
     "karma-firefox-launcher": "^2.1.3",
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.4.0",
-    "karma-webpack": "5.0.0",
+    "karma-webpack": "^5.0.1",
     "lerna": "^8.1.2",
     "lodash": "^4.17.21",
     "markdownlint-cli2": "^0.13.0",

packages/mui-base/src/Menu/Menu.test.tsx

@@ -17,6 +17,12 @@ import { Popper } from '@base_ui/react/Popper';
 import { MenuProvider, useMenu } from '@base_ui/react/useMenu';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
+function createAnchor() {
+  const anchor = document.createElement('div');
+  document.body.appendChild(anchor);
+  return anchor;
+}
+
 const testContext: DropdownContextValue = {
   dispatch: () => {},
   popupId: 'menu-popup',
@@ -158,7 +164,7 @@ describe('<Menu />', () => {
           disabledItemsFocusable: false,
         });
 
-        const anchorEl = triggerElement ?? document.createElement('div');
+        const anchorEl = triggerElement ?? createAnchor();
 
         return (
           <Popper open={open} anchorEl={anchorEl}>

packages/mui-base/src/Popper/Popper.test.tsx

@@ -4,12 +4,18 @@ import { createRenderer, createMount, screen } from '@mui/internal-test-utils';
 import { Popper, popperClasses } from '@base_ui/react/Popper';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
+function createAnchor() {
+  const anchor = document.createElement('div');
+  document.body.appendChild(anchor);
+  return anchor;
+}
+
 describe('<Popper />', () => {
   const { render } = createRenderer();
   const mount = createMount();
 
   const defaultProps = {
-    anchorEl: () => document.createElement('svg'),
+    anchorEl: () => createAnchor(),
     children: <span>Hello World</span>,
     open: true,
   };
@@ -35,13 +41,7 @@ describe('<Popper />', () => {
     const CustomComponent = React.forwardRef<HTMLDivElement, any>(({ ownerState }, ref) => (
       <div ref={ref} data-testid="foo" id={ownerState.id} />
     ));
-    render(
-      <Popper
-        anchorEl={() => document.createElement('div')}
-        open
-        slots={{ root: CustomComponent }}
-      />,
-    );
+    render(<Popper anchorEl={() => createAnchor()} open slots={{ root: CustomComponent }} />);
 
     expect(screen.getByTestId('foo')).to.not.have.attribute('id', 'id');
   });

packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx

@@ -139,10 +139,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     const handleResize = () => {
       syncHeight();
     };
-    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
-    // in test.
-    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
-    // Also see https://github.com/mui/mui-x/issues/8733
+    // Workaround a "ResizeObserver loop completed with undelivered notifications" error.
     let rAF: any;
     const rAFHandleResize = () => {
       cancelAnimationFrame(rAF);
@@ -159,9 +156,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     let resizeObserver: ResizeObserver;
 
     if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(
-        process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize,
-      );
+      resizeObserver = new ResizeObserver(rAFHandleResize);
       resizeObserver.observe(input);
     }
 

packages/mui-base/src/Unstable_Popup/Popup.test.tsx

@@ -8,6 +8,12 @@ import { describeConformanceUnstyled } from '../../test/describeConformanceUnsty
 
 const TRANSITION_DURATION = 100;
 
+function createAnchor() {
+  const anchor = document.createElement('div');
+  document.body.appendChild(anchor);
+  return anchor;
+}
+
 function FakeTransition(props: React.PropsWithChildren<{}>) {
   const { children: transitionChildren } = props;
   const { requestedEnter, onExited } = useTransitionStateManager();
@@ -45,7 +51,7 @@ describe('<Popup />', () => {
   }
 
   const defaultProps: PopupProps = {
-    anchor: () => document.createElement('div'),
+    anchor: () => createAnchor(),
     children: <span>Hello World</span>,
     open: true,
   };