Merge pull request #2978 from abhishekjakhar/fix/test-cases

fix: test case warnings for all core components

packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx

@@ -15,8 +15,9 @@
  */
 
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { fireEvent } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 
 import { CodeSnippet } from './CodeSnippet';
 
@@ -32,24 +33,24 @@ const minProps = {
 };
 
 describe('<CodeSnippet />', () => {
-  it('renders text without exploding', () => {
-    const { getByText } = render(wrapInTestApp(<CodeSnippet {...minProps} />));
+  it('renders text without exploding', async () => {
+    const { getByText } = await renderInTestApp(<CodeSnippet {...minProps} />);
     expect(getByText(/"Hello"/)).toBeInTheDocument();
     expect(getByText(/"World"/)).toBeInTheDocument();
   });
 
-  it('renders without line numbers', () => {
-    const { queryByText } = render(
-      wrapInTestApp(<CodeSnippet {...minProps} />),
+  it('renders without line numbers', async () => {
+    const { queryByText } = await renderInTestApp(
+      <CodeSnippet {...minProps} />,
     );
     expect(queryByText('1')).not.toBeInTheDocument();
     expect(queryByText('2')).not.toBeInTheDocument();
     expect(queryByText('3')).not.toBeInTheDocument();
   });
 
-  it('renders with line numbers', () => {
-    const { getByText } = render(
-      wrapInTestApp(<CodeSnippet {...minProps} showLineNumbers />),
+  it('renders with line numbers', async () => {
+    const { getByText } = await renderInTestApp(
+      <CodeSnippet {...minProps} showLineNumbers />,
     );
     expect(getByText('1')).toBeInTheDocument();
     expect(getByText('2')).toBeInTheDocument();
@@ -57,12 +58,17 @@ describe('<CodeSnippet />', () => {
   });
 
   it('copy code using button', async () => {
+    jest.useFakeTimers();
     document.execCommand = jest.fn();
-    const { getByTitle } = render(
-      wrapInTestApp(<CodeSnippet {...minProps} showCopyCodeButton />),
+    const { getByTitle } = await renderInTestApp(
+      <CodeSnippet {...minProps} showCopyCodeButton />,
     );
     const button = getByTitle('Text copied to clipboard');
     fireEvent.click(button);
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(document.execCommand).toHaveBeenCalled();
+    jest.useRealTimers();
   });
 });

packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx

@@ -15,8 +15,9 @@
  */
 
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { fireEvent } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { CopyTextButton } from './CopyTextButton';
 import {
   ApiRegistry,
@@ -55,29 +56,30 @@ const apiRegistry = ApiRegistry.from([
 ]);
 
 describe('<CopyTextButton />', () => {
-  it('renders without exploding', () => {
-    const { getByDisplayValue } = render(
-      wrapInTestApp(
-        <ApiProvider apis={apiRegistry}>
-          <CopyTextButton {...props} />
-        </ApiProvider>,
-      ),
+  it('renders without exploding', async () => {
+    const { getByDisplayValue } = await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <CopyTextButton {...props} />
+      </ApiProvider>,
     );
     getByDisplayValue('mockText');
   });
 
   it('displays tooltip on click', async () => {
+    jest.useFakeTimers();
     document.execCommand = jest.fn();
-    const rendered = render(
-      wrapInTestApp(
-        <ApiProvider apis={apiRegistry}>
-          <CopyTextButton {...props} />
-        </ApiProvider>,
-      ),
+    const rendered = await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <CopyTextButton {...props} />
+      </ApiProvider>,
     );
     const button = rendered.getByTitle('mockTooltip');
     fireEvent.click(button);
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(document.execCommand).toHaveBeenCalled();
     rendered.getByText('mockTooltip');
+    jest.useRealTimers();
   });
 });

packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx

@@ -15,8 +15,8 @@
  */
 
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { fireEvent } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import { HorizontalScrollGrid } from './HorizontalScrollGrid';
 import { Grid } from '@material-ui/core';
 
@@ -33,14 +33,12 @@ describe('<HorizontalScrollGrid />', () => {
     jest.restoreAllMocks();
   });
 
-  it('renders without exploding', () => {
-    const rendered = render(
-      wrapInTestApp(
-        <HorizontalScrollGrid>
-          <Grid item>item1</Grid>
-          <Grid item>item2</Grid>
-        </HorizontalScrollGrid>,
-      ),
+  it('renders without exploding', async () => {
+    const rendered = await renderInTestApp(
+      <HorizontalScrollGrid>
+        <Grid item>item1</Grid>
+        <Grid item>item2</Grid>
+      </HorizontalScrollGrid>,
     );
     rendered.getByText('item1');
     rendered.getByText('item2');
@@ -65,17 +63,15 @@ describe('<HorizontalScrollGrid />', () => {
       lastScroll = left || 0;
     }) as any;
 
-    const rendered = await renderWithEffects(
-      wrapInTestApp(
-        <HorizontalScrollGrid>
-          <Grid item style={{ minWidth: 200 }}>
-            item1
-          </Grid>
-          <Grid item style={{ minWidth: 200 }}>
-            item2
-          </Grid>
-        </HorizontalScrollGrid>,
-      ),
+    const rendered = await renderInTestApp(
+      <HorizontalScrollGrid>
+        <Grid item style={{ minWidth: 200 }}>
+          item1
+        </Grid>
+        <Grid item style={{ minWidth: 200 }}>
+          item2
+        </Grid>
+      </HorizontalScrollGrid>,
     );
 
     rendered.getByTitle('Scroll Left');

packages/core/src/components/Lifecycle/Lifecycle.test.tsx

@@ -15,28 +15,27 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { Lifecycle } from './Lifecycle';
 
 describe('<Lifecycle />', () => {
   it('renders Alpha with shorthand', async () => {
-    const { getByText } = render(wrapInTestApp(<Lifecycle alpha shorthand />));
+    const { getByText } = await renderInTestApp(<Lifecycle alpha shorthand />);
     expect(getByText('α')).toBeInTheDocument();
   });
 
   it('renders Alpha without shorthand', async () => {
-    const { getByText } = render(wrapInTestApp(<Lifecycle alpha />));
+    const { getByText } = await renderInTestApp(<Lifecycle alpha />);
     expect(getByText('Alpha')).toBeInTheDocument();
   });
 
   it('renders Beta with shorthand', async () => {
-    const { getByText } = render(wrapInTestApp(<Lifecycle shorthand />));
+    const { getByText } = await renderInTestApp(<Lifecycle shorthand />);
     expect(getByText('β')).toBeInTheDocument();
   });
 
   it('renders Beta without shorthand', async () => {
-    const { getByText } = render(wrapInTestApp(<Lifecycle />));
+    const { getByText } = await renderInTestApp(<Lifecycle />);
     expect(getByText('Beta')).toBeInTheDocument();
   });
 });

packages/core/src/components/ProgressBars/Gauge.test.tsx

@@ -15,36 +15,34 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { Gauge, getProgressColor } from './Gauge';
 import * as theme from '@backstage/theme';
 
 describe('<Gauge />', () => {
-  it('renders without exploding', () => {
-    const { getByText } = render(
-      wrapInTestApp(<Gauge value={10} fractional={false} />),
+  it('renders without exploding', async () => {
+    const { getByText } = await renderInTestApp(
+      <Gauge value={10} fractional={false} />,
+    );
+    getByText('10%');
+  });
+  it('handles fractional prop', async () => {
+    const { getByText } = await renderInTestApp(
+      <Gauge value={0.1} fractional />,
     );
     getByText('10%');
   });
 
-  it('handles fractional prop', () => {
-    const { getByText } = render(
-      wrapInTestApp(<Gauge value={0.1} fractional />),
-    );
-    getByText('10%');
-  });
-
-  it('handles max prop', () => {
-    const { getByText } = render(
-      wrapInTestApp(<Gauge value={1} max={10} fractional={false} />),
+  it('handles max prop', async () => {
+    const { getByText } = await renderInTestApp(
+      <Gauge value={1} max={10} fractional={false} />,
     );
     getByText('1%');
   });
 
-  it('handles unit prop', () => {
-    const { getByText } = render(
-      wrapInTestApp(<Gauge value={10} fractional={false} unit="m" />),
+  it('handles unit prop', async () => {
+    const { getByText } = await renderInTestApp(
+      <Gauge value={10} fractional={false} unit="m" />,
     );
     getByText('10m');
   });

packages/core/src/components/ProgressBars/GaugeCard.test.tsx

@@ -15,33 +15,32 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 
 import { GaugeCard } from './GaugeCard';
 
 const minProps = { title: 'Tingle upgrade', progress: 0.12 };
 
 describe('<GaugeCard />', () => {
-  it('renders without exploding', () => {
-    const { getByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
+  it('renders without exploding', async () => {
+    const { getByText } = await renderInTestApp(<GaugeCard {...minProps} />);
     expect(getByText(/Tingle.*/)).toBeInTheDocument();
   });
 
-  it('renders progress and title', () => {
-    const { getByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
+  it('renders progress and title', async () => {
+    const { getByText } = await renderInTestApp(<GaugeCard {...minProps} />);
     expect(getByText(/Tingle.*/)).toBeInTheDocument();
     expect(getByText(/12%.*/)).toBeInTheDocument();
   });
 
-  it('does not render deepLink', () => {
-    const { queryByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
+  it('does not render deepLink', async () => {
+    const { queryByText } = await renderInTestApp(<GaugeCard {...minProps} />);
     expect(queryByText('View more')).not.toBeInTheDocument();
   });
 
-  it('handles invalid numbers', () => {
+  it('handles invalid numbers', async () => {
     const badProps = { title: 'Tingle upgrade', progress: 'hejjo' } as any;
-    const { getByText } = render(wrapInTestApp(<GaugeCard {...badProps} />));
+    const { getByText } = await renderInTestApp(<GaugeCard {...badProps} />);
     expect(getByText(/N\/A.*/)).toBeInTheDocument();
   });
 });

packages/core/src/components/SimpleStepper/SimpleStepper.test.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-import { render, fireEvent, within } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { fireEvent, within } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import { SimpleStepper as Stepper } from './SimpleStepper';
 import { SimpleStepperStep as Step } from './SimpleStepperStep';
 
@@ -24,20 +24,18 @@ const getTextInSlide = (rendered: any, index: number) =>
 
 describe('Stepper', () => {
   it('Maintains state history', async () => {
-    const rendered = render(
-      wrapInTestApp(
-        <Stepper>
-          <Step title="Step 0" data-testid="step0">
-            <div>step0</div>
-          </Step>
-          <Step title="Step 1" data-testid="step1">
-            <div>step1</div>
-          </Step>
-          <Step title="Step 2" data-testid="step2">
-            <div>step2</div>
-          </Step>
-        </Stepper>,
-      ),
+    const rendered = await renderInTestApp(
+      <Stepper>
+        <Step title="Step 0" data-testid="step0">
+          <div>step0</div>
+        </Step>
+        <Step title="Step 1" data-testid="step1">
+          <div>step1</div>
+        </Step>
+        <Step title="Step 2" data-testid="step2">
+          <div>step2</div>
+        </Step>
+      </Stepper>,
     );
 
     fireEvent.click(getTextInSlide(rendered, 0)('Next') as Node);
@@ -51,27 +49,25 @@ describe('Stepper', () => {
   });
 
   it('Handles nextStep property', async () => {
-    const rendered = render(
-      wrapInTestApp(
-        <Stepper>
-          <Step title="Step 0" data-testid="step0">
-            <div>step0</div>
-          </Step>
-          <Step
-            title="Step 1"
-            actions={{ nextStep: () => 3 }}
-            data-testid="step1"
-          >
-            <div>step1</div>
-          </Step>
-          <Step title="Step 2" data-testid="step2">
-            <div>step2</div>
-          </Step>
-          <Step title="Step 3" data-testid="step3">
-            <div>step3</div>
-          </Step>
-        </Stepper>,
-      ),
+    const rendered = await renderInTestApp(
+      <Stepper>
+        <Step title="Step 0" data-testid="step0">
+          <div>step0</div>
+        </Step>
+        <Step
+          title="Step 1"
+          actions={{ nextStep: () => 3 }}
+          data-testid="step1"
+        >
+          <div>step1</div>
+        </Step>
+        <Step title="Step 2" data-testid="step2">
+          <div>step2</div>
+        </Step>
+        <Step title="Step 3" data-testid="step3">
+          <div>step3</div>
+        </Step>
+      </Stepper>,
     );
 
     fireEvent.click(getTextInSlide(rendered, 0)('Next') as Node);
@@ -84,28 +80,26 @@ describe('Stepper', () => {
     expect(rendered.getByText('step1')).toBeInTheDocument();
   });
 
-  it('Shows controls and content when going back to first step', () => {
-    const rendered = render(
-      wrapInTestApp(
-        <Stepper>
-          <Step title="Step 0" data-testid="step0">
-            <div>step0</div>
-          </Step>
-          <Step
-            title="Step 1"
-            actions={{ nextStep: () => 3 }}
-            data-testid="step1"
-          >
-            <div>step1</div>
-          </Step>
-          <Step title="Step 2" data-testid="step2">
-            <div>step2</div>
-          </Step>
-          <Step title="Step 3" data-testid="step3">
-            <div>step3</div>
-          </Step>
-        </Stepper>,
-      ),
+  it('Shows controls and content when going back to first step', async () => {
+    const rendered = await renderInTestApp(
+      <Stepper>
+        <Step title="Step 0" data-testid="step0">
+          <div>step0</div>
+        </Step>
+        <Step
+          title="Step 1"
+          actions={{ nextStep: () => 3 }}
+          data-testid="step1"
+        >
+          <div>step1</div>
+        </Step>
+        <Step title="Step 2" data-testid="step2">
+          <div>step2</div>
+        </Step>
+        <Step title="Step 3" data-testid="step3">
+          <div>step3</div>
+        </Step>
+      </Stepper>,
     );
 
     fireEvent.click(getTextInSlide(rendered, 0)('Next') as Node);
@@ -123,30 +117,28 @@ describe('Stepper', () => {
     expect(getTextInSlide(rendered, 0)('Next')).toBeInTheDocument();
   });
 
-  it('uses nextText if specified in all steps', () => {
-    const rendered = render(
-      wrapInTestApp(
+  it('uses nextText if specified in all steps', async () => {
+    const rendered = await renderInTestApp(
+      <Stepper>
         <Stepper>
-          <Stepper>
-            <Step
-              title="Step 0"
-              actions={{
-                nextText: 'Step0Next',
-              }}
-            >
-              <div>step0</div>
-            </Step>
-            <Step
-              title="Step 1"
-              actions={{
-                nextText: 'FinalStepNext',
-              }}
-            >
-              <div>final step</div>
-            </Step>
-          </Stepper>
-        </Stepper>,
-      ),
+          <Step
+            title="Step 0"
+            actions={{
+              nextText: 'Step0Next',
+            }}
+          >
+            <div>step0</div>
+          </Step>
+          <Step
+            title="Step 1"
+            actions={{
+              nextText: 'FinalStepNext',
+            }}
+          >
+            <div>final step</div>
+          </Step>
+        </Stepper>
+      </Stepper>,
     );
     expect(rendered.getByText('Step0Next')).toBeInTheDocument();
     fireEvent.click(rendered.getByText('Step0Next'));

packages/core/src/components/Table/Table.test.tsx

@@ -15,8 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { Table } from './Table';
 
 const minProps = {
@@ -43,14 +42,14 @@ const minProps = {
 };
 
 describe('<Table />', () => {
-  it('renders without exploding', () => {
-    const rendered = render(wrapInTestApp(<Table {...minProps} />));
+  it('renders without exploding', async () => {
+    const rendered = await renderInTestApp(<Table {...minProps} />);
     expect(rendered.getByText('second value, second row')).toBeInTheDocument();
   });
 
-  it('renders with subtitle', () => {
-    const rendered = render(
-      wrapInTestApp(<Table subtitle="subtitle" {...minProps} />),
+  it('renders with subtitle', async () => {
+    const rendered = await renderInTestApp(
+      <Table subtitle="subtitle" {...minProps} />,
     );
     expect(rendered.getByText('subtitle')).toBeInTheDocument();
   });

packages/core/src/components/Tabs/Tab.test.tsx

@@ -15,13 +15,12 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { StyledTab } from './Tab';
 
 describe('<Tab />', () => {
-  it('renders without exploding', () => {
-    const rendered = render(wrapInTestApp(<StyledTab label="test" />));
+  it('renders without exploding', async () => {
+    const rendered = await renderInTestApp(<StyledTab label="test" />);
     expect(rendered.getByText('test')).toBeInTheDocument();
   });
 });

packages/core/src/components/TrendLine/TrendLine.test.tsx

@@ -17,24 +17,24 @@
 /* eslint-disable jest/no-disabled-tests */
 import React from 'react';
 import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp, wrapInTestApp } from '@backstage/test-utils';
 
 import { TrendLine } from './TrendLine';
 
 describe('TrendLine', () => {
   describe('when no data is present', () => {
-    it('renders null without throwing', () => {
-      const rendered = render(
-        wrapInTestApp(<TrendLine data={[]} title="sparkline" />),
+    it('renders null without throwing', async () => {
+      const rendered = await renderInTestApp(
+        <TrendLine data={[]} title="sparkline" />,
       );
       expect(rendered.queryByTitle('sparkline')).not.toBeInTheDocument();
     });
   });
 
   describe('when one datapoint is present', () => {
-    it('renders as a straight line', () => {
-      const rendered = render(
-        wrapInTestApp(<TrendLine data={[0.5]} title="sparkline" />),
+    it('renders as a straight line', async () => {
+      const rendered = await renderInTestApp(
+        <TrendLine data={[0.5]} title="sparkline" />,
       );
       expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
     });

packages/core/src/components/WarningPanel/WarningPanel.test.tsx

@@ -15,22 +15,21 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 
 import { WarningPanel } from './WarningPanel';
 
 const minProps = { title: 'Mock title', message: 'Some more info' };
 
 describe('<WarningPanel />', () => {
-  it('renders without exploding', () => {
-    const { getByText } = render(wrapInTestApp(<WarningPanel {...minProps} />));
+  it('renders without exploding', async () => {
+    const { getByText } = await renderInTestApp(<WarningPanel {...minProps} />);
     expect(getByText('Mock title')).toBeInTheDocument();
   });
 
-  it('renders message and children', () => {
-    const { getByText } = render(
-      wrapInTestApp(<WarningPanel {...minProps}>children</WarningPanel>),
+  it('renders message and children', async () => {
+    const { getByText } = await renderInTestApp(
+      <WarningPanel {...minProps}>children</WarningPanel>,
     );
     expect(getByText('Some more info')).toBeInTheDocument();
     expect(getByText('children')).toBeInTheDocument();

packages/core/src/layout/BottomLink/BottomLink.test.tsx

@@ -15,8 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { BottomLink } from './BottomLink';
 
 const minProps = {
@@ -25,8 +24,8 @@ const minProps = {
 };
 
 describe('<BottomLink />', () => {
-  it('renders without exploding', () => {
-    const rendered = render(wrapInTestApp(<BottomLink {...minProps} />));
+  it('renders without exploding', async () => {
+    const rendered = await renderInTestApp(<BottomLink {...minProps} />);
     expect(rendered.getByText('A deepLink title')).toBeInTheDocument();
   });
 });

packages/core/src/layout/ContentHeader/ContentHeader.test.tsx

@@ -15,9 +15,8 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
 import { ContentHeader } from './ContentHeader';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 
 jest.mock('react-helmet', () => {
   return {
@@ -26,23 +25,23 @@ jest.mock('react-helmet', () => {
 });
 
 describe('<ContentHeader/>', () => {
-  it('should render with title', () => {
-    const rendered = render(wrapInTestApp(<ContentHeader title="Title" />));
+  it('should render with title', async () => {
+    const rendered = await renderInTestApp(<ContentHeader title="Title" />);
     rendered.getByText('Title');
   });
 
-  it('should render with titleComponent', () => {
+  it('should render with titleComponent', async () => {
     const title = 'Custom title';
     const titleComponent = () => <h1>{title}</h1>;
-    const rendered = render(
-      wrapInTestApp(<ContentHeader titleComponent={titleComponent} />),
+    const rendered = await renderInTestApp(
+      <ContentHeader titleComponent={titleComponent} />,
     );
     rendered.getByText(title);
   });
 
-  it('should render with description', () => {
-    const rendered = render(
-      wrapInTestApp(<ContentHeader description="description" />),
+  it('should render with description', async () => {
+    const rendered = await renderInTestApp(
+      <ContentHeader description="description" />,
     );
     rendered.getByText('description');
   });

packages/core/src/layout/ErrorPage/ErrorPage.test.tsx

@@ -15,14 +15,13 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
 import { ErrorPage } from './ErrorPage';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 
 describe('<ErrorPage/>', () => {
-  it('should render with status code, status message and go back link', () => {
-    const rendered = render(
-      wrapInTestApp(<ErrorPage status="404" statusMessage="PAGE NOT FOUND" />),
+  it('should render with status code, status message and go back link', async () => {
+    const rendered = await renderInTestApp(
+      <ErrorPage status="404" statusMessage="PAGE NOT FOUND" />,
     );
     rendered.getByText(/page not found/i);
     rendered.getByText(/404/i);

packages/core/src/layout/Header/Header.test.tsx

@@ -15,8 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { Header } from './Header';
 
 jest.mock('react-helmet', () => {
@@ -26,42 +25,42 @@ jest.mock('react-helmet', () => {
 });
 
 describe('<Header/>', () => {
-  it('should render with title', () => {
-    const rendered = render(wrapInTestApp(<Header title="Title" />));
+  it('should render with title', async () => {
+    const rendered = await renderInTestApp(<Header title="Title" />);
     rendered.getByText('Title');
   });
 
-  it('should set document title', () => {
-    const rendered = render(wrapInTestApp(<Header title="Title1" />));
+  it('should set document title', async () => {
+    const rendered = await renderInTestApp(<Header title="Title1" />);
     rendered.getByText('Title1');
     rendered.getByText('defaultTitle: Title1 | Backstage');
   });
 
-  it('should override document title', () => {
-    const rendered = render(
-      wrapInTestApp(<Header title="Title1" pageTitleOverride="Title2" />),
+  it('should override document title', async () => {
+    const rendered = await renderInTestApp(
+      <Header title="Title1" pageTitleOverride="Title2" />,
     );
     rendered.getByText('Title1');
     rendered.getByText('defaultTitle: Title2 | Backstage');
   });
 
-  it('should have subtitle', () => {
-    const rendered = render(
-      wrapInTestApp(<Header title="Title" subtitle="Subtitle" />),
+  it('should have subtitle', async () => {
+    const rendered = await renderInTestApp(
+      <Header title="Title" subtitle="Subtitle" />,
     );
     rendered.getByText('Subtitle');
   });
 
-  it('should have type rendered', () => {
-    const rendered = render(
-      wrapInTestApp(<Header title="Title" type="tool" />),
+  it('should have type rendered', async () => {
+    const rendered = await renderInTestApp(
+      <Header title="Title" type="tool" />,
     );
     rendered.getByText('tool');
   });
 
-  it('should have breadcrumb rendered', () => {
-    const rendered = render(
-      wrapInTestApp(<Header title="Title" type="tool" typeLink="/tool" />),
+  it('should have breadcrumb rendered', async () => {
+    const rendered = await renderInTestApp(
+      <Header title="Title" type="tool" typeLink="/tool" />,
     );
     rendered.getAllByText('Title');
   });

packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx

@@ -16,22 +16,24 @@
 
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { wrapInTestApp, Keyboard } from '@backstage/test-utils';
+import {
+  wrapInTestApp,
+  Keyboard,
+  renderInTestApp,
+} from '@backstage/test-utils';
 import { HeaderActionMenu } from './HeaderActionMenu';
 
 describe('<ComponentContextMenu />', () => {
-  it('renders without any items and without exploding', () => {
-    render(wrapInTestApp(<HeaderActionMenu actionItems={[]} />));
+  it('renders without any items and without exploding', async () => {
+    await renderInTestApp(<HeaderActionMenu actionItems={[]} />);
   });
 
-  it('can open the menu and click menu items', () => {
+  it('can open the menu and click menu items', async () => {
     const onClickFunction = jest.fn();
-    const rendered = render(
-      wrapInTestApp(
-        <HeaderActionMenu
-          actionItems={[{ label: 'Some label', onClick: onClickFunction }]}
-        />,
-      ),
+    const rendered = await renderInTestApp(
+      <HeaderActionMenu
+        actionItems={[{ label: 'Some label', onClick: onClickFunction }]}
+      />,
     );
     expect(rendered.queryByText('Some label')).not.toBeInTheDocument();
     expect(onClickFunction).not.toHaveBeenCalled();
@@ -48,12 +50,10 @@ describe('<ComponentContextMenu />', () => {
   });
 
   it('Disabled', async () => {
-    const rendered = render(
-      wrapInTestApp(
-        <HeaderActionMenu
-          actionItems={[{ label: 'Some label', disabled: true }]}
-        />,
-      ),
+    const rendered = await renderInTestApp(
+      <HeaderActionMenu
+        actionItems={[{ label: 'Some label', disabled: true }]}
+      />,
     );
 
     fireEvent.click(rendered.getByTestId('header-action-menu'));
@@ -63,22 +63,20 @@ describe('<ComponentContextMenu />', () => {
     );
   });
 
-  it('Test wrapper, and secondary label', () => {
+  it('Test wrapper, and secondary label', async () => {
     const onClickFunction = jest.fn();
-    const rendered = render(
-      wrapInTestApp(
-        <HeaderActionMenu
-          actionItems={[
-            {
-              label: 'Some label',
-              secondaryLabel: 'Secondary label',
-              WrapperComponent: ({ children }) => (
-                <button onClick={onClickFunction}>{children}</button>
-              ),
-            },
-          ]}
-        />,
-      ),
+    const rendered = await renderInTestApp(
+      <HeaderActionMenu
+        actionItems={[
+          {
+            label: 'Some label',
+            secondaryLabel: 'Secondary label',
+            WrapperComponent: ({ children }) => (
+              <button onClick={onClickFunction}>{children}</button>
+            ),
+          },
+        ]}
+      />,
     );
 
     expect(onClickFunction).not.toHaveBeenCalled();

packages/core/src/layout/HeaderLabel/HeaderLabel.test.tsx

@@ -15,38 +15,37 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { HeaderLabel } from './HeaderLabel';
 
 describe('<HeaderLabel />', () => {
-  it('should have a label', () => {
-    const rendered = render(wrapInTestApp(<HeaderLabel label="Label" />));
+  it('should have a label', async () => {
+    const rendered = await renderInTestApp(<HeaderLabel label="Label" />);
     expect(rendered.getByText('Label')).toBeInTheDocument();
   });
 
-  it('should say unknown', () => {
-    const rendered = render(wrapInTestApp(<HeaderLabel label="Label" />));
+  it('should say unknown', async () => {
+    const rendered = await renderInTestApp(<HeaderLabel label="Label" />);
     expect(rendered.getByText('<Unknown>')).toBeInTheDocument();
   });
 
-  it('should say unknown when passing null as value prop', () => {
-    const rendered = render(
-      wrapInTestApp(<HeaderLabel label="Label" value={null} />),
+  it('should say unknown when passing null as value prop', async () => {
+    const rendered = await renderInTestApp(
+      <HeaderLabel label="Label" value={null} />,
     );
     expect(rendered.getByText('<Unknown>')).toBeInTheDocument();
   });
 
-  it('should have value', () => {
-    const rendered = render(
-      wrapInTestApp(<HeaderLabel label="Label" value="Value" />),
+  it('should have value', async () => {
+    const rendered = await renderInTestApp(
+      <HeaderLabel label="Label" value="Value" />,
     );
     expect(rendered.getByText('Value')).toBeInTheDocument();
   });
 
-  it('should have a link', () => {
-    const rendered = render(
-      wrapInTestApp(<HeaderLabel label="Label" value="Value" url="/test" />),
+  it('should have a link', async () => {
+    const rendered = await renderInTestApp(
+      <HeaderLabel label="Label" value="Value" url="/test" />,
     );
     const anchor = rendered.container.querySelector('a') as HTMLAnchorElement;
     expect(rendered.getByText('Value')).toBeInTheDocument();

packages/core/src/layout/HeaderTabs/HeaderTabs.test.tsx

@@ -15,8 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { HeaderTabs } from './';
 
 const mockTabs = [
@@ -25,15 +24,15 @@ const mockTabs = [
 ];
 
 describe('<HeaderTabs />', () => {
-  it('should render tabs', () => {
-    const rendered = render(wrapInTestApp(<HeaderTabs tabs={mockTabs} />));
+  it('should render tabs', async () => {
+    const rendered = await renderInTestApp(<HeaderTabs tabs={mockTabs} />);
 
     expect(rendered.getByText('Overview')).toBeInTheDocument();
     expect(rendered.getByText('Docs')).toBeInTheDocument();
   });
 
-  it('should render correct selected tab', () => {
-    const rendered = render(wrapInTestApp(<HeaderTabs tabs={mockTabs} />));
+  it('should render correct selected tab', async () => {
+    const rendered = await renderInTestApp(<HeaderTabs tabs={mockTabs} />);
 
     expect(rendered.getByText('Docs').parentElement).toHaveAttribute(
       'aria-selected',

packages/core/src/layout/InfoCard/InfoCard.test.tsx

@@ -15,8 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { InfoCard } from './InfoCard';
 
 const minProps = {
@@ -28,13 +27,13 @@ const minProps = {
 };
 
 describe('<InfoCard />', () => {
-  it('renders without exploding', () => {
-    const rendered = render(wrapInTestApp(<InfoCard {...minProps} />));
+  it('renders without exploding', async () => {
+    const rendered = await renderInTestApp(<InfoCard {...minProps} />);
     expect(rendered.getByText('Some title')).toBeInTheDocument();
   });
 
-  it('renders a deepLink when prop is set', () => {
-    const rendered = render(wrapInTestApp(<InfoCard {...minProps} />));
+  it('renders a deepLink when prop is set', async () => {
+    const rendered = await renderInTestApp(<InfoCard {...minProps} />);
     expect(rendered.getByText('A deepLink title')).toBeInTheDocument();
   });
 });

packages/core/src/layout/TabbedCard/TabbedCard.test.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp, wrapInTestApp } from '@backstage/test-utils';
 import { TabbedCard, CardTab } from '.';
 
 const minProps = {
@@ -28,38 +28,32 @@ const minProps = {
 };
 
 describe('<TabbedCard />', () => {
-  it('renders without exploding', () => {
-    const rendered = render(
-      wrapInTestApp(
-        <TabbedCard title={minProps.title}>
-          <CardTab label="Test 1">Test Content</CardTab>
-          <CardTab label="Test 2">Test Content</CardTab>
-        </TabbedCard>,
-      ),
+  it('renders without exploding', async () => {
+    const rendered = await renderInTestApp(
+      <TabbedCard title={minProps.title}>
+        <CardTab label="Test 1">Test Content</CardTab>
+        <CardTab label="Test 2">Test Content</CardTab>
+      </TabbedCard>,
     );
     expect(rendered.getByText('Some title')).toBeInTheDocument();
   });
 
-  it('renders a deepLink when prop is set', () => {
-    const rendered = render(
-      wrapInTestApp(
-        <TabbedCard deepLink={minProps.deepLink}>
-          <CardTab label="Test 1">Test Content</CardTab>
-          <CardTab label="Test 2">Test Content</CardTab>
-        </TabbedCard>,
-      ),
+  it('renders a deepLink when prop is set', async () => {
+    const rendered = await renderInTestApp(
+      <TabbedCard deepLink={minProps.deepLink}>
+        <CardTab label="Test 1">Test Content</CardTab>
+        <CardTab label="Test 2">Test Content</CardTab>
+      </TabbedCard>,
     );
     expect(rendered.getByText('A deepLink title')).toBeInTheDocument();
   });
 
-  it('switches tabs when clicking', () => {
-    const rendered = render(
-      wrapInTestApp(
-        <TabbedCard>
-          <CardTab label="Test 1">Test Content 1</CardTab>
-          <CardTab label="Test 2">Test Content 2</CardTab>
-        </TabbedCard>,
-      ),
+  it('switches tabs when clicking', async () => {
+    const rendered = await renderInTestApp(
+      <TabbedCard>
+        <CardTab label="Test 1">Test Content 1</CardTab>
+        <CardTab label="Test 2">Test Content 2</CardTab>
+      </TabbedCard>,
     );
     expect(rendered.getByText('Test Content 1')).toBeInTheDocument();