test: Replace local renderFoo() helpers with Example components

static/app/components/acl/featureDisabledModal.spec.tsx

@@ -1,4 +1,4 @@
-import type {ComponentProps, PropsWithChildren} from 'react';
+import type {PropsWithChildren} from 'react';
 import styled from '@emotion/styled';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
@@ -8,35 +8,26 @@ import {FeatureDisabledModal} from 'sentry/components/acl/featureDisabledModal';
 describe('FeatureTourModal', () => {
   const onCloseModal = jest.fn();
   const styledWrapper = styled((c: PropsWithChildren) => c.children);
-  const renderComponent = (
-    props: Partial<ComponentProps<typeof FeatureDisabledModal>> = {}
-  ) =>
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders', () => {
+    const featureName = 'Custom Feature';
+    const features = ['organization:custom-feature'];
+
     render(
       <FeatureDisabledModal
         Body={styledWrapper()}
         Footer={styledWrapper()}
         Header={() => <span>Header</span>}
         closeModal={onCloseModal}
         CloseButton={() => <button>Close</button>}
-        featureName="Default Feature"
-        features="organization:test-feature"
-        {...props}
+        featureName={featureName}
+        features={features}
       />
     );
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders', () => {
-    const featureName = 'Custom Feature';
-    const features = ['organization:custom-feature'];
-
-    renderComponent({
-      featureName,
-      features,
-    });
-
     expect(
       screen.getByText('This feature is not enabled on your Sentry installation.')
     ).toBeInTheDocument();

static/app/components/charts/optionSelector.spec.tsx

@@ -36,12 +36,8 @@ describe('Charts > OptionSelector (Multiple)', () => {
     );
   }
 
-  const renderComponent = () => {
-    return render(<TestComponent />);
-  };
-
   it('renders yAxisOptions with yAxisValue selected', async () => {
-    renderComponent();
+    render(<TestComponent />);
     expect(await screen.findByRole('option', {name: 'count()'})).toHaveAttribute(
       'aria-selected',
       'true'
@@ -57,7 +53,7 @@ describe('Charts > OptionSelector (Multiple)', () => {
   });
 
   it('calls onChange prop with new checkbox option state', async () => {
-    renderComponent();
+    render(<TestComponent />);
     await userEvent.click(screen.getByRole('option', {name: 'count()'}));
     expect(onChangeStub).toHaveBeenCalledWith(['failure_count()']);
     onChangeStub.mockClear();
@@ -79,15 +75,15 @@ describe('Charts > OptionSelector (Multiple)', () => {
   });
 
   it('does not uncheck options when clicked if only one option is currently selected', async () => {
-    renderComponent();
+    render(<TestComponent />);
     await userEvent.click(screen.getByRole('option', {name: 'count()'}));
     expect(onChangeStub).toHaveBeenCalledWith(['failure_count()']);
     await userEvent.click(screen.getByRole('option', {name: 'failure_count()'}));
     expect(onChangeStub).toHaveBeenCalledWith(['failure_count()']);
   });
 
   it('only allows up to 3 options to be checked at one time', async () => {
-    renderComponent();
+    render(<TestComponent />);
     await userEvent.click(screen.getByRole('option', {name: 'count_unique(user)'}));
     expect(onChangeStub).toHaveBeenCalledWith([
       'count()',

static/app/components/commandPalette/ui/featureFlagCommandPaletteActions.spec.tsx

@@ -36,15 +36,14 @@ function SlotOutlets() {
   );
 }
 
-function renderFeatureFlagActions(organization = OrganizationFixture()) {
-  render(
+function ExampleFeatureFlagActions() {
+  return (
     <Fragment>
       <CommandPaletteHotkeys />
       <FeatureFlagCommandPaletteActions />
       <SlotOutlets />
       <GlobalModal />
-    </Fragment>,
-    {organization}
+    </Fragment>
   );
 }
 
@@ -74,7 +73,7 @@ describe('FeatureFlagCommandPaletteActions', () => {
 
   it('toggles an existing feature flag without reloading', async () => {
     const organization = OrganizationFixture({features: ['enabled-feature']});
-    renderFeatureFlagActions(organization);
+    render(<ExampleFeatureFlagActions />, {organization});
 
     await openCommandPalette();
     await userEvent.type(
@@ -96,7 +95,7 @@ describe('FeatureFlagCommandPaletteActions', () => {
 
   it('keeps a disabled feature flag in the list after returning to it', async () => {
     const organization = OrganizationFixture({features: ['enabled-feature']});
-    renderFeatureFlagActions(organization);
+    render(<ExampleFeatureFlagActions />, {organization});
 
     await openCommandPalette();
     await userEvent.type(
@@ -131,7 +130,7 @@ describe('FeatureFlagCommandPaletteActions', () => {
 
   it('adds a new enabled feature flag from the modal', async () => {
     const organization = OrganizationFixture({features: []});
-    renderFeatureFlagActions(organization);
+    render(<ExampleFeatureFlagActions />, {organization});
 
     await openCommandPalette();
     await userEvent.type(

static/app/components/core/avatar/avatarList.spec.tsx

@@ -5,16 +5,6 @@ import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {AvatarList} from '@sentry/scraps/avatar';
 
-function renderComponent({
-  users,
-  teams,
-}: {
-  users: React.ComponentProps<typeof AvatarList>['users'];
-  teams?: React.ComponentProps<typeof AvatarList>['teams'];
-}) {
-  return render(<AvatarList users={users} teams={teams} />);
-}
-
 describe('AvatarList', () => {
   const user = UserFixture();
   const team = TeamFixture();
@@ -25,7 +15,7 @@ describe('AvatarList', () => {
       {...user, id: '2', name: 'BC'},
     ];
 
-    renderComponent({users});
+    render(<AvatarList users={users} />);
     expect(screen.getByText('A')).toBeInTheDocument();
     expect(screen.getByText('B')).toBeInTheDocument();
     expect(screen.queryByTestId('avatarList-collapsedavatars')).not.toBeInTheDocument();
@@ -41,7 +31,7 @@ describe('AvatarList', () => {
       {...user, id: '6', name: 'FG'},
     ];
 
-    renderComponent({users});
+    render(<AvatarList users={users} />);
     expect(screen.getByText(users[0]!.name.charAt(0))).toBeInTheDocument();
     expect(screen.getByText(users[1]!.name.charAt(0))).toBeInTheDocument();
     expect(screen.getByText(users[2]!.name.charAt(0))).toBeInTheDocument();
@@ -62,7 +52,7 @@ describe('AvatarList', () => {
       {...user, id: '7', name: 'GH'},
     ];
 
-    renderComponent({users});
+    render(<AvatarList users={users} />);
     expect(screen.getByText(users[0]!.name.charAt(0))).toBeInTheDocument();
     expect(screen.getByText(users[1]!.name.charAt(0))).toBeInTheDocument();
     expect(screen.getByText(users[2]!.name.charAt(0))).toBeInTheDocument();
@@ -82,7 +72,7 @@ describe('AvatarList', () => {
       {...team, id: '2', name: 'B', slug: 'B', type: 'team'},
     ];
 
-    renderComponent({users, teams});
+    render(<AvatarList users={users} teams={teams} />);
     expect(screen.getByText('A')).toBeInTheDocument();
     expect(screen.getByText('B')).toBeInTheDocument();
     expect(screen.getByText('C')).toBeInTheDocument();
@@ -96,7 +86,7 @@ describe('AvatarList', () => {
       {...team, id: '2', name: 'B', slug: 'B', type: 'team'},
     ];
 
-    renderComponent({users: [], teams});
+    render(<AvatarList users={[]} teams={teams} />);
     expect(screen.getByText('A')).toBeInTheDocument();
     expect(screen.getByText('B')).toBeInTheDocument();
     expect(screen.queryByTestId('avatarList-collapsedavatars')).not.toBeInTheDocument();

static/app/components/events/attachmentViewers/logFileViewer.spec.tsx

@@ -19,8 +19,8 @@ describe('LogFileViewer', () => {
   });
   const attachmentUrl = `/api/0/projects/${organization.id}/${project.slug}/events/${event.id}/attachments/${attachment.id}/?download`;
 
-  function renderViewer() {
-    render(
+  function ExampleLogFileViewer() {
+    return (
       <LogFileViewer
         attachment={attachment}
         eventId={event.id}
@@ -45,7 +45,7 @@ describe('LogFileViewer', () => {
     ]);
     fetchMock.route(attachmentUrl, fetchMock.Response(bytes));
 
-    renderViewer();
+    render(<ExampleLogFileViewer />);
 
     expect(await screen.findByText('A中')).toBeInTheDocument();
     expect(fetchMock).toHaveBeenCalledWith(
@@ -61,7 +61,7 @@ describe('LogFileViewer', () => {
   it('renders an error when the attachment cannot be downloaded', async () => {
     fetchMock.route(attachmentUrl, '', {status: 404});
 
-    renderViewer();
+    render(<ExampleLogFileViewer />);
 
     expect(await screen.findByText('Failed to download attachment.')).toBeInTheDocument();
   });

static/app/components/events/breadcrumbs/breadcrumbsDrawer.spec.tsx

@@ -7,7 +7,7 @@ import {
 } from 'sentry/components/events/breadcrumbs/testUtils';
 import {mockElementSize} from 'sentry/utils/fixtures/virtualization';
 
-async function renderBreadcrumbDrawer() {
+async function openBreadcrumbDrawer() {
   mockElementSize({width: 0, height: 30});
   render(<BreadcrumbsDataSection {...MOCK_DATA_SECTION_PROPS} />);
   await userEvent.click(screen.getByRole('button', {name: 'View 2 more'}));
@@ -16,7 +16,7 @@ async function renderBreadcrumbDrawer() {
 
 describe('BreadcrumbsDrawer', () => {
   it('renders the drawer as expected', async () => {
-    const drawerScreen = await renderBreadcrumbDrawer();
+    const drawerScreen = await openBreadcrumbDrawer();
     expect(
       within(drawerScreen).getByRole('button', {name: 'Close Drawer'})
     ).toBeInTheDocument();
@@ -60,7 +60,7 @@ describe('BreadcrumbsDrawer', () => {
   });
 
   it('allows search to affect displayed crumbs', async () => {
-    const drawerScreen = await renderBreadcrumbDrawer();
+    const drawerScreen = await openBreadcrumbDrawer();
 
     const [warningCrumb, logCrumb] = MOCK_BREADCRUMBS;
     expect(within(drawerScreen).getByText(warningCrumb.category)).toBeInTheDocument();
@@ -76,7 +76,7 @@ describe('BreadcrumbsDrawer', () => {
   });
 
   it('allows type filter to affect displayed crumbs', async () => {
-    const drawerScreen = await renderBreadcrumbDrawer();
+    const drawerScreen = await openBreadcrumbDrawer();
 
     const queryCrumb = MOCK_BREADCRUMBS[3];
     const requestCrumb = MOCK_BREADCRUMBS[2];
@@ -95,7 +95,7 @@ describe('BreadcrumbsDrawer', () => {
   });
 
   it('allows level spofilter to affect displayed crumbs', async () => {
-    const drawerScreen = await renderBreadcrumbDrawer();
+    const drawerScreen = await openBreadcrumbDrawer();
 
     const [warningCrumb, logCrumb] = MOCK_BREADCRUMBS;
 
@@ -112,7 +112,7 @@ describe('BreadcrumbsDrawer', () => {
   });
 
   it('allows sort dropdown to affect displayed crumbs', async () => {
-    const drawerScreen = await renderBreadcrumbDrawer();
+    const drawerScreen = await openBreadcrumbDrawer();
 
     const [warningCrumb, logCrumb] = MOCK_BREADCRUMBS;
 
@@ -145,7 +145,7 @@ describe('BreadcrumbsDrawer', () => {
   });
 
   it('allows time display dropdown to change all displayed crumbs', async () => {
-    const drawerScreen = await renderBreadcrumbDrawer();
+    const drawerScreen = await openBreadcrumbDrawer();
     expect(
       within(drawerScreen).getAllByText('May 21, 2019 6:00:48.760 PM UTC')
     ).toHaveLength(MOCK_BREADCRUMBS.length);

static/app/components/events/featureFlags/eventFeatureFlagDrawer.spec.tsx

@@ -11,7 +11,7 @@ import {
 import {mockElementSize} from 'sentry/utils/fixtures/virtualization';
 import {GroupDataContextProvider} from 'sentry/views/issueDetails/groupDataContext';
 
-async function renderFlagDrawer() {
+async function openFlagDrawer() {
   mockElementSize({width: 0, height: 30});
   render(
     <GroupDataContextProvider
@@ -41,7 +41,7 @@ describe('FeatureFlagDrawer', () => {
     });
   });
   it('renders the drawer as expected', async () => {
-    const drawerScreen = await renderFlagDrawer();
+    const drawerScreen = await openFlagDrawer();
     expect(
       within(drawerScreen).getByRole('button', {name: 'Close Drawer'})
     ).toBeInTheDocument();
@@ -73,7 +73,7 @@ describe('FeatureFlagDrawer', () => {
   });
 
   it('allows search to affect displayed flags', async () => {
-    const drawerScreen = await renderFlagDrawer();
+    const drawerScreen = await openFlagDrawer();
 
     const [webVitalsFlag, enableReplay] = MOCK_FLAGS.filter(f => f.result);
     expect(within(drawerScreen).getByText(webVitalsFlag!.flag)).toBeInTheDocument();
@@ -89,7 +89,7 @@ describe('FeatureFlagDrawer', () => {
   });
 
   it('allows sort dropdown to affect displayed flags', async () => {
-    const drawerScreen = await renderFlagDrawer();
+    const drawerScreen = await openFlagDrawer();
 
     const [webVitalsFlag, enableReplay] = MOCK_FLAGS.filter(f => f.result);
 

static/app/components/loading/loadingContainer.spec.tsx

@@ -3,8 +3,8 @@ import {render, screen} from 'sentry-test/reactTestingLibrary';
 import type {LoadingContainerProps} from 'sentry/components/loading/loadingContainer';
 import {LoadingContainer} from 'sentry/components/loading/loadingContainer';
 
-function renderComponent(props: LoadingContainerProps = {}) {
-  return render(
+function ExampleLoadingContainer(props: LoadingContainerProps) {
+  return (
     <LoadingContainer {...props}>
       <div>hello!</div>
     </LoadingContainer>
@@ -13,13 +13,13 @@ function renderComponent(props: LoadingContainerProps = {}) {
 
 describe('LoadingContainer', () => {
   it('handles normal state', () => {
-    renderComponent();
+    render(<ExampleLoadingContainer />);
     expect(screen.getByText('hello!')).toBeInTheDocument();
     expect(() => screen.getByTestId('loading-indicator')).toThrow();
   });
 
   it('handles loading state', () => {
-    const {rerender} = renderComponent({isLoading: true});
+    const {rerender} = render(<ExampleLoadingContainer isLoading />);
     expect(screen.getByText('hello!')).toBeInTheDocument();
     expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
     rerender(<LoadingContainer isLoading />);
@@ -28,7 +28,7 @@ describe('LoadingContainer', () => {
   });
 
   it('handles reloading state', () => {
-    const {rerender} = renderComponent({isReloading: true});
+    const {rerender} = render(<ExampleLoadingContainer isReloading />);
     expect(screen.getByText('hello!')).toBeInTheDocument();
     expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
     rerender(<LoadingContainer isReloading />);