refactor tests to use renderInTestApp

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/catalog/src/components/EntityLinksCard/IconLink.test.tsx

@@ -14,23 +14,16 @@
  * limitations under the License.
  */
 
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
+import { renderInTestApp } from '@backstage/test-utils';
 import CloudIcon from '@material-ui/icons/Cloud';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import React from 'react';
 import { IconLink } from './IconLink';
 
 describe('IconLink', () => {
-  it('should render an icon link', () => {
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <IconLink
-          href="https://example.com"
-          text="I am Link"
-          Icon={CloudIcon}
-        />
-      </ThemeProvider>,
+  it('should render an icon link', async () => {
+    await renderInTestApp(
+      <IconLink href="https://example.com" text="I am Link" Icon={CloudIcon} />,
     );
 
     expect(screen.getByText('I am Link')).toBeInTheDocument();

plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.test.tsx

@@ -15,18 +15,14 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import { CodeClimateTable } from './CodeClimateTable';
 import { mockData } from '../../api/mock/mock-api';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 
 describe('CodeClimateTable', () => {
   it('should render values in a table', async () => {
-    const table = await render(
-      <ThemeProvider theme={lightTheme}>
-        <CodeClimateTable codeClimateData={mockData} />
-      </ThemeProvider>,
+    const table = await renderInTestApp(
+      <CodeClimateTable codeClimateData={mockData} />,
     );
     expect(await table.findByText('3 months')).toBeInTheDocument();
     expect(await table.findByText('88%')).toBeInTheDocument();

plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.test.tsx

@@ -15,41 +15,33 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import { GraphiQLBrowser } from './GraphiQLBrowser';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 
-jest.mock('graphiql', () => () => '<GraphiQL />');
+jest.mock('graphiql', () => ({ GraphiQL: () => '<GraphiQL />' }));
 
 describe('GraphiQLBrowser', () => {
-  it('should render error text if there are no endpoints', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <GraphiQLBrowser endpoints={[]} />
-      </ThemeProvider>,
-    );
+  it('should render error text if there are no endpoints', async () => {
+    const rendered = await renderInTestApp(<GraphiQLBrowser endpoints={[]} />);
     rendered.getByText('No endpoints available');
   });
 
-  it('should render endpoint tabs', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <GraphiQLBrowser
-          endpoints={[
-            {
-              id: 'a',
-              title: 'Endpoint A',
-              async fetcher() {},
-            },
-            {
-              id: 'b',
-              title: 'Endpoint B',
-              async fetcher() {},
-            },
-          ]}
-        />
-      </ThemeProvider>,
+  it('should render endpoint tabs', async () => {
+    const rendered = await renderInTestApp(
+      <GraphiQLBrowser
+        endpoints={[
+          {
+            id: 'a',
+            title: 'Endpoint A',
+            async fetcher() {},
+          },
+          {
+            id: 'b',
+            title: 'Endpoint B',
+            async fetcher() {},
+          },
+        ]}
+      />,
     );
     rendered.getByText('Endpoint A');
     rendered.getByText('Endpoint B');

plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.test.tsx

@@ -16,13 +16,9 @@
 
 import React from 'react';
 import { GraphiQLPage } from './GraphiQLPage';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { act } from '@testing-library/react';
-import { renderWithEffects, TestApiProvider } from '@backstage/test-utils';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { GraphQLBrowseApi, graphQlBrowseApiRef } from '../../lib/api';
-import { configApiRef } from '@backstage/core-plugin-api';
-import { ConfigReader } from '@backstage/core-app-api';
 
 jest.mock('../GraphiQLBrowser', () => ({
   GraphiQLBrowser: () => '<GraphiQLBrowser />',
@@ -38,17 +34,9 @@ describe('GraphiQLPage', () => {
       },
     };
 
-    const rendered = await renderWithEffects(
-      <TestApiProvider
-        apis={[
-          [graphQlBrowseApiRef, loadingApi],
-          [configApiRef, new ConfigReader({})],
-        ]}
-      >
-        <ThemeProvider theme={lightTheme}>
-          <GraphiQLPage />
-        </ThemeProvider>
-        ,
+    const rendered = await renderInTestApp(
+      <TestApiProvider apis={[[graphQlBrowseApiRef, loadingApi]]}>
+        <GraphiQLPage />,
       </TestApiProvider>,
     );
     act(() => {
@@ -66,16 +54,9 @@ describe('GraphiQLPage', () => {
       },
     };
 
-    const rendered = await renderWithEffects(
-      <TestApiProvider
-        apis={[
-          [graphQlBrowseApiRef, loadingApi],
-          [configApiRef, new ConfigReader({})],
-        ]}
-      >
-        <ThemeProvider theme={lightTheme}>
-          <GraphiQLPage />
-        </ThemeProvider>
+    const rendered = await renderInTestApp(
+      <TestApiProvider apis={[[graphQlBrowseApiRef, loadingApi]]}>
+        <GraphiQLPage />
       </TestApiProvider>,
     );
 
@@ -90,16 +71,9 @@ describe('GraphiQLPage', () => {
       },
     };
 
-    const rendered = await renderWithEffects(
-      <TestApiProvider
-        apis={[
-          [graphQlBrowseApiRef, loadingApi],
-          [configApiRef, new ConfigReader({})],
-        ]}
-      >
-        <ThemeProvider theme={lightTheme}>
-          <GraphiQLPage />
-        </ThemeProvider>
+    const rendered = await renderInTestApp(
+      <TestApiProvider apis={[[graphQlBrowseApiRef, loadingApi]]}>
+        <GraphiQLPage />
       </TestApiProvider>,
     );
 

plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx

@@ -16,11 +16,8 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
-import { render } from '@testing-library/react';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import {
   lighthouseApiRef,
   LighthouseRestApi,
@@ -30,36 +27,18 @@ import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
 import * as data from '../../__fixtures__/website-list-response.json';
 import { AuditListForEntity } from './AuditListForEntity';
 
-import { ApiProvider } from '@backstage/core-app-api';
-import { errorApiRef } from '@backstage/core-plugin-api';
-import { TestApiRegistry } from '@backstage/test-utils';
-
 jest.mock('../../hooks/useWebsiteForEntity', () => ({
   useWebsiteForEntity: jest.fn(),
 }));
 
+const useWebsiteForEntityMock = useWebsiteForEntity as jest.Mock;
+
 const websiteListResponse = data as WebsiteListResponse;
 const entityWebsite = websiteListResponse.items[0];
 
 describe('<AuditListTableForEntity />', () => {
-  let apis: TestApiRegistry;
-
-  const mockErrorApi: jest.Mocked<typeof errorApiRef.T> = {
-    post: jest.fn(),
-    error$: jest.fn(),
-  };
-
-  beforeEach(() => {
-    apis = TestApiRegistry.from(
-      [lighthouseApiRef, new LighthouseRestApi('http://lighthouse')],
-      [errorApiRef, mockErrorApi],
-    );
-
-    (useWebsiteForEntity as jest.Mock).mockReturnValue({
-      value: entityWebsite,
-      loading: false,
-      error: null,
-    });
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
   const entity: Entity = {
@@ -78,66 +57,55 @@ describe('<AuditListTableForEntity />', () => {
     },
   };
 
-  const subject = () =>
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <MemoryRouter>
-          <ApiProvider apis={apis}>
-            <EntityProvider entity={entity}>
-              <AuditListForEntity />
-            </EntityProvider>
-          </ApiProvider>
-        </MemoryRouter>
-      </ThemeProvider>,
-    );
+  const subject = () => (
+    <TestApiProvider
+      apis={[[lighthouseApiRef, new LighthouseRestApi('http://lighthouse')]]}
+    >
+      <EntityProvider entity={entity}>
+        <AuditListForEntity />
+      </EntityProvider>
+    </TestApiProvider>
+  );
 
   it('renders the audit list for the entity', async () => {
-    const { findByText } = subject();
+    useWebsiteForEntityMock.mockReturnValue({
+      value: entityWebsite,
+      loading: false,
+      error: null,
+    });
+    const { findByText } = await renderInTestApp(subject());
     expect(await findByText(entityWebsite.url)).toBeInTheDocument();
   });
 
-  describe('where the data is loading', () => {
-    beforeEach(() => {
-      (useWebsiteForEntity as jest.Mock).mockReturnValue({
-        value: null,
-        loading: true,
-        error: null,
-      });
+  it('renders a Progress element where the data is loading', async () => {
+    useWebsiteForEntityMock.mockReturnValue({
+      value: null,
+      loading: true,
+      error: null,
     });
 
-    it('renders a Progress element', async () => {
-      const { findByTestId } = subject();
-      expect(await findByTestId('progress')).toBeInTheDocument();
-    });
+    const { findByTestId } = await renderInTestApp(subject());
+    expect(await findByTestId('progress')).toBeInTheDocument();
   });
 
-  describe('where there is an error loading data', () => {
-    beforeEach(() => {
-      (useWebsiteForEntity as jest.Mock).mockReturnValue({
-        value: null,
-        loading: false,
-        error: 'error',
-      });
-    });
-
-    it('renders nothing', async () => {
-      const { queryByTestId } = subject();
-      expect(queryByTestId('AuditListTable')).toBeNull();
+  it('renders nothing where there is an error loading data', async () => {
+    useWebsiteForEntityMock.mockReturnValue({
+      value: null,
+      loading: false,
+      error: 'error',
     });
+    const { queryByTestId } = await renderInTestApp(subject());
+    expect(queryByTestId('AuditListTable')).toBeNull();
   });
 
-  describe('where there is not data', () => {
-    beforeEach(() => {
-      (useWebsiteForEntity as jest.Mock).mockReturnValue({
-        value: null,
-        loading: false,
-        error: null,
-      });
+  it('renders nothing where there is not data', async () => {
+    useWebsiteForEntityMock.mockReturnValue({
+      value: null,
+      loading: false,
+      error: null,
     });
 
-    it('renders nothing', async () => {
-      const { queryByTestId } = subject();
-      expect(queryByTestId('AuditListTable')).toBeNull();
-    });
+    const { queryByTestId } = await renderInTestApp(subject());
+    expect(queryByTestId('AuditListTable')).toBeNull();
   });
 });

plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx

@@ -16,11 +16,8 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
-import { render } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import {
   AuditCompleted,
   LighthouseCategoryId,
@@ -64,22 +61,15 @@ describe('<LastLighthouseAuditCard />', () => {
     },
   };
 
-  const subject = () =>
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <MemoryRouter>
-          <EntityProvider entity={entity}>
-            <LastLighthouseAuditCard />
-          </EntityProvider>
-        </MemoryRouter>
-      </ThemeProvider>,
-    );
-
   describe('where the last audit completed successfully', () => {
     const audit = entityWebsite.lastAudit as AuditCompleted;
 
     it('renders the performance data for the audit', async () => {
-      const { findByText } = subject();
+      const { findByText } = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
       expect(await findByText(audit.url)).toBeInTheDocument();
       expect(await findByText(audit.status)).toBeInTheDocument();
       for (const category of Object.keys(audit.categories)) {
@@ -101,7 +91,11 @@ describe('<LastLighthouseAuditCard />', () => {
       });
 
       it('renders the performance data for the audit', async () => {
-        const { findByText } = subject();
+        const { findByText } = await renderInTestApp(
+          <EntityProvider entity={entity}>
+            <LastLighthouseAuditCard />
+          </EntityProvider>,
+        );
         expect(await findByText('N/A')).toBeInTheDocument();
       });
     });
@@ -119,7 +113,11 @@ describe('<LastLighthouseAuditCard />', () => {
     });
 
     it('renders the url and status of the audit', async () => {
-      const { findByText } = subject();
+      const { findByText } = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
       expect(await findByText(audit.url)).toBeInTheDocument();
       expect(await findByText(audit.status)).toBeInTheDocument();
     });
@@ -135,7 +133,11 @@ describe('<LastLighthouseAuditCard />', () => {
     });
 
     it('renders a Progress element', async () => {
-      const { findByTestId } = subject();
+      const { findByTestId } = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
       expect(await findByTestId('progress')).toBeInTheDocument();
     });
   });
@@ -150,7 +152,11 @@ describe('<LastLighthouseAuditCard />', () => {
     });
 
     it('renders nothing', async () => {
-      const { queryByTestId } = subject();
+      const { queryByTestId } = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
       expect(queryByTestId('AuditListTable')).toBeNull();
     });
   });
@@ -165,7 +171,11 @@ describe('<LastLighthouseAuditCard />', () => {
     });
 
     it('renders nothing', async () => {
-      const { queryByTestId } = subject();
+      const { queryByTestId } = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
       expect(queryByTestId('AuditListTable')).toBeNull();
     });
   });

plugins/scaffolder/src/components/TaskPage/IconLink.test.tsx

@@ -14,23 +14,15 @@
  * limitations under the License.
  */
 
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
+import { renderInTestApp } from '@backstage/test-utils';
 import CloudIcon from '@material-ui/icons/Cloud';
-import { render } from '@testing-library/react';
 import React from 'react';
 import { IconLink } from './IconLink';
 
 describe('IconLink', () => {
-  it('should render an icon link', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <IconLink
-          href="https://example.com"
-          text="I am Link"
-          Icon={CloudIcon}
-        />
-      </ThemeProvider>,
+  it('should render an icon link', async () => {
+    const rendered = await renderInTestApp(
+      <IconLink href="https://example.com" text="I am Link" Icon={CloudIcon} />,
     );
 
     expect(rendered.getByText('I am Link')).toBeInTheDocument();

plugins/sentry/src/components/ErrorCell/ErrorCell.test.tsx

@@ -16,10 +16,8 @@
 
 import { ErrorCell } from './ErrorCell';
 import React from 'react';
-import { render } from '@testing-library/react';
 import mockIssue from '../../api/mock/sentry-issue-mock.json';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 
 describe('Sentry error cell component', () => {
   it('should render a link that lead to Sentry', async () => {
@@ -33,11 +31,7 @@ describe('Sentry error cell component', () => {
       userCount: 2,
       permalink: 'http://example.com',
     };
-    const cell = render(
-      <ThemeProvider theme={lightTheme}>
-        <ErrorCell sentryIssue={testIssue} />
-      </ThemeProvider>,
-    );
+    const cell = await renderInTestApp(<ErrorCell sentryIssue={testIssue} />);
     const errorType = await cell.findByText('Exception');
     expect(errorType.closest('a')).toHaveAttribute(
       'href',
@@ -53,11 +47,7 @@ describe('Sentry error cell component', () => {
       userCount: 2,
       permalink: 'http://example.com',
     };
-    const cell = render(
-      <ThemeProvider theme={lightTheme}>
-        <ErrorCell sentryIssue={testIssue} />
-      </ThemeProvider>,
-    );
+    const cell = await renderInTestApp(<ErrorCell sentryIssue={testIssue} />);
     const errorType = await cell.findByText('Exception: Could not load cr...');
     expect(errorType.closest('a')).toHaveAttribute(
       'href',

plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx

@@ -15,12 +15,10 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
 import SentryIssuesTable from './SentryIssuesTable';
 import { SentryIssue } from '../../api';
 import mockIssue from '../../api/mock/sentry-issue-mock.json';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 
 describe('SentryIssuesTable', () => {
   it('should render headers in a table', async () => {
@@ -35,19 +33,17 @@ describe('SentryIssuesTable', () => {
         userCount: 2,
       },
     ];
-    const table = await render(
-      <ThemeProvider theme={lightTheme}>
-        <SentryIssuesTable
-          sentryIssues={issues}
-          statsFor="24h"
-          tableOptions={{
-            padding: 'dense',
-            paging: true,
-            search: false,
-            pageSize: 5,
-          }}
-        />
-      </ThemeProvider>,
+    const table = await renderInTestApp(
+      <SentryIssuesTable
+        sentryIssues={issues}
+        statsFor="24h"
+        tableOptions={{
+          padding: 'dense',
+          paging: true,
+          search: false,
+          pageSize: 5,
+        }}
+      />,
     );
     expect(await table.findByText('Error')).toBeInTheDocument();
     expect(await table.findByText('Graph')).toBeInTheDocument();
@@ -68,19 +64,17 @@ describe('SentryIssuesTable', () => {
         userCount: 202,
       },
     ];
-    const table = await render(
-      <ThemeProvider theme={lightTheme}>
-        <SentryIssuesTable
-          sentryIssues={issues}
-          statsFor="24h"
-          tableOptions={{
-            padding: 'dense',
-            paging: true,
-            search: false,
-            pageSize: 5,
-          }}
-        />
-      </ThemeProvider>,
+    const table = await renderInTestApp(
+      <SentryIssuesTable
+        sentryIssues={issues}
+        statsFor="24h"
+        tableOptions={{
+          padding: 'dense',
+          paging: true,
+          search: false,
+          pageSize: 5,
+        }}
+      />,
     );
     expect(await table.findByText('Exception')).toBeInTheDocument();
     expect(await table.findByText('exception was thrown')).toBeInTheDocument();
@@ -99,19 +93,17 @@ describe('SentryIssuesTable', () => {
         userCount: 202,
       },
     ];
-    const table = await render(
-      <ThemeProvider theme={lightTheme}>
-        <SentryIssuesTable
-          sentryIssues={issues}
-          statsFor="24h"
-          tableOptions={{
-            padding: 'dense',
-            paging: true,
-            search: false,
-            pageSize: 5,
-          }}
-        />
-      </ThemeProvider>,
+    const table = await renderInTestApp(
+      <SentryIssuesTable
+        sentryIssues={issues}
+        statsFor="24h"
+        tableOptions={{
+          padding: 'dense',
+          paging: true,
+          search: false,
+          pageSize: 5,
+        }}
+      />,
     );
     expect(await table.findByText('Last 24h')).toBeInTheDocument();
   });

plugins/tech-radar/src/components/Radar/Radar.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import Radar, { Props } from './Radar';
@@ -48,12 +46,8 @@ describe('Radar', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <Radar {...minProps} />
-      </ThemeProvider>,
-    );
+  it('should render', async () => {
+    const rendered = await renderInTestApp(<Radar {...minProps} />);
 
     const svg = rendered.container.querySelector('svg');
     expect(svg).not.toBeNull();

plugins/tech-radar/src/components/RadarBubble/RadarBubble.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import RadarBubble, { Props } from './RadarBubble';
@@ -38,13 +36,11 @@ describe('RadarBubble', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarBubble {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarBubble {...minProps} />
+      </svg>,
     );
 
     expect(rendered.getByText(minProps.text)).toBeInTheDocument();

plugins/tech-radar/src/components/RadarComponent.test.tsx

@@ -15,10 +15,7 @@
  */
 
 import React from 'react';
-import { act, render, waitFor } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
-import { TestApiProvider, withLogCollector } from '@backstage/test-utils';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 
 import GetBBoxPolyfill from '../utils/polyfills/getBBox';
 import { RadarComponent } from './RadarComponent';
@@ -36,7 +33,9 @@ describe('RadarComponent', () => {
   });
 
   class MockClient implements TechRadarApi {
+    constructor(private delay = 0) {}
     async load(): Promise<TechRadarLoaderResponse> {
+      await new Promise(resolve => setTimeout(resolve, this.delay));
       return {
         entries: [],
         quadrants: [],
@@ -45,87 +44,52 @@ describe('RadarComponent', () => {
     }
   }
 
-  const mockClient = new MockClient();
-
   it('should render a progress bar', async () => {
     jest.useFakeTimers();
 
-    const errorApi = { post: () => {} };
-    const { getByTestId, findByTestId } = render(
-      <ThemeProvider theme={lightTheme}>
-        <TestApiProvider
-          apis={[
-            [errorApiRef, errorApi],
-            [techRadarApiRef, mockClient],
-          ]}
-        >
-          <RadarComponent
-            width={1200}
-            height={800}
-            svgProps={{ 'data-testid': 'tech-radar-svg' }}
-          />
-        </TestApiProvider>
-      </ThemeProvider>,
+    const { findByTestId } = await renderInTestApp(
+      <TestApiProvider apis={[[techRadarApiRef, new MockClient(500)]]}>
+        <RadarComponent
+          width={1200}
+          height={800}
+          svgProps={{ 'data-testid': 'tech-radar-svg' }}
+        />
+      </TestApiProvider>,
     );
 
-    act(() => {
-      jest.advanceTimersByTime(250);
-    });
-    expect(getByTestId('progress')).toBeInTheDocument();
+    jest.advanceTimersByTime(250);
+    await expect(findByTestId('progress')).resolves.toBeInTheDocument();
+
+    jest.advanceTimersByTime(250);
+    await expect(findByTestId('tech-radar-svg')).resolves.toBeInTheDocument();
 
-    await findByTestId('tech-radar-svg');
     jest.useRealTimers();
   });
 
   it('should call the errorApi if load fails', async () => {
     const errorApi = { post: jest.fn() };
+    const mockClient = new MockClient();
     jest
       .spyOn(mockClient, 'load')
       .mockRejectedValue(new Error('404 Page Not Found'));
 
-    const { queryByTestId } = render(
-      <ThemeProvider theme={lightTheme}>
-        <TestApiProvider
-          apis={[
-            [errorApiRef, errorApi],
-            [techRadarApiRef, mockClient],
-          ]}
-        >
-          <RadarComponent
-            width={1200}
-            height={800}
-            svgProps={{ 'data-testid': 'tech-radar-svg' }}
-          />
-        </TestApiProvider>
-      </ThemeProvider>,
+    const { queryByTestId } = await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [errorApiRef, errorApi],
+          [techRadarApiRef, mockClient],
+        ]}
+      >
+        <RadarComponent
+          width={1200}
+          height={800}
+          svgProps={{ 'data-testid': 'tech-radar-svg' }}
+        />
+      </TestApiProvider>,
     );
 
-    await waitFor(() => !queryByTestId('progress'));
-
     expect(errorApi.post).toHaveBeenCalledTimes(1);
     expect(errorApi.post).toHaveBeenCalledWith(new Error('404 Page Not Found'));
     expect(queryByTestId('tech-radar-svg')).not.toBeInTheDocument();
   });
-
-  it('should not render without errorApiRef', () => {
-    expect(
-      withLogCollector(['error'], () => {
-        expect(() => {
-          render(
-            <ThemeProvider theme={lightTheme}>
-              <TestApiProvider apis={[]}>
-                <RadarComponent
-                  width={1200}
-                  height={800}
-                  svgProps={{ 'data-testid': 'tech-radar-svg' }}
-                />
-              </TestApiProvider>
-            </ThemeProvider>,
-          );
-        }).toThrow();
-      }).error[0],
-    ).toMatchObject({
-      detail: new Error('No implementation available for apiRef{core.error}'),
-    });
-  });
 });

plugins/tech-radar/src/components/RadarDescription/RadarDescription.test.tsx

@@ -15,11 +15,10 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { screen } from '@testing-library/react';
 
 import { Props, RadarDescription } from './RadarDescription';
+import { renderInTestApp } from '@backstage/test-utils';
 
 const minProps: Props = {
   open: true,
@@ -29,12 +28,8 @@ const minProps: Props = {
 };
 
 describe('RadarDescription', () => {
-  it('should render', () => {
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <RadarDescription {...minProps} />
-      </ThemeProvider>,
-    );
+  it('should render', async () => {
+    await renderInTestApp(<RadarDescription {...minProps} />);
 
     const radarDescription = screen.getByTestId('radar-description');
     expect(radarDescription).toBeInTheDocument();

plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx

@@ -15,10 +15,9 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import userEvent from '@testing-library/user-event';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import RadarEntry, { Props } from './RadarEntry';
@@ -45,13 +44,11 @@ describe('RadarEntry', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render link only', () => {
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarEntry {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render link only', async () => {
+    await renderInTestApp(
+      <svg>
+        <RadarEntry {...minProps} />
+      </svg>,
     );
 
     const radarEntry = screen.getByTestId('radar-entry');
@@ -62,12 +59,10 @@ describe('RadarEntry', () => {
   });
 
   it('should render with description', async () => {
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarEntry {...optionalProps} />
-        </svg>
-      </ThemeProvider>,
+    await renderInTestApp(
+      <svg>
+        <RadarEntry {...optionalProps} />
+      </svg>,
     );
 
     await userEvent.click(screen.getByRole('button'));
@@ -80,17 +75,15 @@ describe('RadarEntry', () => {
     expect(screen.getByText(String(minProps.value))).toBeInTheDocument();
   });
 
-  it('should render blip with url equal to # if description present', () => {
+  it('should render blip with url equal to # if description present', async () => {
     const withUrl = {
       ...optionalProps,
       url: 'http://backstage.io',
     };
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarEntry {...withUrl} />
-        </svg>
-      </ThemeProvider>,
+    await renderInTestApp(
+      <svg>
+        <RadarEntry {...withUrl} />
+      </svg>,
     );
 
     expect(screen.getByRole('button')).toHaveAttribute('href', '#');

plugins/tech-radar/src/components/RadarFooter/RadarFooter.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import RadarFooter, { Props } from './RadarFooter';
@@ -36,13 +34,11 @@ describe('RadarFooter', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarFooter {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarFooter {...minProps} />
+      </svg>,
     );
     const radarFooter = rendered.getByTestId('radar-footer');
     const { x, y } = minProps;

plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import RadarGrid, { Props } from './RadarGrid';
@@ -36,13 +34,11 @@ describe('RadarGrid', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarGrid {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarGrid {...minProps} />
+      </svg>,
     );
 
     expect(rendered.getByTestId('radar-grid-x-line')).toBeInTheDocument();

plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx

@@ -14,9 +14,7 @@
  * limitations under the License.
  */
 
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
-import { render } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
@@ -47,13 +45,11 @@ describe('RadarLegend', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarLegend {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarLegend {...minProps} />
+      </svg>,
     );
 
     expect(rendered.getByTestId('radar-legend')).toBeInTheDocument();

plugins/tech-radar/src/components/RadarPlot/RadarPlot.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import RadarPlot, { Props } from './RadarPlot';
@@ -49,13 +47,11 @@ describe('RadarPlot', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarPlot {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarPlot {...minProps} />
+      </svg>,
     );
 
     expect(rendered.getByTestId('radar-plot')).toBeInTheDocument();