diff --git a/.changeset/blue-carrots-cross.md b/.changeset/blue-carrots-cross.md
new file mode 100644
index 0000000000..fdf91e673c
--- /dev/null
+++ b/.changeset/blue-carrots-cross.md
@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Removed unnecessary usage of `ThemeProvider` from the `ExampleComponent` test in the plugin template.
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs
index ae626c0d57..b04e8a2f48 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs
@@ -1,7 +1,5 @@
 import React from 'react';
 import { ExampleComponent } from './ExampleComponent';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { screen } from '@testing-library/react';
@@ -23,11 +21,7 @@ describe('ExampleComponent', () => {
   });
 
   it('should render', async () => {
-    await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <ExampleComponent />
-      </ThemeProvider>,
-    );
+    await renderInTestApp(<ExampleComponent />);
     expect(screen.getByText('Welcome to {{ id }}!')).toBeInTheDocument();
   });
 });
diff --git a/plugins/allure/src/components/AllureReportComponent/AllureReportComponent.test.tsx b/plugins/allure/src/components/AllureReportComponent/AllureReportComponent.test.tsx
index e6355d861f..a21ecbe10e 100644
--- a/plugins/allure/src/components/AllureReportComponent/AllureReportComponent.test.tsx
+++ b/plugins/allure/src/components/AllureReportComponent/AllureReportComponent.test.tsx
@@ -15,8 +15,6 @@
  */
 import React from 'react';
 import { AllureReportComponent } from './AllureReportComponent';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import {
@@ -39,17 +37,15 @@ describe('ExampleComponent', () => {
 
   it('should render', async () => {
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <EntityProvider
-          entity={{
-            apiVersion: 'backstage.io/v1alpha1',
-            kind: 'Component',
-            metadata: { name: 'test' },
-          }}
-        >
-          <AllureReportComponent />
-        </EntityProvider>
-      </ThemeProvider>,
+      <EntityProvider
+        entity={{
+          apiVersion: 'backstage.io/v1alpha1',
+          kind: 'Component',
+          metadata: { name: 'test' },
+        }}
+      >
+        <AllureReportComponent />
+      </EntityProvider>,
     );
     expect(rendered.getByText('Missing Annotation')).toBeInTheDocument();
   });
diff --git a/plugins/catalog/src/components/EntityLinksCard/IconLink.test.tsx b/plugins/catalog/src/components/EntityLinksCard/IconLink.test.tsx
index be784ae3e8..509a3f3741 100644
--- a/plugins/catalog/src/components/EntityLinksCard/IconLink.test.tsx
+++ b/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();
diff --git a/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.test.tsx b/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.test.tsx
index 70d34d0298..e5703a993e 100644
--- a/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.test.tsx
+++ b/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();
diff --git a/plugins/codescene/src/components/CodeScenePageComponent/CodeScenePageComponent.test.tsx b/plugins/codescene/src/components/CodeScenePageComponent/CodeScenePageComponent.test.tsx
index d8ffca841d..a1d7690ca8 100644
--- a/plugins/codescene/src/components/CodeScenePageComponent/CodeScenePageComponent.test.tsx
+++ b/plugins/codescene/src/components/CodeScenePageComponent/CodeScenePageComponent.test.tsx
@@ -15,8 +15,6 @@
  */
 import React from 'react';
 import { CodeScenePageComponent } from './CodeScenePageComponent';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { rootRouteRef } from '../../routes';
@@ -54,9 +52,7 @@ describe('CodeScenePageComponent', () => {
   it('should render', async () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
-        <ThemeProvider theme={lightTheme}>
-          <CodeScenePageComponent />
-        </ThemeProvider>
+        <CodeScenePageComponent />
       </ApiProvider>,
       {
         mountedRoutes: {
diff --git a/plugins/codescene/src/components/CodeSceneProjectDetailsPage/CodeSceneProjectDetailsPage.test.tsx b/plugins/codescene/src/components/CodeSceneProjectDetailsPage/CodeSceneProjectDetailsPage.test.tsx
index 9ace0f1224..8ea1a0235f 100644
--- a/plugins/codescene/src/components/CodeSceneProjectDetailsPage/CodeSceneProjectDetailsPage.test.tsx
+++ b/plugins/codescene/src/components/CodeSceneProjectDetailsPage/CodeSceneProjectDetailsPage.test.tsx
@@ -15,8 +15,6 @@
  */
 import React from 'react';
 import { CodeSceneProjectDetailsPage } from './CodeSceneProjectDetailsPage';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import {
@@ -90,9 +88,7 @@ describe('CodeSceneProjectDetailsPage', () => {
   it('should render', async () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
-        <ThemeProvider theme={lightTheme}>
-          <CodeSceneProjectDetailsPage />
-        </ThemeProvider>
+        <CodeSceneProjectDetailsPage />
       </ApiProvider>,
     );
     expect(rendered.getByText('CodeScene: test-project')).toBeInTheDocument();
diff --git a/plugins/codescene/src/components/ProjectsComponent/ProjectsComponent.test.tsx b/plugins/codescene/src/components/ProjectsComponent/ProjectsComponent.test.tsx
index 4c9ee9ed42..40aee57312 100644
--- a/plugins/codescene/src/components/ProjectsComponent/ProjectsComponent.test.tsx
+++ b/plugins/codescene/src/components/ProjectsComponent/ProjectsComponent.test.tsx
@@ -15,8 +15,6 @@
  */
 import React from 'react';
 import { ProjectsComponent } from './ProjectsComponent';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { rootRouteRef } from '../../routes';
@@ -90,9 +88,7 @@ describe('ProjectsComponent', () => {
   it('should render', async () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
-        <ThemeProvider theme={lightTheme}>
-          <ProjectsComponent />
-        </ThemeProvider>
+        <ProjectsComponent />
       </ApiProvider>,
       {
         mountedRoutes: {
diff --git a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.test.tsx b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.test.tsx
index f3cca5642f..7c5259d96b 100644
--- a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.test.tsx
+++ b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.test.tsx
@@ -16,8 +16,6 @@
 
 import { ExploreTool } from '@backstage/plugin-explore-common';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
 import { exploreApiRef } from '../../api';
@@ -29,11 +27,9 @@ describe('<ToolExplorerContent />', () => {
   };
 
   const Wrapper = ({ children }: { children?: React.ReactNode }) => (
-    <ThemeProvider theme={lightTheme}>
-      <TestApiProvider apis={[[exploreApiRef, exploreApi]]}>
-        {children}
-      </TestApiProvider>
-    </ThemeProvider>
+    <TestApiProvider apis={[[exploreApiRef, exploreApi]]}>
+      {children}
+    </TestApiProvider>
   );
 
   beforeEach(() => {
diff --git a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.test.tsx b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.test.tsx
index e158bcf6ad..5aa59a1cae 100644
--- a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.test.tsx
+++ b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.test.tsx
@@ -15,8 +15,6 @@
  */
 
 import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import React from 'react';
 import { gitOpsApiRef, GitOpsRestApi } from '../../api';
 import ProfileCatalog from './ProfileCatalog';
@@ -47,11 +45,9 @@ describe('ProfileCatalog', () => {
     );
 
     const { getByText } = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <ApiProvider apis={apis}>
-          <ProfileCatalog />
-        </ApiProvider>
-      </ThemeProvider>,
+      <ApiProvider apis={apis}>
+        <ProfileCatalog />
+      </ApiProvider>,
     );
 
     expect(getByText('Create GitOps-managed Cluster')).toBeInTheDocument();
diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.test.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.test.tsx
index 7724a2ae23..3156662bf3 100644
--- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.test.tsx
+++ b/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');
diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.test.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.test.tsx
index 90f8edd4ad..9923facc7b 100644
--- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.test.tsx
+++ 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>,
     );
 
diff --git a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx
index db92fbb89f..03f19fb046 100644
--- a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx
+++ b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx
@@ -17,8 +17,6 @@
 import { renderInTestApp } from '@backstage/test-utils';
 import { HeaderWorldClock, ClockConfig } from './HeaderWorldClock';
 import React from 'react';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 
 describe('HeaderWorldClock with valid Time Zones', () => {
   it('displays Time Zones as expected', async () => {
@@ -42,9 +40,7 @@ describe('HeaderWorldClock with valid Time Zones', () => {
     ];
 
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <HeaderWorldClock clockConfigs={clockConfigs} />
-      </ThemeProvider>,
+      <HeaderWorldClock clockConfigs={clockConfigs} />,
     );
 
     expect(rendered.getByText('NYC')).toBeInTheDocument();
@@ -59,9 +55,7 @@ describe('HeaderWorldClock with no Time Zones provided', () => {
     const clockConfigs: ClockConfig[] = [];
 
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <HeaderWorldClock clockConfigs={clockConfigs} />
-      </ThemeProvider>,
+      <HeaderWorldClock clockConfigs={clockConfigs} />,
     );
 
     expect(rendered.container).toBeEmptyDOMElement();
@@ -78,9 +72,7 @@ describe('HeaderWorldClock with invalid Time Zone', () => {
     ];
 
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <HeaderWorldClock clockConfigs={clockConfigs} />
-      </ThemeProvider>,
+      <HeaderWorldClock clockConfigs={clockConfigs} />,
     );
 
     expect(rendered.getByText('GMT')).toBeInTheDocument();
@@ -105,12 +97,10 @@ describe('HeaderWorldClock with custom Time Format', () => {
     };
 
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <HeaderWorldClock
-          clockConfigs={clockConfigs}
-          customTimeFormat={timeFormat}
-        />
-      </ThemeProvider>,
+      <HeaderWorldClock
+        clockConfigs={clockConfigs}
+        customTimeFormat={timeFormat}
+      />,
     );
 
     expect(rendered.getByText('09:10')).toBeInTheDocument();
diff --git a/plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx b/plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx
index 3e34eed6e3..59892e1475 100644
--- a/plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx
+++ b/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();
   });
 });
diff --git a/plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx b/plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx
index ab1e2683b6..c59458f3f3 100644
--- a/plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx
+++ b/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();
     });
   });
diff --git a/plugins/playlist/src/components/PlaylistCard/PlaylistCard.test.tsx b/plugins/playlist/src/components/PlaylistCard/PlaylistCard.test.tsx
index 177cc23b81..5a34aa93e2 100644
--- a/plugins/playlist/src/components/PlaylistCard/PlaylistCard.test.tsx
+++ b/plugins/playlist/src/components/PlaylistCard/PlaylistCard.test.tsx
@@ -16,8 +16,6 @@
 
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import React from 'react';
 
 import { rootRouteRef } from '../../routes';
@@ -26,20 +24,18 @@ import { PlaylistCard } from './PlaylistCard';
 describe('<PlaylistCard/>', () => {
   it('renders playlist info', async () => {
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <PlaylistCard
-          playlist={{
-            id: 'id1',
-            name: 'playlist-1',
-            description: 'test description',
-            owner: 'group:default/some-owner',
-            public: true,
-            entities: 3,
-            followers: 2,
-            isFollowing: false,
-          }}
-        />
-      </ThemeProvider>,
+      <PlaylistCard
+        playlist={{
+          id: 'id1',
+          name: 'playlist-1',
+          description: 'test description',
+          owner: 'group:default/some-owner',
+          public: true,
+          entities: 3,
+          followers: 2,
+          isFollowing: false,
+        }}
+      />,
       {
         mountedRoutes: {
           '/playlists': rootRouteRef,
diff --git a/plugins/scaffolder/src/components/TaskPage/IconLink.test.tsx b/plugins/scaffolder/src/components/TaskPage/IconLink.test.tsx
index f7ce850cd8..0b6092c37d 100644
--- a/plugins/scaffolder/src/components/TaskPage/IconLink.test.tsx
+++ b/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();
diff --git a/plugins/sentry/src/components/ErrorCell/ErrorCell.test.tsx b/plugins/sentry/src/components/ErrorCell/ErrorCell.test.tsx
index ff1960aa4f..22cb5cf0a0 100644
--- a/plugins/sentry/src/components/ErrorCell/ErrorCell.test.tsx
+++ b/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',
diff --git a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx
index 2516d37788..647208f141 100644
--- a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx
+++ b/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();
   });
diff --git a/plugins/sonarqube/src/components/SonarQubeContentPage/SonarQubeContentPage.test.tsx b/plugins/sonarqube/src/components/SonarQubeContentPage/SonarQubeContentPage.test.tsx
index 22175d14bc..59258e5312 100644
--- a/plugins/sonarqube/src/components/SonarQubeContentPage/SonarQubeContentPage.test.tsx
+++ b/plugins/sonarqube/src/components/SonarQubeContentPage/SonarQubeContentPage.test.tsx
@@ -16,8 +16,6 @@
 
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import React from 'react';
 import {
   isSonarQubeAvailable,
@@ -44,7 +42,7 @@ const Providers = ({
         kind: 'Component',
       }}
     >
-      <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>
+      {children}
     </EntityProvider>
   </TestApiProvider>
 );
diff --git a/plugins/tech-radar/src/components/Radar/Radar.test.tsx b/plugins/tech-radar/src/components/Radar/Radar.test.tsx
index 1b9e10ae5b..b76eb20a16 100644
--- a/plugins/tech-radar/src/components/Radar/Radar.test.tsx
+++ b/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();
diff --git a/plugins/tech-radar/src/components/RadarBubble/RadarBubble.test.tsx b/plugins/tech-radar/src/components/RadarBubble/RadarBubble.test.tsx
index 9af1f5caff..ab8070c146 100644
--- a/plugins/tech-radar/src/components/RadarBubble/RadarBubble.test.tsx
+++ b/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();
diff --git a/plugins/tech-radar/src/components/RadarComponent.test.tsx b/plugins/tech-radar/src/components/RadarComponent.test.tsx
index 3d3b1bfd17..4bb207a1de 100644
--- a/plugins/tech-radar/src/components/RadarComponent.test.tsx
+++ b/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}'),
-    });
-  });
 });
diff --git a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.test.tsx b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.test.tsx
index 7249b9f194..7f2dcbe6ac 100644
--- a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.test.tsx
+++ b/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();
diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx
index b1e468899d..36f304330d 100644
--- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx
+++ b/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', '#');
diff --git a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.test.tsx b/plugins/tech-radar/src/components/RadarFooter/RadarFooter.test.tsx
index b76405f2bf..df56e2ad2c 100644
--- a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.test.tsx
+++ b/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;
diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx
index d5636d74b8..2e0a5a225c 100644
--- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx
+++ b/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();
diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx
index e0b5f09a63..de8bfd15d7 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx
+++ b/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();
diff --git a/plugins/tech-radar/src/components/RadarPage.test.tsx b/plugins/tech-radar/src/components/RadarPage.test.tsx
index f0c2a04590..b65d9b31b2 100644
--- a/plugins/tech-radar/src/components/RadarPage.test.tsx
+++ b/plugins/tech-radar/src/components/RadarPage.test.tsx
@@ -20,8 +20,6 @@ import {
   TestApiProvider,
   wrapInTestApp,
 } from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import { act, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import GetBBoxPolyfill from '../utils/polyfills/getBBox';
@@ -61,11 +59,9 @@ describe('RadarPage', () => {
 
     const { getByTestId, findByTestId } = render(
       wrapInTestApp(
-        <ThemeProvider theme={lightTheme}>
-          <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
-            <RadarPage {...techRadarProps} />
-          </TestApiProvider>
-        </ThemeProvider>,
+        <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
+          <RadarPage {...techRadarProps} />
+        </TestApiProvider>,
       ),
     );
 
@@ -87,11 +83,9 @@ describe('RadarPage', () => {
     jest.spyOn(mockClient, 'load');
 
     const { getByText, findByTestId } = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
-          <RadarPage {...techRadarProps} />
-        </TestApiProvider>
-      </ThemeProvider>,
+      <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
+        <RadarPage {...techRadarProps} />
+      </TestApiProvider>,
     );
 
     await expect(findByTestId('tech-radar-svg')).resolves.toBeInTheDocument();
@@ -111,11 +105,9 @@ describe('RadarPage', () => {
     jest.spyOn(mockClient, 'load');
 
     const { findByTestId } = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
-          <RadarPage {...techRadarProps} />
-        </TestApiProvider>
-      </ThemeProvider>,
+      <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
+        <RadarPage {...techRadarProps} />
+      </TestApiProvider>,
     );
 
     await expect(findByTestId('tech-radar-svg')).resolves.toBeInTheDocument();
@@ -136,16 +128,14 @@ describe('RadarPage', () => {
     };
 
     const { queryByTestId } = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <TestApiProvider
-          apis={[
-            [errorApiRef, errorApi],
-            [techRadarApiRef, mockClient],
-          ]}
-        >
-          <RadarPage {...techRadarProps} />
-        </TestApiProvider>
-      </ThemeProvider>,
+      <TestApiProvider
+        apis={[
+          [errorApiRef, errorApi],
+          [techRadarApiRef, mockClient],
+        ]}
+      >
+        <RadarPage {...techRadarProps} />
+      </TestApiProvider>,
     );
 
     await waitFor(() => !queryByTestId('progress'));
diff --git a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.test.tsx b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.test.tsx
index fd03111b49..7557755ed2 100644
--- a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.test.tsx
+++ b/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();
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx
index 808cb84ccf..4e8f331c7f 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx
@@ -15,10 +15,8 @@
  */
 import React from 'react';
 import { act } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
 
-import { lightTheme } from '@backstage/theme';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 
@@ -84,17 +82,15 @@ jest.mock('@backstage/core-components', () => ({
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => {
   return (
-    <ThemeProvider theme={lightTheme}>
-      <TestApiProvider
-        apis={[
-          [scmIntegrationsApiRef, {}],
-          [techdocsApiRef, techdocsApiMock],
-          [techdocsStorageApiRef, techdocsStorageApiMock],
-        ]}
-      >
-        {children}
-      </TestApiProvider>
-    </ThemeProvider>
+    <TestApiProvider
+      apis={[
+        [scmIntegrationsApiRef, {}],
+        [techdocsApiRef, techdocsApiMock],
+        [techdocsStorageApiRef, techdocsStorageApiMock],
+      ]}
+    >
+      {children}
+    </TestApiProvider>
   );
 };
 
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx
index 7db00f6590..3e5a4c73c3 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx
@@ -16,9 +16,6 @@
 import React from 'react';
 import { act, waitFor } from '@testing-library/react';
 
-import { ThemeProvider } from '@material-ui/core';
-
-import { lightTheme } from '@backstage/theme';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import {
   techdocsApiRef,
@@ -79,13 +76,11 @@ const Wrapper = ({
   entityRef?: CompoundEntityRef;
   children: React.ReactNode;
 }) => (
-  <ThemeProvider theme={lightTheme}>
-    <TestApiProvider apis={[[techdocsApiRef, techdocsApiMock]]}>
-      <TechDocsReaderPageProvider entityRef={entityRef}>
-        {children}
-      </TechDocsReaderPageProvider>
-    </TestApiProvider>
-  </ThemeProvider>
+  <TestApiProvider apis={[[techdocsApiRef, techdocsApiMock]]}>
+    <TechDocsReaderPageProvider entityRef={entityRef}>
+      {children}
+    </TechDocsReaderPageProvider>
+  </TestApiProvider>
 );
 
 describe('<TechDocsReaderPageContent />', () => {
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx
index da193430d5..a3e03b7cf0 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx
@@ -16,9 +16,6 @@
 import React from 'react';
 import { act, waitFor } from '@testing-library/react';
 
-import { ThemeProvider } from '@material-ui/core';
-
-import { lightTheme } from '@backstage/theme';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import {
@@ -71,13 +68,11 @@ const Wrapper = ({
   entityRef?: CompoundEntityRef;
   children: React.ReactNode;
 }) => (
-  <ThemeProvider theme={lightTheme}>
-    <TestApiProvider apis={[[techdocsApiRef, techdocsApiMock]]}>
-      <TechDocsReaderPageProvider entityRef={entityRef}>
-        {children}
-      </TechDocsReaderPageProvider>
-    </TestApiProvider>
-  </ThemeProvider>
+  <TestApiProvider apis={[[techdocsApiRef, techdocsApiMock]]}>
+    <TechDocsReaderPageProvider entityRef={entityRef}>
+      {children}
+    </TechDocsReaderPageProvider>
+  </TestApiProvider>
 );
 
 describe('<TechDocsReaderPageHeader />', () => {