diff --git a/docs/package.json b/docs/package.json index 1d77cb4523a..cb9b1b57804 100644 --- a/docs/package.json +++ b/docs/package.json @@ -77,7 +77,7 @@ "@babel/plugin-transform-react-constant-elements": "^7.24.6", "@babel/preset-typescript": "^7.24.6", "@mui/internal-docs-utils": "^1.0.7", - "@mui/internal-test-utils": "1.0.0-dev.20240529-082515-213b5e33ab", + "@mui/internal-test-utils": "1.0.3", "@types/autosuggest-highlight": "^3.2.3", "@types/chai": "^4.3.16", "@types/node": "^18.19.33", diff --git a/package.json b/package.json index fa216344584..1b28ab9db29 100644 --- a/package.json +++ b/package.json @@ -76,18 +76,16 @@ "@babel/preset-react": "^7.24.6", "@babel/preset-typescript": "^7.24.6", "@babel/register": "^7.24.6", - "@mnajdova/enzyme-adapter-react-18": "^0.2.0", "@mui/internal-docs-utils": "^1.0.7", "@mui/internal-markdown": "^1.0.6", "@mui/internal-scripts": "^1.0.11", - "@mui/internal-test-utils": "1.0.0-dev.20240529-082515-213b5e33ab", + "@mui/internal-test-utils": "1.0.3", "@mui/material": "6.0.0-alpha.13", "@mui/monorepo": "github:mui/material-ui#v6.0.0-alpha.12", "@mui/utils": "6.0.0-alpha.13", "@next/eslint-plugin-next": "^14.2.3", "@octokit/rest": "^20.1.1", "@playwright/test": "1.44.1", - "@types/enzyme": "^3.10.18", "@types/fs-extra": "^11.0.4", "@types/lodash": "^4.17.4", "@types/mocha": "^10.0.6", @@ -110,7 +108,6 @@ "cross-env": "^7.0.3", "danger": "^12.1.0", "docs": "workspace:^", - "enzyme": "^3.11.0", "eslint": "^8.57.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-base": "^15.0.0", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 037cb0e2987..5cd9af24012 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -50,7 +50,7 @@ }, "devDependencies": { "@mui/internal-babel-macros": "^1.0.1", - "@mui/internal-test-utils": "1.0.0-dev.20240529-082515-213b5e33ab", + "@mui/internal-test-utils": "1.0.3", "@testing-library/react": "^15.0.7", "@testing-library/user-event": "^14.5.2", "@types/chai": "^4.3.16", diff --git a/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx b/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx index 8c7bc4821a9..c9eaf7a2717 100644 --- a/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx +++ b/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx @@ -15,7 +15,6 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); it('has role="presentation"', async () => { diff --git a/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx b/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx index f9badc3bb27..a1b75962a62 100644 --- a/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx +++ b/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx @@ -15,6 +15,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx index f4e3cb10e4f..a375ebd9d76 100644 --- a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx +++ b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx @@ -15,6 +15,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx index 48f59b16845..42886490109 100644 --- a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx +++ b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx @@ -16,7 +16,6 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); it('should have role="alertdialog"', async () => { diff --git a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx index d8f41b4fabe..c164da8ab03 100644 --- a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx +++ b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx @@ -15,6 +15,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx b/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx index 513a6d57a2b..f90c8fcac3b 100644 --- a/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx +++ b/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx @@ -15,6 +15,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx b/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx index 2f682d49fbd..c058e42eea6 100644 --- a/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx +++ b/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx @@ -24,7 +24,6 @@ describe('', () => { {node}, ); }, - skip: ['reactTestRenderer'], })); it('should not render indicator by default', () => { diff --git a/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx b/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx index b29002bd2e4..0dd02a95843 100644 --- a/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx +++ b/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx @@ -16,7 +16,6 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); it('has role="presentation"', () => { diff --git a/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx b/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx index 6bc1eabc85e..542b781d143 100644 --- a/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx +++ b/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx @@ -15,6 +15,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx b/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx index 7a9a8df1139..147a614d5a8 100644 --- a/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx +++ b/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx @@ -15,6 +15,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx b/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx index 901afa4a38a..8469627cef4 100644 --- a/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx +++ b/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx @@ -15,7 +15,6 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); describe('prop: keepMounted', () => { diff --git a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx index d31cc84e2a6..a62a2ca467a 100644 --- a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx +++ b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx @@ -54,7 +54,9 @@ describe('', () => { }); }); - describe('prop: modal', () => { + // toWarnDev doesn't work reliably with async rendering. To re-eanble after it's fixed in the test-utils. + // eslint-disable-next-line mocha/no-skipped-tests + describe.skip('prop: modal', () => { it('warns when the dialog is modal but no backdrop is present', async () => { await expect(() => render( diff --git a/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx b/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx index 6470c88d4b2..072dfb20b76 100644 --- a/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx +++ b/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx @@ -15,6 +15,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx b/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx index 3ed1cc81e5c..d13535e1851 100644 --- a/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx +++ b/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx @@ -15,6 +15,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx index f4451f6a5c9..9498db77c41 100644 --- a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx +++ b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx @@ -28,7 +28,6 @@ describe('', () => { {node}, ); }, - skip: ['reactTestRenderer'], })); it('has decrease label', () => { diff --git a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx index fc6ea7a9775..ce0cce6cc68 100644 --- a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx +++ b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx @@ -27,7 +27,6 @@ describe('', () => { {node}, ); }, - skip: ['reactTestRenderer'], })); it('has role prop', () => { diff --git a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx index fe64692216e..4b907fe6057 100644 --- a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx +++ b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx @@ -28,7 +28,6 @@ describe('', () => { {node}, ); }, - skip: ['reactTestRenderer'], })); it('has increase label', () => { diff --git a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx index e1c1a0237a9..ca3f9fed26b 100644 --- a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx +++ b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx @@ -27,7 +27,6 @@ describe('', () => { {node}, ); }, - skip: ['reactTestRenderer'], })); it('has textbox role', () => { diff --git a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx index db97a2ccdc0..07479ef4004 100644 --- a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx +++ b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx @@ -36,7 +36,6 @@ describe('', () => { {node}, ); }, - skip: ['reactTestRenderer'], })); it('has presentation role', () => { diff --git a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx index b5e32317a7d..c1acf088af4 100644 --- a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx +++ b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx @@ -34,7 +34,6 @@ describe('', () => { {node}, ); }, - skip: ['reactTestRenderer'], })); it('has presentation role', () => { diff --git a/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx b/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx index 32c32fa75a0..ea5149d92c8 100644 --- a/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx +++ b/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx @@ -18,6 +18,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx index 9488d64b437..bafeaa43f15 100644 --- a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx +++ b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx @@ -16,6 +16,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx b/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx index a3d927ac55c..e76e7a49db7 100644 --- a/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx +++ b/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx @@ -20,7 +20,6 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); it('should close popover when clicked', async () => { diff --git a/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx b/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx index 26d23fadc04..e874e352a9a 100644 --- a/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx +++ b/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx @@ -20,7 +20,6 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); it('describes the popup element with its id', async () => { diff --git a/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx b/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx index 0cd284952ee..a266fb84625 100644 --- a/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx +++ b/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx @@ -18,7 +18,6 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); it('should render the children', async () => { diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx index 672bb1dc7b8..bdb6770b7c1 100644 --- a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx +++ b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx @@ -16,6 +16,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx index 4b5c09f12fd..8fbe91cd88e 100644 --- a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx +++ b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; import * as Popover from '@base_ui/react/Popover'; -import { act, fireEvent, screen } from '@mui/internal-test-utils'; +import { fireEvent, flushMicrotasks, screen } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { spy } from 'sinon'; import { createRenderer } from '../../../test'; import { OPEN_DELAY } from '../utils/constants'; -const waitForPosition = async () => act(async () => {}); - function Root(props: Popover.RootProps) { return ; } @@ -15,8 +13,8 @@ function Root(props: Popover.RootProps) { describe('', () => { const { render, clock } = createRenderer(); - it('should render the children', () => { - render( + it('should render the children', async () => { + await render( Content , @@ -27,7 +25,7 @@ describe('', () => { describe('uncontrolled open', () => { it('should open when the anchor is clicked', async () => { - render( + await render( @@ -40,13 +38,13 @@ describe('', () => { fireEvent.click(anchor); - await waitForPosition(); + await flushMicrotasks(); expect(screen.getByText('Content')).not.to.equal(null); }); it('should close when the anchor is clicked twice', async () => { - render( + await render( @@ -59,7 +57,7 @@ describe('', () => { fireEvent.click(anchor); - await waitForPosition(); + await flushMicrotasks(); expect(screen.getByText('Content')).not.to.equal(null); @@ -116,7 +114,7 @@ describe('', () => { ); } - render(); + await render(); expect(screen.queryByText('Content')).to.equal(null); @@ -124,7 +122,7 @@ describe('', () => { fireEvent.click(anchor); - await waitForPosition(); + await flushMicrotasks(); expect(screen.getByText('Content')).not.to.equal(null); @@ -158,7 +156,7 @@ describe('', () => { ); } - render(); + await render(); expect(screen.queryByText('Content')).to.equal(null); @@ -166,7 +164,7 @@ describe('', () => { fireEvent.click(anchor); - await waitForPosition(); + await flushMicrotasks(); expect(screen.getByText('Content')).not.to.equal(null); expect(handleChange.callCount).to.equal(1); @@ -238,7 +236,7 @@ describe('', () => { clock.withFakeTimers(); it('should open after delay with rest type by default', async () => { - render( + await render( @@ -252,19 +250,19 @@ describe('', () => { fireEvent.mouseEnter(anchor); fireEvent.mouseMove(anchor); - await waitForPosition(); + await flushMicrotasks(); expect(screen.queryByText('Content')).to.equal(null); clock.tick(100); - await waitForPosition(); + await flushMicrotasks(); expect(screen.getByText('Content')).not.to.equal(null); }); it('should open after delay with hover type', async () => { - render( + await render( @@ -278,13 +276,13 @@ describe('', () => { fireEvent.mouseEnter(anchor); clock.tick(OPEN_DELAY / 2); - await waitForPosition(); + await flushMicrotasks(); expect(screen.queryByText('Content')).to.equal(null); clock.tick(OPEN_DELAY / 2); - await waitForPosition(); + await flushMicrotasks(); expect(screen.getByText('Content')).not.to.equal(null); }); @@ -294,7 +292,7 @@ describe('', () => { clock.withFakeTimers(); it('should close after delay', async () => { - render( + await render( @@ -310,7 +308,7 @@ describe('', () => { clock.tick(OPEN_DELAY); - await waitForPosition(); + await flushMicrotasks(); expect(screen.getByText('Content')).not.to.equal(null); diff --git a/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx b/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx index 6cc738132cb..c08b03c69d3 100644 --- a/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx +++ b/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx @@ -20,7 +20,6 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); it('labels the popup element with its id', async () => { diff --git a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx index c88dbb82bdd..5cf8e23f005 100644 --- a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx +++ b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx @@ -16,6 +16,5 @@ describe('', () => { , ); }, - skip: ['reactTestRenderer'], })); }); diff --git a/packages/mui-base/src/Slider/Control/SliderControl.test.tsx b/packages/mui-base/src/Slider/Control/SliderControl.test.tsx index 581f318436a..62cea7659e7 100644 --- a/packages/mui-base/src/Slider/Control/SliderControl.test.tsx +++ b/packages/mui-base/src/Slider/Control/SliderControl.test.tsx @@ -65,8 +65,5 @@ describe('', () => { return { container, ...other }; }, refInstanceof: window.HTMLSpanElement, - skip: [ - 'reactTestRenderer', // Need to be wrapped with SliderProvider - ], })); }); diff --git a/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx b/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx index 5e1526e1a8e..c1175c09436 100644 --- a/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx +++ b/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx @@ -65,8 +65,5 @@ describe('', () => { return { container, ...other }; }, refInstanceof: window.HTMLSpanElement, - skip: [ - 'reactTestRenderer', // Need to be wrapped with SliderProvider - ], })); }); diff --git a/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx b/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx index a354e4a8b4b..4167c40d915 100644 --- a/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx +++ b/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx @@ -66,9 +66,6 @@ describe('', () => { return { container, ...other }; }, refInstanceof: window.HTMLOutputElement, - skip: [ - 'reactTestRenderer', // Need to be wrapped with SliderProvider - ], })); it('renders a single value', () => { diff --git a/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx b/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx index 5d57e3b3226..22376a55f79 100644 --- a/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx +++ b/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx @@ -65,8 +65,5 @@ describe('', () => { return { container, ...other }; }, refInstanceof: window.HTMLSpanElement, - skip: [ - 'reactTestRenderer', // Need to be wrapped with SliderProvider - ], })); }); diff --git a/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx b/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx index 07d6ca49df8..0e6467bcfae 100644 --- a/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx +++ b/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx @@ -65,8 +65,5 @@ describe('', () => { return { container, ...other }; }, refInstanceof: window.HTMLSpanElement, - skip: [ - 'reactTestRenderer', // Need to be wrapped with SliderProvider - ], })); }); diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx index c124dcae6c9..63154f0eaa9 100644 --- a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx +++ b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { createRenderer, act } from '@mui/internal-test-utils'; +import { act } from '@mui/internal-test-utils'; import * as Switch from '@base_ui/react/Switch'; -import { describeConformance } from '../../../test/describeConformance'; +import { userEvent } from '@testing-library/user-event'; +import { describeConformance, createRenderer } from '../../../test'; describe('', () => { const { render } = createRenderer(); @@ -15,20 +16,20 @@ describe('', () => { })); describe('interaction', () => { - it('should change its state when clicked', () => { - const { getByRole } = render(); + it('should change its state when clicked', async () => { + const { getByRole } = await render(); const switchElement = getByRole('switch'); expect(switchElement).to.have.attribute('aria-checked', 'false'); - act(() => { + await act(() => { switchElement.click(); }); expect(switchElement).to.have.attribute('aria-checked', 'true'); }); - it('should update its state when changed from outside', () => { + it('should update its state when changed from outside', async () => { function Test() { const [checked, setChecked] = React.useState(false); return ( @@ -39,30 +40,30 @@ describe('', () => { ); } - const { getByRole, getByText } = render(); + const { getByRole, getByText } = await render(); const switchElement = getByRole('switch'); const button = getByText('Toggle'); expect(switchElement).to.have.attribute('aria-checked', 'false'); - act(() => { + await act(() => { button.click(); }); expect(switchElement).to.have.attribute('aria-checked', 'true'); - act(() => { + await act(() => { button.click(); }); expect(switchElement).to.have.attribute('aria-checked', 'false'); }); - it('should update its state if the underlying input is toggled', () => { - const { getByRole, container } = render(); + it('should update its state if the underlying input is toggled', async () => { + const { getByRole, container } = await render(); const switchElement = getByRole('switch'); const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement; - act(() => { + await act(() => { internalInput.click(); }); @@ -71,20 +72,20 @@ describe('', () => { }); describe('extra props', () => { - it('should override the built-in attributes', () => { - const { container } = render(); + it('should override the built-in attributes', async () => { + const { container } = await render(); expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'checkbox'); expect(container.firstElementChild as HTMLElement).to.have.attribute('data-state', 'checked'); }); }); describe('prop: onChange', () => { - it('should call onChange when clicked', () => { + it('should call onChange when clicked', async () => { const handleChange = spy(); - const { getByRole } = render(); + const { getByRole } = await render(); const switchElement = getByRole('switch'); - act(() => { + await act(() => { switchElement.click(); }); @@ -94,12 +95,12 @@ describe('', () => { }); describe('prop: onClick', () => { - it('should call onClick when clicked', () => { + it('should call onClick when clicked', async () => { const handleClick = spy(); - const { getByRole } = render(); + const { getByRole } = await render(); const switchElement = getByRole('switch'); - act(() => { + await act(() => { switchElement.click(); }); @@ -108,23 +109,23 @@ describe('', () => { }); describe('prop: disabled', () => { - it('should have the `aria-disabled` attribute', () => { - const { getByRole } = render(); + it('should have the `aria-disabled` attribute', async () => { + const { getByRole } = await render(); expect(getByRole('switch')).to.have.attribute('aria-disabled', 'true'); }); - it('should not have the aria attribute when `disabled` is not set', () => { - const { getByRole } = render(); + it('should not have the aria attribute when `disabled` is not set', async () => { + const { getByRole } = await render(); expect(getByRole('switch')).not.to.have.attribute('aria-disabled'); }); - it('should not change its state when clicked', () => { - const { getByRole } = render(); + it('should not change its state when clicked', async () => { + const { getByRole } = await render(); const switchElement = getByRole('switch'); expect(switchElement).to.have.attribute('aria-checked', 'false'); - act(() => { + await act(() => { switchElement.click(); }); @@ -133,23 +134,23 @@ describe('', () => { }); describe('prop: readOnly', () => { - it('should have the `aria-readonly` attribute', () => { - const { getByRole } = render(); + it('should have the `aria-readonly` attribute', async () => { + const { getByRole } = await render(); expect(getByRole('switch')).to.have.attribute('aria-readonly', 'true'); }); - it('should not have the aria attribute when `readOnly` is not set', () => { - const { getByRole } = render(); + it('should not have the aria attribute when `readOnly` is not set', async () => { + const { getByRole } = await render(); expect(getByRole('switch')).not.to.have.attribute('aria-readonly'); }); - it('should not change its state when clicked', () => { - const { getByRole } = render(); + it('should not change its state when clicked', async () => { + const { getByRole } = await render(); const switchElement = getByRole('switch'); expect(switchElement).to.have.attribute('aria-checked', 'false'); - act(() => { + await act(() => { switchElement.click(); }); @@ -158,9 +159,9 @@ describe('', () => { }); describe('prop: inputRef', () => { - it('should be able to access the native input', () => { + it('should be able to access the native input', async () => { const inputRef = React.createRef(); - const { container } = render(); + const { container } = await render(); const internalInput = container.querySelector('input[type="checkbox"]')!; expect(inputRef.current).to.equal(internalInput); @@ -168,10 +169,10 @@ describe('', () => { }); describe('form handling', () => { - // TODO: when a label is clicked, mocha throws an error in unrelated tests. Uncomment when fixed or another test runner is used. - // eslint-disable-next-line mocha/no-skipped-tests - it.skip('should toggle the switch when a parent label is clicked', () => { - const { getByTestId, getByRole } = render( + const user = userEvent.setup(); + + it('should toggle the switch when a parent label is clicked', async () => { + const { getByTestId, getByRole } = await render(