diff --git a/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js b/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js index 0cd954a2d8112..1768ec14ea9e0 100644 --- a/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js @@ -11,31 +11,37 @@ describe('ReactDOMInvalidARIAHook', () => { let React; - let ReactTestUtils; + let ReactDOMClient; let mountComponent; + let act; beforeEach(() => { jest.resetModules(); React = require('react'); - ReactTestUtils = require('react-dom/test-utils'); + ReactDOMClient = require('react-dom/client'); + act = require('internal-test-utils').act; - mountComponent = function (props) { - ReactTestUtils.renderIntoDocument(
); + mountComponent = async function (props) { + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(
); + }); }; }); describe('aria-* props', () => { - it('should allow valid aria-* props', () => { - mountComponent({'aria-label': 'Bumble bees'}); + it('should allow valid aria-* props', async () => { + await mountComponent({'aria-label': 'Bumble bees'}); }); - it('should warn for one invalid aria-* prop', () => { - expect(() => mountComponent({'aria-badprop': 'maybe'})).toErrorDev( + it('should warn for one invalid aria-* prop', async () => { + await expect(() => mountComponent({'aria-badprop': 'maybe'})).toErrorDev( 'Warning: Invalid aria prop `aria-badprop` on
tag. ' + 'For details, see https://reactjs.org/link/invalid-aria-props', ); }); - it('should warn for many invalid aria-* props', () => { - expect(() => + it('should warn for many invalid aria-* props', async () => { + await expect(() => mountComponent({ 'aria-badprop': 'Very tall trees', 'aria-malprop': 'Turbulent seas', @@ -45,25 +51,27 @@ describe('ReactDOMInvalidARIAHook', () => { 'tag. For details, see https://reactjs.org/link/invalid-aria-props', ); }); - it('should warn for an improperly cased aria-* prop', () => { + it('should warn for an improperly cased aria-* prop', async () => { // The valid attribute name is aria-haspopup. - expect(() => mountComponent({'aria-hasPopup': 'true'})).toErrorDev( + await expect(() => mountComponent({'aria-hasPopup': 'true'})).toErrorDev( 'Warning: Unknown ARIA attribute `aria-hasPopup`. ' + 'Did you mean `aria-haspopup`?', ); }); - it('should warn for use of recognized camel case aria attributes', () => { + it('should warn for use of recognized camel case aria attributes', async () => { // The valid attribute name is aria-haspopup. - expect(() => mountComponent({ariaHasPopup: 'true'})).toErrorDev( + await expect(() => mountComponent({ariaHasPopup: 'true'})).toErrorDev( 'Warning: Invalid ARIA attribute `ariaHasPopup`. ' + 'Did you mean `aria-haspopup`?', ); }); - it('should warn for use of unrecognized camel case aria attributes', () => { + it('should warn for use of unrecognized camel case aria attributes', async () => { // The valid attribute name is aria-haspopup. - expect(() => mountComponent({ariaSomethingInvalid: 'true'})).toErrorDev( + await expect(() => + mountComponent({ariaSomethingInvalid: 'true'}), + ).toErrorDev( 'Warning: Invalid ARIA attribute `ariaSomethingInvalid`. ARIA ' + 'attributes follow the pattern aria-* and must be lowercase.', );