test: Run with React 18

package.json

@@ -85,8 +85,7 @@
     "@storybook/react": "^6.1.10",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^3.4.1",
+    "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/0f93c987/@testing-library/react",
     "@testing-library/user-event": "^12.1.3",
     "@types/react": "^16.9.23",
     "@types/storybook__react": "^5.2.1",
@@ -151,9 +150,9 @@
     "postcss-svg": "^3.0.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1",
+    "react": "18.0.0-alpha-ee069065d-20211105",
     "react-axe": "^3.0.2",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1",
+    "react-dom": "18.0.0-alpha-ee069065d-20211105",
     "react-overlays": "0.8.3",
     "react-test-renderer": "^16.9.0",
     "recursive-readdir": "^2.2.2",

packages/@react-aria/actiongroup/test/useActionGroup.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useActionGroup} from '../';
 import {useListState} from '@react-stately/list';
 

packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js

@@ -13,7 +13,7 @@
 import {Item} from '@react-stately/collections';
 import {ListLayout} from '@react-stately/layout';
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useComboBoxState} from '@react-stately/combobox';
 import {useSearchAutocomplete} from '../';
 import {useSingleSelectListState} from '@react-stately/list';

packages/@react-aria/breadcrumbs/test/useBreadcrumbItem.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useBreadcrumbItem} from '../';
 
 describe('useBreadcrumbItem', function () {

packages/@react-aria/breadcrumbs/test/useBreadcrumbs.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useBreadcrumbs} from '../';
 
 describe('useBreadcrumbs', function () {

packages/@react-aria/button/test/useButton.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useButton} from '../';
 
 describe('useButton tests', function () {

packages/@react-aria/color/test/useColorField.test.js

@@ -12,7 +12,7 @@
 
 import {parseColor} from '@react-stately/color';
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useColorField} from '../';
 
 describe('useColorField', function () {

packages/@react-aria/combobox/test/useComboBox.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, renderHook} from '@testing-library/react-hooks';
+import {act, renderHook} from '@testing-library/react';
 import {Item} from '@react-stately/collections';
 import {ListLayout} from '@react-stately/layout';
 import React from 'react';
@@ -77,10 +77,7 @@ describe('useComboBox', function () {
       popoverRef: React.createRef(),
       buttonRef: React.createRef(),
       inputRef: {
-        current: {
-          contains: jest.fn(),
-          focus: jest.fn()
-        }
+        current: document.createElement('input')
       },
       listBoxRef: React.createRef(),
       layout: mockLayout

packages/@react-aria/interactions/test/useFocusVisible.test.js

@@ -11,7 +11,7 @@
  */
 import {act, fireEvent, render, screen} from '@testing-library/react';
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useFocusVisible, useFocusVisibleListener} from '../';
 
 function Example(props) {

packages/@react-aria/interactions/test/useHover.test.js

@@ -548,9 +548,9 @@ describe('useHover', function () {
       // Ensure we close any dialogs before unmounting to avoid warning.
       let dialog = document.querySelector('[role="dialog"]');
       if (dialog) {
+        fireEvent.keyDown(dialog, {key: 'Escape'});
+        fireEvent.keyUp(dialog, {key: 'Escape'});
         act(() => {
-          fireEvent.keyDown(dialog, {key: 'Escape'});
-          fireEvent.keyUp(dialog, {key: 'Escape'});
           jest.runAllTimers();
         });
       }

packages/@react-aria/interactions/test/usePress.test.js

@@ -2367,9 +2367,9 @@ describe('usePress', function () {
       // Ensure we close any dialogs before unmounting to avoid warning.
       let dialog = document.querySelector('[role="dialog"]');
       if (dialog) {
+        fireEvent.keyDown(dialog, {key: 'Escape'});
+        fireEvent.keyUp(dialog, {key: 'Escape'});
         act(() => {
-          fireEvent.keyDown(dialog, {key: 'Escape'});
-          fireEvent.keyUp(dialog, {key: 'Escape'});
           jest.runAllTimers();
         });
       }

packages/@react-aria/label/test/useField.test.js

@@ -12,7 +12,7 @@
 
 import React from 'react';
 import {render} from '@testing-library/react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useField} from '../';
 import {WithError} from '../stories/useField.stories';
 

packages/@react-aria/label/test/useLabel.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useLabel} from '../';
 
 describe('useLabel hook', () => {

packages/@react-aria/link/test/useLink.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useLink} from '../';
 
 describe('useLink', function () {

packages/@react-aria/menu/test/useMenuTrigger.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useMenuTrigger} from '../';
 
 describe('useMenuTrigger', function () {

packages/@react-aria/pagination/test/usePagination.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {usePagination} from '../';
 
 describe('usePagination tests', function () {

packages/@react-aria/progress/test/useProgressBar.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useProgressBar} from '../';
 
 describe('useProgressBar', function () {

packages/@react-aria/searchfield/test/useSearchField.test.js

@@ -14,7 +14,7 @@
 import intlMessages from '../intl/*.json';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {theme} from '@react-spectrum/theme-default';
 import {useSearchField} from '../';
 

packages/@react-aria/sidenav/test/useSideNav.test.js

@@ -12,7 +12,7 @@
 
 import {ListLayout} from '@react-stately/layout';
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useSideNav} from '../';
 
 describe('useSideNav', function () {

packages/@react-aria/sidenav/test/useSideNavItem.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useSideNavItem} from '../';
 
 describe('useSideNavItem', function () {

packages/@react-aria/slider/test/useSlider.test.js

@@ -1,7 +1,7 @@
 import {fireEvent, render, screen} from '@testing-library/react';
 import {installMouseEvent, installPointerEvent} from '@react-spectrum/test-utils';
 import * as React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useRef} from 'react';
 import {useSlider, useSliderThumb} from '../src';
 import {useSliderState} from '@react-stately/slider';

packages/@react-aria/slider/test/useSliderThumb.test.js

@@ -1,7 +1,7 @@
 import {fireEvent, render, screen} from '@testing-library/react';
 import {installMouseEvent, installPointerEvent} from '@react-spectrum/test-utils';
 import * as React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useRef} from 'react';
 import {useSlider, useSliderThumb} from '../src';
 import {useSliderState} from '@react-stately/slider';

packages/@react-aria/tag/test/useTag.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useTag} from '../';
 
 describe('useTag tests', () => {

packages/@react-aria/textfield/test/useTextField.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useTextField} from '../';
 
 describe('useTextField hook', () => {

packages/@react-aria/toast/test/useToast.test.js

@@ -14,7 +14,7 @@
 import intlMessages from '../intl/*.json';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {theme} from '@react-spectrum/theme-default';
 import {useToast} from '../';
 

packages/@react-aria/utils/test/useObjectRef.test.js

@@ -12,7 +12,7 @@
 
 import React, {useEffect, useLayoutEffect} from 'react';
 import {render, screen} from '@testing-library/react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 import {useObjectRef} from '../';
 
 describe('useObjectRef', () => {