Remove components alias and import components directly in tests

UNRELEASED.md

@@ -32,6 +32,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 
 - Tightened up what absolute imports are allowed. Removed `baseUrl` from `tsconfig.json`. Attempting to do an absolute import from `src/X` or `components/X` now results in a error when type-checking. ([#4643](https://github.com/Shopify/polaris-react/pull/4643))
 - Remove analyze custom properties check. ([#4718](https://github.com/Shopify/polaris-react/pull/4718))
+- Removed support for importing from `components` as it slows tests down ([#4735](https://github.com/Shopify/polaris-react/pull/4735))
 
 ### Dependency upgrades
 

loom.config.ts

@@ -55,7 +55,6 @@ function jestAdjustmentsPlugin() {
         configuration.jestModuleNameMapper?.hook((moduleNameMapper) => ({
           ...moduleNameMapper,
           '^tests/(.*)': '<rootDir>/tests/$1',
-          '^components$': '<rootDir>/src/components',
         }));
 
         // Ignore tests in the examples folder

src/components/AccountConnection/tests/AccountConnection.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Avatar} from 'components';
 
+import {Avatar} from '../../Avatar';
 import {Button} from '../../Button';
 import {AccountConnection} from '../AccountConnection';
 

src/components/ActionList/components/Item/tests/Item.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {UnstyledLink} from 'components';
 
 import {Item} from '../Item';
 import {TextStyle} from '../../../../TextStyle';
+import {UnstyledLink} from '../../../../UnstyledLink';
 
 describe('<Item />', () => {
   it('adds a style property when the image prop is present', () => {

src/components/ActionMenu/components/MenuGroup/tests/MenuGroup.test.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Popover, ActionList, Button} from 'components';
 
+import {ActionList} from '../../../../ActionList';
+import {Button} from '../../../../Button';
+import {Popover} from '../../../../Popover';
 import {MenuGroup} from '../MenuGroup';
 
 describe('<MenuGroup />', () => {

src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import {HorizontalDotsMinor} from '@shopify/polaris-icons';
 import {mountWithApp} from 'tests/utilities';
-import {Button, Popover} from 'components';
 
+import {Button} from '../../../../Button';
+import {Popover} from '../../../../Popover';
 // eslint-disable-next-line @shopify/strict-component-boundaries
 import {
   Item as ActionListItem,

src/components/Autocomplete/tests/Autocomplete.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {mountWithApp, ReactTestingElement, CustomRoot} from 'tests/utilities';
-import {KeypressListener} from 'components';
 
 import {TextField} from '../../TextField';
 import {Key, SectionDescriptor} from '../../../types';
@@ -9,6 +8,7 @@ import {ComboboxTextFieldContext} from '../../../utilities/combobox';
 import {Autocomplete} from '../Autocomplete';
 import {Combobox} from '../../Combobox';
 import type {ComboboxProps} from '../../Combobox';
+import {KeypressListener} from '../../KeypressListener';
 import {Listbox} from '../../Listbox';
 
 describe('<Autocomplete/>', () => {

src/components/Avatar/tests/Avatar-ssr.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Avatar, Image} from 'components';
+
+import {Image} from '../../Image';
+import {Avatar} from '../Avatar';
 
 jest.mock('../../../utilities/use-is-after-initial-mount', () => {
   return {

src/components/Avatar/tests/Avatar.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Avatar, Image} from 'components';
+
+import {Image} from '../../Image';
+import {Avatar} from '../Avatar';
 
 describe('<Avatar />', () => {
   describe('intials', () => {

src/components/Badge/tests/Badge.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {VisuallyHidden} from 'components';
 
+import {VisuallyHidden} from '../../VisuallyHidden';
 import {Badge} from '../Badge';
 
 describe('<Badge />', () => {

src/components/Banner/tests/Banner.test.tsx

@@ -7,15 +7,13 @@ import {
   DiamondAlertMajor,
 } from '@shopify/polaris-icons';
 import {mountWithApp} from 'tests/utilities';
-import {
-  Button,
-  Heading,
-  Icon,
-  Spinner,
-  UnstyledButton,
-  UnstyledLink,
-} from 'components';
 
+import {Button} from '../../Button';
+import {Heading} from '../../Heading';
+import {Icon} from '../../Icon';
+import {Spinner} from '../../Spinner';
+import {UnstyledButton} from '../../UnstyledButton';
+import {UnstyledLink} from '../../UnstyledLink';
 import {BannerContext} from '../../../utilities/banner-context';
 import {WithinContentContext} from '../../../utilities/within-content-context';
 import {Banner, BannerHandles} from '../Banner';

src/components/BulkActions/components/BulkActionMenu/tests/BulkActionMenu.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {Popover, ActionList} from 'components';
 import {mountWithApp} from 'tests/utilities';
 
+import {ActionList} from '../../../../ActionList';
+import {Popover} from '../../../../Popover';
 import {BulkActionMenu, BulkActionsMenuProps, BulkActionButton} from '../..';
 
 const defaultProps: BulkActionsMenuProps = {

src/components/BulkActions/tests/BulkActions.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import {Transition, CSSTransition} from 'react-transition-group';
 import {mountWithApp} from 'tests/utilities';
-import {Popover, ActionList} from 'components';
 
+import {ActionList} from '../../ActionList';
 import {CheckableButton} from '../../CheckableButton';
 import {Button} from '../../Button';
+import {Popover} from '../../Popover';
 import {
   BulkActionButton,
   BulkActionMenu,

src/components/Button/tests/Button.test.tsx

@@ -6,8 +6,12 @@ import {
   SelectMinor,
 } from '@shopify/polaris-icons';
 import {mountWithApp} from 'tests/utilities';
-import {ActionList, Icon, Popover, Spinner, UnstyledButton} from 'components';
 
+import {ActionList} from '../../ActionList';
+import {Icon} from '../../Icon';
+import {Popover} from '../../Popover';
+import {Spinner} from '../../Spinner';
+import {UnstyledButton} from '../../UnstyledButton';
 import {Button} from '../Button';
 import en from '../../../../locales/en.json';
 import styles from '../Button.scss';

src/components/ButtonGroup/components/Item/tests/Item.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Button} from 'components';
 
+import {Button} from '../../../../Button';
 import {Item} from '../Item';
 
 describe('<Item />', () => {

src/components/ButtonGroup/tests/ButtonGroup.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Button} from 'components';
 
+import {Button} from '../../Button';
 import {Item} from '../components';
 import {ButtonGroup} from '../ButtonGroup';
 

src/components/CalloutCard/tests/CalloutCard.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Button, ButtonGroup} from 'components';
 
+import {Button} from '../../Button';
+import {ButtonGroup} from '../../ButtonGroup';
 import {CalloutCard} from '../CalloutCard';
 
 describe('<CalloutCard />', () => {

src/components/Card/components/Header/tests/Header.test.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {ButtonGroup, Heading, buttonsFrom} from 'components';
 
+import {buttonsFrom} from '../../../../Button';
+import {ButtonGroup} from '../../../../ButtonGroup';
+import {Heading} from '../../../../Heading';
 import {Header} from '../Header';
 
 jest.mock('../../../../Button', () => ({

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

@@ -1,7 +1,10 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Badge, Subheading, ButtonGroup, Button} from 'components';
 
+import {Badge} from '../../../../Badge';
+import {Button} from '../../../../Button';
+import {ButtonGroup} from '../../../../ButtonGroup';
+import {Subheading} from '../../../../Subheading';
 import {Section} from '../Section';
 
 describe('<Card.Section />', () => {

src/components/Card/tests/Card.test.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Card, Badge, Button, Popover, ActionList} from 'components';
 
+import {Badge} from '../../Badge';
+import {Button} from '../../Button';
+import {Popover} from '../../Popover';
+import {ActionList} from '../../ActionList';
 import {WithinContentContext} from '../../../utilities/within-content-context';
+import {Card} from '../Card';
 import {Section} from '../components';
 
 describe('<Card />', () => {

src/components/CheckableButton/tests/CheckableButton.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Checkbox} from 'components';
 
+import {Checkbox} from '../../Checkbox';
 import {CheckableButton} from '../CheckableButton';
 
 const CheckableButtonProps = {

src/components/Choice/tests/Choice.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {InlineError} from 'components';
 
+import {InlineError} from '../../InlineError';
 import {Choice} from '../Choice';
 
 describe('<Choice />', () => {

src/components/ChoiceList/tests/ChoiceList.test.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {RadioButton, Checkbox, InlineError} from 'components';
 
+import {Checkbox} from '../../Checkbox';
+import {InlineError} from '../../InlineError';
+import {RadioButton} from '../../RadioButton';
 import {ChoiceList, ChoiceListProps} from '../ChoiceList';
 
 describe('<ChoiceList />', () => {

src/components/DataTable/components/Cell/tests/Cell.test.tsx

@@ -2,7 +2,7 @@ import React, {ReactElement} from 'react';
 import {CaretUpMinor, CaretDownMinor} from '@shopify/polaris-icons';
 import {mountWithApp} from 'tests/utilities';
 
-import {Icon} from '../../../..';
+import {Icon} from '../../../../Icon';
 import {Cell} from '../Cell';
 
 describe('<Cell />', () => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Button} from 'components';
 
+import {Button} from '../../../../Button';
 import {Navigation} from '../Navigation';
 
 describe('<Navigation />', () => {

src/components/DataTable/tests/DataTable.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {timer} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
-import {Checkbox} from 'components';
 
+import {Checkbox} from '../../Checkbox';
 import {Cell, Navigation} from '../components';
 import {DataTable, DataTableProps} from '../DataTable';
 

src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {Caption, TextStyle} from 'components';
 import {mountWithApp} from 'tests/utilities';
 
+import {Caption} from '../../../../Caption';
+import {TextStyle} from '../../../../TextStyle';
 import {DropZoneContext} from '../../../context';
 import {FileUpload} from '../FileUpload';
 import {uploadArrow as uploadArrowImage} from '../../../images';

src/components/DropZone/tests/DropZone.test.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import {act} from 'react-dom/test-utils';
 import {clock} from '@shopify/jest-dom-mocks';
-import {Label, Labelled, TextStyle, Caption} from 'components';
-import {mountWithApp} from 'tests/utilities';
-import type {CustomRoot} from '@shopify/react-testing';
+import {mountWithApp, CustomRoot} from 'tests/utilities';
 
+import {Caption} from '../../Caption';
+import {Label} from '../../Label';
+import {Labelled} from '../../Labelled';
+import {TextStyle} from '../../TextStyle';
 import {DropZone, DropZoneFileType} from '../DropZone';
 import {DropZoneContext} from '../context';
 

src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {DisplayText, TextStyle} from 'components';
 
+import {DisplayText} from '../../DisplayText';
+import {TextStyle} from '../../TextStyle';
 import {EmptySearchResult} from '../EmptySearchResult';
 import {emptySearch} from '../illustrations';
 

src/components/EmptyState/tests/EmptyState.test.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {
-  Button,
-  DisplayText,
-  Image,
-  Stack,
-  TextContainer,
-  UnstyledLink,
-} from 'components';
 
+import {Button} from '../../Button';
+import {DisplayText} from '../../DisplayText';
+import {Image} from '../../Image';
+import {Stack} from '../../Stack';
+import {TextContainer} from '../../TextContainer';
+import {UnstyledLink} from '../../UnstyledLink';
 import {WithinContentContext} from '../../../utilities/within-content-context';
 import {EmptyState} from '../EmptyState';
 

src/components/ExceptionList/tests/ExceptionList.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import {CirclePlusMinor, NoteMinor} from '@shopify/polaris-icons';
 import {mountWithApp} from 'tests/utilities';
-import {Icon} from 'components';
 
 import {ExceptionList} from '../ExceptionList';
+import {Icon} from '../../Icon';
 import {Truncate} from '../../Truncate';
 
 describe('<ExceptionList />', () => {

src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {Popover, Button} from 'components';
 import {mountWithApp} from 'tests/utilities';
 
+import {Button} from '../../../../Button';
+import {Popover} from '../../../../Popover';
 import styles from '../ConnectedFilterControl.scss';
 import {
   ConnectedFilterControl,