React 17

.eslintrc

@@ -55,18 +55,7 @@
     "jsx-a11y/mouse-events-have-key-events": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-noninteractive-element-interactions": "off",
-    "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "test-utilities/legacy",
-            "message": "Please import the modern testing library from 'test-utilities' instead"
-          }
-        ]
-      }
-    ]
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": "off"
   },
   "overrides": [
     {

UNRELEASED-v7.md

@@ -19,6 +19,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Added support for multi-sectioned options in `Autocomplete` [#4221](https://github.com/Shopify/polaris-react/pull/4221)
 - Added `wrapOverflow` prop to `AutocompleteProps` props to force text-breakword ([#4416](https://github.com/Shopify/polaris-react/pull/4416))
+- Added support for React 17 ([#4432](https://github.com/Shopify/polaris-react/pull/4432))
 
 ### Bug fixes
 

package.json

@@ -76,17 +76,17 @@
   "dependencies": {
     "@shopify/polaris-icons": "^4.1.0",
     "@shopify/polaris-tokens": "^3.0.0",
-    "@types/react": "^16.14.8",
-    "@types/react-dom": "^16.9.13",
-    "@types/react-transition-group": "^4.4.0",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-transition-group": "^4.4.2",
     "focus-visible": "^5.2.0",
     "lodash": "^4.17.4",
-    "react-transition-group": "^4.4.1",
+    "react-transition-group": "^4.4.2",
     "serve": "^12.0.0"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^16.14.0 || ^17.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
@@ -120,8 +120,6 @@
     "@storybook/addon-essentials": "^6.3.7",
     "@storybook/addon-knobs": "^6.3.0",
     "@storybook/react": "^6.3.7",
-    "@types/enzyme": "^3.10.3",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/lodash": "^4.14.138",
     "@types/node": "^12.7.5",
     "@types/scss-parser": "^1.0.0",
@@ -134,23 +132,20 @@
     "core-js": "^3.6.5",
     "create-file-webpack": "^1.0.2",
     "downlevel-dts": "^0.6.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
     "fs-extra": "^7.0.1",
     "glob": "^7.1.4",
     "gray-matter": "^4.0.2",
     "marked": "^0.7.0",
-    "mutationobserver-shim": "^0.3.3",
     "node-cmd": "^3.0.0",
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
     "object-hash": "^1.3.1",
     "postcss": "^7.0.18",
     "postcss-modules": "^3.1.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-is": "^16.7.2",
-    "react-test-renderer": "^16.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.0",
     "sass-loader": "^8.0.0",
     "scss-parser": "^1.0.3",

src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx

@@ -98,10 +98,7 @@ export class ConnectedFilterControl extends Component<
 
     const rightMarkup =
       actionsToRender.length > 0 ? (
-        <div
-          className={RightContainerClassName}
-          testID="FilterShortcutContainer"
-        >
+        <div className={RightContainerClassName}>
           {this.popoverFrom(actionsToRender)}
         </div>
       ) : null;

src/components/Frame/components/Toast/Toast.tsx

@@ -48,12 +48,7 @@ export function Toast({
   }, [action, duration, onDismiss]);
 
   const dismissMarkup = (
-    <button
-      type="button"
-      className={styles.CloseButton}
-      onClick={onDismiss}
-      testID="closeButton"
-    >
+    <button type="button" className={styles.CloseButton} onClick={onDismiss}>
       <Icon source={MobileCancelMajor} />
     </button>
   );

src/components/Modal/components/Dialog/Dialog.tsx

@@ -75,11 +75,7 @@ export function Dialog({
             className={styles.Dialog}
           >
             <div className={classes}>
-              <KeypressListener
-                keyCode={Key.Escape}
-                handler={onClose}
-                testID="CloseKeypressListener"
-              />
+              <KeypressListener keyCode={Key.Escape} handler={onClose} />
               {children}
             </div>
           </div>

src/components/Navigation/components/Section/Section.tsx

@@ -119,7 +119,6 @@ export function Section({
         className={toggleClassName}
         onClick={toggleExpanded}
         aria-label={ariaLabel}
-        testID="ToggleViewAll"
       >
         <span className={styles.Icon}>
           <Icon source={HorizontalDotsMinor} />

src/components/Navigation/components/Section/tests/Section.test.tsx

@@ -138,7 +138,9 @@ describe('<Navigation.Section />', () => {
       {...context},
     );
 
-    channels.find('button', {testID: 'ToggleViewAll'})!.trigger('onClick');
+    channels
+      .find('button', {className: 'Item RollupToggle'})!
+      .trigger('onClick');
     channels.find('a')!.trigger('onClick', {
       preventDefault: noop,
       currentTarget: {
@@ -185,7 +187,9 @@ describe('<Navigation.Section />', () => {
       },
     );
 
-    withSubNav.find('button', {testID: 'ToggleViewAll'})!.trigger('onClick');
+    withSubNav
+      .find('button', {className: 'Item RollupToggle'})!
+      .trigger('onClick');
     withSubNav.find(Item, {url: '/other'})!.trigger('onClick');
 
     expect(withSubNav).toContainReactComponent(Collapsible, {open: true});
@@ -206,7 +210,7 @@ describe('<Navigation.Section />', () => {
     );
 
     expect(channels).toContainReactComponent('button', {
-      testID: 'ToggleViewAll',
+      className: 'Item RollupToggle',
     });
   });
 

src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx

@@ -147,7 +147,6 @@ export class PopoverOverlay extends PureComponent<PopoverOverlayProps, State> {
     return (
       <PositionedOverlay
         ref={this.overlayRef}
-        testID="positionedOverlay"
         fullWidth={fullWidth}
         active={active}
         activator={activator}

src/components/Popover/tests/Popover.test.tsx

@@ -67,13 +67,9 @@ describe('<Popover />', () => {
 
   it('renders an activator', () => {
     const popover = mountWithApp(
-      <Popover
-        active
-        activator={<div testID="activator">Activator</div>}
-        onClose={spy}
-      />,
+      <Popover active activator={<div>Activator</div>} onClose={spy} />,
     );
-    expect(popover).toContainReactComponent('div', {testID: 'activator'});
+    expect(popover).toContainReactComponent('div', {children: 'Activator'});
   });
 
   it('renders a positionedOverlay when active is true', () => {

src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx

@@ -120,7 +120,6 @@ export function FilterCreator({
     <Button
       onClick={togglePopoverActive}
       disclosure
-      testID="FilterCreator-FilterActivator"
       disabled={disabled}
       onFocus={handleButtonFocus}
     >
@@ -144,11 +143,7 @@ export function FilterCreator({
   ) : null;
 
   const addFilterButtonMarkup = selectedFilter ? (
-    <Button
-      onClick={handleAddFilter}
-      disabled={!canAddFilter}
-      testID="FilterCreator-AddFilterButton"
-    >
+    <Button onClick={handleAddFilter} disabled={!canAddFilter}>
       {i18n.translate(
         'Polaris.ResourceList.FilterCreator.addFilterButtonLabel',
       )}

src/components/TextField/TextField.tsx

@@ -279,7 +279,6 @@ export function TextField({
     clearButtonVisible && clearButton ? (
       <button
         type="button"
-        testID="clearButton"
         className={styles.ClearButton}
         onClick={handleClearButtonPress}
         disabled={disabled}

src/components/Tooltip/Tooltip.tsx

@@ -89,7 +89,6 @@ export function Tooltip({
 
   return (
     <WrapperComponent
-      testID="WrapperComponent"
       onFocus={handleFocus}
       onBlur={handleBlur}
       onMouseLeave={handleMouseLeave}

src/components/TopBar/TopBar.tsx

@@ -92,9 +92,7 @@ export const TopBar: React.FunctionComponent<TopBarProps> & {
 
   if (contextControl) {
     contextMarkup = (
-      <div testID="ContextControl" className={styles.ContextControl}>
-        {contextControl}
-      </div>
+      <div className={styles.ContextControl}>{contextControl}</div>
     );
   } else if (logo) {
     const className = classNames(

tests/setup/environment.ts

@@ -1,9 +1,4 @@
-import {configure} from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import 'mutationobserver-shim';
-
-configure({adapter: new Adapter()});
-
+export {};
 // Mocks for scrolling
 window.scroll = () => {};