Updating testing documentation and exposing some testing utils

jest.ssr.config.js

@@ -36,8 +36,8 @@ module.exports = {
 
   testTimeout: 30000,
 
-  globalSetup: require.resolve('@react-spectrum/test-utils/src/ssrSetup'),
-  globalTeardown: require.resolve('@react-spectrum/test-utils/src/ssrTeardown'),
+  globalSetup: require.resolve('@react-spectrum/test-utils-internal/src/ssrSetup'),
+  globalTeardown: require.resolve('@react-spectrum/test-utils-internal/src/ssrTeardown'),
 
   // The test environment that will be used for testing
   testEnvironment: 'jsdom',

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 '@react-spectrum/test-utils';
+import {render} from '@react-spectrum/test-utils-internal';
 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/actiongroup/test/useActionGroup.test.ts

@@ -12,7 +12,7 @@
 
 import {createRef} from 'react';
 import {FocusableElement} from '@react-types/shared';
-import {renderHook} from '@react-spectrum/test-utils';
+import {renderHook} from '@react-spectrum/test-utils-internal';
 import {useActionGroup} from '../';
 import {useListState} from '@react-stately/list';
 

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

@@ -10,18 +10,22 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, render, triggerPress, waitFor} from '@react-spectrum/test-utils';
+import {act, pointerMap, render, simulateMobile, waitFor} from '@react-spectrum/test-utils-internal';
 import {ActionButton, Button} from '@react-spectrum/button';
 import {Content} from '@react-spectrum/view';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Item, Menu, MenuTrigger, Section} from '@react-spectrum/menu';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
+import userEvent from '@testing-library/user-event';
 import {watchModals} from '../';
 
 describe('watchModals', () => {
+  let user;
+
   beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
     jest.useFakeTimers();
   });
 
@@ -44,9 +48,7 @@ describe('watchModals', () => {
     expect(queryByRole('separator')).toBeNull();
 
     expect(document.activeElement).toBe(modal);
-
-    fireEvent.keyDown(modal, {key: 'Escape'});
-    fireEvent.keyUp(modal, {key: 'Escape'});
+    await user.keyboard('{Escape}');
 
     act(() => {
       jest.runAllTimers();
@@ -73,9 +75,7 @@ describe('watchModals', () => {
       </>
     );
     expect(getByRole('separator')).toBeVisible();
-    act(() => {
-      triggerPress(getByLabelText('Trigger'));
-    });
+    await user.click(getByLabelText('Trigger'));
     act(() => {
       jest.runAllTimers();
     });
@@ -106,9 +106,7 @@ describe('watchModals', () => {
     );
     // expect just the button labeled Trigger, and open the first dialog
     expect(getByRole('separator')).toBeVisible();
-    act(() => {
-      triggerPress(getByLabelText('Trigger'));
-    });
+    await user.click(getByLabelText('Trigger'));
     act(() => {
       jest.runAllTimers();
     });
@@ -123,9 +121,7 @@ describe('watchModals', () => {
     let buttons = getAllByRole('button');
     expect(buttons.length).toBe(1);
     expect(buttons[0]).toBe(getByLabelText('Nested Trigger'));
-    act(() => {
-      triggerPress(getByLabelText('Nested Trigger'));
-    });
+    await user.click(getByLabelText('Nested Trigger'));
     act(() => {
       jest.runAllTimers();
     });
@@ -139,8 +135,8 @@ describe('watchModals', () => {
     expect(queryByRole('separator')).toBeNull();
 
     // start closing dialogs
-    fireEvent.keyDown(innerDialog, {key: 'Escape'});
-    fireEvent.keyUp(innerDialog, {key: 'Escape'});
+    await user.keyboard('{Escape}');
+
     act(() => {
       jest.runAllTimers();
     });
@@ -155,8 +151,7 @@ describe('watchModals', () => {
     expect(queryByRole('separator')).toBeNull();
 
     // close the outer dialog
-    fireEvent.keyDown(dialog, {key: 'Escape'});
-    fireEvent.keyUp(dialog, {key: 'Escape'});
+    await user.keyboard('{Escape}');
     act(() => {
       jest.runAllTimers();
     });
@@ -196,9 +191,8 @@ describe('watchModals', () => {
       </>
     );
     expect(getByRole('separator')).toBeVisible();
-    act(() => {
-      triggerPress(getByLabelText('Trigger'));
-    });
+    await user.click(getByLabelText('Trigger'));
+
     act(() => {
       jest.runAllTimers();
     });
@@ -215,7 +209,7 @@ describe('watchModals', () => {
       ]}
     ];
     // menu should be a tray
-    jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 700);
+    simulateMobile();
     watchModals();
     let {getByLabelText, getByRole, queryByRole} = render(
       <>
@@ -235,9 +229,7 @@ describe('watchModals', () => {
       </>
     );
     expect(getByRole('separator')).toBeVisible();
-    act(() => {
-      triggerPress(getByLabelText('Trigger'));
-    });
+    await user.click(getByLabelText('Trigger'));
     act(() => {
       jest.runAllTimers();
     });
@@ -259,9 +251,7 @@ describe('watchModals', () => {
       </>
     );
     expect(getByRole('separator')).toBeVisible();
-    act(() => {
-      triggerPress(getByLabelText('Trigger'));
-    });
+    await user.click(getByLabelText('Trigger'));
     act(() => {
       jest.runAllTimers();
     });

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 '@react-spectrum/test-utils';
+import {renderHook} from '@react-spectrum/test-utils-internal';
 import {useComboBoxState} from '@react-stately/combobox';
 import {useSearchAutocomplete} from '../';
 

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

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@react-spectrum/test-utils';
+import {renderHook} from '@react-spectrum/test-utils-internal';
 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 '@react-spectrum/test-utils';
+import {renderHook} from '@react-spectrum/test-utils-internal';
 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 '@react-spectrum/test-utils';
+import {renderHook} from '@react-spectrum/test-utils-internal';
 import {useButton} from '../';
 
 describe('useButton tests', function () {

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

@@ -10,14 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, render} from '@react-spectrum/test-utils';
+import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
 import {CalendarDate} from '@internationalized/date';
 import {Example} from '../stories/Example';
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 
 describe('useCalendar', () => {
+  let user;
   beforeAll(() => {
     jest.useFakeTimers();
+    user = userEvent.setup({delay: null, pointerMap});
   });
 
   afterEach(() => {
@@ -36,8 +39,15 @@ describe('useCalendar', () => {
     expect(document.activeElement).toBe(cell);
 
     for (let i = 0; i < count; i++) {
-      fireEvent.keyDown(document.activeElement, {key, ...opts});
-      fireEvent.keyUp(document.activeElement, {key, ...opts});
+      if (opts?.shiftKey) {
+        await user.keyboard('{Shift>}');
+      }
+
+      await user.keyboard(`{${key}}`);
+
+      if (opts?.shiftKey) {
+        await user.keyboard('{/Shift}');
+      }
     }
 
     cell = getByLabelText(value, {exact: false});
@@ -142,21 +152,19 @@ describe('useCalendar', () => {
     });
   });
 
-  function testPagination(defaultValue, rangeBefore, rangeAfter, rel, count,  visibleDuration, pageBehavior) {
+  async function testPagination(defaultValue, rangeBefore, rangeAfter, rel, count,  visibleDuration, pageBehavior) {
     let {getByTestId, getByLabelText, unmount} = render(<Example defaultValue={defaultValue} autoFocus visibleDuration={visibleDuration} pageBehavior={pageBehavior} />);
     let grid = getByTestId('range');
     expect(grid).toHaveTextContent(rangeBefore);
-
     let btn = getByLabelText(rel);
 
     for (let i = 0; i < count; i++) {
-      fireEvent.click(btn);
+      await user.click(btn);
     }
 
     expect(grid).toHaveTextContent(rangeAfter);
-
     unmount();
-  }  
+  }
 
   describe('pagination', () => {
     it.each`
@@ -165,18 +173,18 @@ describe('useCalendar', () => {
       ${'going forward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'May to June 2019'} | ${'Next'} | ${2} | ${{months: 2}}
       ${'going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'November to December 2018'} | ${'Previous'} | ${1} | ${{months: 2}}
       ${'going backward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'September to October 2018'} | ${'Previous'} | ${2} | ${{months: 2}}
-      `('should use visible as default value $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration}) => {
-        testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration);
+      `('should use visible as default value $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration}) => {
+        await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration);
       });
-      
+
     it.each`
       Name | defaultValue | rangeBefore | rangeAfter | rel | count | visibleDuration | pageBehavior
       ${'going forward one'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'February to March 2019'} | ${'Next'} | ${1} | ${{months: 2}} | ${'single'}
       ${'going forward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'March to April 2019'} | ${'Next'} | ${2} | ${{months: 2}} | ${'single'}
       ${'going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'December 2018 to January 2019'} | ${'Previous'} | ${1} | ${{months: 2}} | ${'single'}
       ${'going backward two'} | ${new CalendarDate(2019, 1, 1)} | ${'January to February 2019'} | ${'November to December 2018'} | ${'Previous'} | ${2} | ${{months: 2}} | ${'single'}
-      `('should use pageBehavior single $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
-        testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
+      `('should use pageBehavior single $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
+        await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
       });
 
     it.each`
@@ -185,8 +193,8 @@ describe('useCalendar', () => {
     ${'week going forward two'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'February 3 to 23, 2019'} | ${'Next'} | ${2} | ${{weeks: 3}}
     ${'week going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'December 2 to 22, 2018'} | ${'Previous'} | ${1} | ${{weeks: 3}}
     ${'week going backward two'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'November 11 to December 1, 2018'} | ${'Previous'} | ${2} | ${{weeks: 3}}
-    `('should use visible as default $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
-      testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
+    `('should use visible as default $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
+      await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
     });
 
     it.each`
@@ -195,8 +203,8 @@ describe('useCalendar', () => {
     ${'week going forward four'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'January 20 to February 9, 2019'} | ${'Next'} | ${4} | ${{weeks: 3}} | ${'single'}
     ${'week going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'December 16, 2018 to January 5, 2019'} | ${'Previous'} | ${1} | ${{weeks: 3}} | ${'single'}
     ${'week going backward four'} | ${new CalendarDate(2019, 1, 1)} | ${'December 23, 2018 to January 12, 2019'} | ${'November 25 to December 15, 2018'} | ${'Previous'} | ${4} | ${{weeks: 3}} | ${'single'}
-    `('should use pageBehavior single $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
-      testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
+    `('should use pageBehavior single $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
+      await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
     });
 
     it.each`
@@ -205,8 +213,8 @@ describe('useCalendar', () => {
     ${'day going forward two'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'January 9 to 13, 2019'} | ${'Next'} | ${2} | ${{days: 5}}
     ${'day going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'December 25 to 29, 2018'} | ${'Previous'} | ${1} | ${{days: 5}}
     ${'day going backward two'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'December 20 to 24, 2018'} | ${'Previous'} | ${2} | ${{days: 5}}
-    `('should use visible as default $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
-      testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
+    `('should use visible as default $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
+      await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
     });
 
     it.each`
@@ -215,8 +223,8 @@ describe('useCalendar', () => {
     ${'day going forward five'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'January 3 to 7, 2019'} | ${'Next'} | ${4} | ${{days: 5}} | ${'single'}
     ${'day going backward one'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'December 29, 2018 to January 2, 2019'} | ${'Previous'} | ${1} | ${{days: 5}} | ${'single'}
     ${'day going backward five'} | ${new CalendarDate(2019, 1, 1)} | ${'December 30, 2018 to January 3, 2019'} | ${'December 26 to 30, 2018'} | ${'Previous'} | ${4} | ${{days: 5}} | ${'single'}
-    `('should use pageBehavior single $Name', ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
-      testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
+    `('should use pageBehavior single $Name', async ({defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior}) => {
+      await testPagination(defaultValue, rangeBefore, rangeAfter, rel, count, visibleDuration, pageBehavior);
     });
   });
 });

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

@@ -12,7 +12,7 @@
 
 import {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps} from '@react-types/checkbox';
 import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox';
-import {pointerMap, render} from '@react-spectrum/test-utils';
+import {pointerMap, render} from '@react-spectrum/test-utils-internal';
 import React, {useRef} from 'react';
 import {useCheckboxGroup, useCheckboxGroupItem} from '../';
 import userEvent from '@testing-library/user-event';

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

@@ -12,7 +12,7 @@
 
 import {parseColor, useColorFieldState} from '@react-stately/color';
 import React from 'react';
-import {renderHook} from '@react-spectrum/test-utils';
+import {renderHook} from '@react-spectrum/test-utils-internal';
 import {useColorField} from '../';
 
 describe('useColorField', function () {