Commands to run tests and storybook in StrictMode (#3241)

* strict mode work in progress

* move import from testing-library to test-utils

IMO better to have a single place to import all of out test utils, makes it easier to keep track

* making storybook handle strict mode via options

* revert change to storybook config

Author: LFDanLu

.storybook/custom-addons/provider/index.js

@@ -1,12 +1,8 @@
 import React, {useEffect, useState} from 'react';
-import {ActionButton} from '@react-spectrum/button';
 import addons, { makeDecorator } from '@storybook/addons';
-import {Content} from '@react-spectrum/view';
 import {getQueryParams} from '@storybook/client-api';
 import {Provider} from '@react-spectrum/provider';
-import {Text} from '@react-spectrum/text';
 import {themes, defaultTheme} from '../../constants';
-import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 
 document.body.style.margin = '0';
 
@@ -48,29 +44,13 @@ function ProviderUpdater(props) {
     return (
       <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue} toastPlacement={toastPositionValue}>
         <main>
-          <div style={{position: 'absolute', paddingTop: '20px', paddingLeft: '20px', paddingRight: '20px'}}>
-            {props.context.parameters.note && (<DialogTrigger type="popover">
-              <ActionButton>Note</ActionButton>
-              <Dialog>
-                <Content><Text>{props.context.parameters.note}</Text></Content>
-              </Dialog>
-            </DialogTrigger>)}
-          </div>
           {storyReady && props.children}
         </main>
       </Provider>
     );
   } else {
     return (
       <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue} toastPlacement={toastPositionValue}>
-        <div style={{position: 'absolute', paddingTop: '20px', paddingLeft: '20px', paddingRight: '20px'}}>
-          {props.context.parameters.note && (<DialogTrigger type="popover">
-            <ActionButton>Note</ActionButton>
-            <Dialog>
-              <Content><Text>{props.context.parameters.note}</Text></Content>
-            </Dialog>
-          </DialogTrigger>)}
-        </div>
         {storyReady && props.children}
       </Provider>
     );

.storybook/main.js

@@ -36,5 +36,8 @@ module.exports = {
     }
 
     return resultConfig;
-  }
+  },
+  reactOptions: {
+    strictMode: process.env.STRICT_MODE
+  },
 };

package.json

@@ -12,6 +12,7 @@
     "install-16": "yarn add -W react@^16.8.0 react-dom@^16.8.0 @testing-library/react@^12 @testing-library/react-hooks@^8",
     "install-17": "yarn add -W react@^17 react-dom@^17 @testing-library/react@^12 @testing-library/react-hooks@^8",
     "start": "cross-env NODE_ENV=storybook start-storybook -p 9003 --ci -c '.storybook'",
+    "start-strict": "cross-env NODE_ENV=storybook STRICT_MODE=1 start-storybook -p 9003 --ci -c '.storybook'",
     "build:storybook": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook",
     "build:storybook-16": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-16",
     "build:storybook-17": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-17",
@@ -20,6 +21,7 @@
     "start:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
     "build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
     "test": "yarn jest",
+    "test-strict": "cross-env STRICT_MODE=1 yarn jest",
     "build": "make build",
     "test:ssr": "yarn jest --config jest.ssr.config.js",
     "ci-test": "yarn jest --maxWorkers=2 && yarn test:ssr --runInBand",

packages/@adobe/react-spectrum/test/ActionGroup.test.tsx

@@ -13,7 +13,7 @@
 import {ActionGroup, Item} from '../';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
-import {render} from '@testing-library/react';
+import {render} from '@react-spectrum/test-utils';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium-unique.css';
 import themeLight from '@adobe/spectrum-css-temp/vars/spectrum-light-unique.css';
 

packages/@react-aria/aria-modal-polyfill/test/index.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, render, waitFor} from '@testing-library/react';
+import {act, fireEvent, render, triggerPress, waitFor} from '@react-spectrum/test-utils';
 import {ActionButton, Button} from '@react-spectrum/button';
 import {Content} from '@react-spectrum/view';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
@@ -19,7 +19,6 @@ import MatchMediaMock from 'jest-matchmedia-mock';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
-import {triggerPress} from '@react-spectrum/test-utils';
 import {watchModals} from '../';
 
 describe('watchModals', () => {

packages/@react-aria/calendar/test/useCalendar.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, render} from '@testing-library/react';
+import {act, fireEvent, render} from '@react-spectrum/test-utils';
 import {CalendarDate} from '@internationalized/date';
 import {Example} from '../stories/Example';
 import React from 'react';

packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, render} from '@testing-library/react';
+import {act, render} from '@react-spectrum/test-utils';
 import {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps} from '@react-types/checkbox';
 import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox';
 import React, {useRef} from 'react';

packages/@react-aria/color/test/useColorWheel.test.tsx

@@ -10,9 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, render} from '@testing-library/react';
+import {act, fireEvent, installMouseEvent, installPointerEvent, render} from '@react-spectrum/test-utils';
 import {ColorWheelProps} from '@react-types/color';
-import {installMouseEvent, installPointerEvent} from '@react-spectrum/test-utils';
 import {parseColor, useColorWheelState} from '@react-stately/color';
 import React, {useRef} from 'react';
 import {useColorWheel} from '../';

packages/@react-aria/dialog/test/useDialog.test.js

@@ -11,7 +11,7 @@
  */
 
 import React, {useRef} from 'react';
-import {render} from '@testing-library/react';
+import {render} from '@react-spectrum/test-utils';
 import {useDialog} from '../';
 
 function Example(props) {

packages/@react-aria/dnd/test/dnd.test.js

@@ -11,7 +11,7 @@
  */
 
 jest.mock('@react-aria/live-announcer');
-import {act, fireEvent, render} from '@testing-library/react';
+import {act, fireEvent, render} from '@react-spectrum/test-utils';
 import {announce} from '@react-aria/live-announcer';
 import {CUSTOM_DRAG_TYPE} from '../src/constants';
 import {DataTransfer, DataTransferItem, DragEvent, FileSystemDirectoryEntry, FileSystemFileEntry} from './mocks';