packages/test-utils: do app wrapping with actual app + remove wrapInThemedTestApp

plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 import { CatalogFilter, CatalogFilterGroup } from './CatalogFilter';
 
 describe('Catalog Filter', () => {
@@ -26,7 +26,7 @@ describe('Catalog Filter', () => {
       { name: 'Test Group 2', items: [] },
     ];
     const { findByText } = render(
-      wrapInThemedTestApp(<CatalogFilter groups={mockGroups} />),
+      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
     );
 
     for (const group of mockGroups) {
@@ -52,7 +52,7 @@ describe('Catalog Filter', () => {
     ];
 
     const { findByText } = render(
-      wrapInThemedTestApp(<CatalogFilter groups={mockGroups} />),
+      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
     );
 
     const [group] = mockGroups;
@@ -81,7 +81,7 @@ describe('Catalog Filter', () => {
     ];
 
     const { findByText } = render(
-      wrapInThemedTestApp(<CatalogFilter groups={mockGroups} />),
+      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
     );
 
     const [group] = mockGroups;
@@ -112,7 +112,7 @@ describe('Catalog Filter', () => {
     const onSelectedChangeHandler = jest.fn();
 
     const { findByText } = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <CatalogFilter
           groups={mockGroups}
           onSelectedChange={onSelectedChangeHandler}

plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import CatalogPage from './CatalogPage';
 import { ApiRegistry, ApiProvider, errorApiRef } from '@backstage/core';
-import { wrapInTheme } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 import { catalogApiRef } from '../..';
 
 const errorApi = { post: () => {} };
@@ -30,7 +30,7 @@ describe('CatalogPage', () => {
   // https://github.com/mbrn/material-table/issues/1293
   it('should render', async () => {
     const rendered = render(
-      wrapInTheme(
+      wrapInTestApp(
         <ApiProvider
           apis={ApiRegistry.from([
             [errorApiRef, errorApi],

plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx

@@ -15,7 +15,7 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 import CatalogTable from './CatalogTable';
 import { Component } from '../../data/component';
 
@@ -28,7 +28,7 @@ const components: Component[] = [
 describe('CatalogTable component', () => {
   it('should render loading when loading prop it set to true', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <CatalogTable titlePreamble="Owned" components={[]} loading />,
       ),
     );
@@ -38,7 +38,7 @@ describe('CatalogTable component', () => {
 
   it('should render error message when error is passed in props', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <CatalogTable
           titlePreamble="Owned"
           components={[]}
@@ -55,7 +55,7 @@ describe('CatalogTable component', () => {
 
   it('should display component names when loading has finished and no error occurred', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <CatalogTable
           titlePreamble="Owned"
           components={components}

plugins/catalog/src/components/ComponentPage/ComponentPage.test.tsx

@@ -16,7 +16,7 @@
 import ComponentPage from './ComponentPage';
 import { render } from '@testing-library/react';
 import * as React from 'react';
-import { wrapInTheme } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
 
 const getTestProps = (componentName: string) => {
@@ -38,7 +38,7 @@ describe('ComponentPage', () => {
   it('should redirect to component table page when name is not provided', async () => {
     const props = getTestProps('');
     await render(
-      wrapInTheme(
+      wrapInTestApp(
         <ApiProvider apis={ApiRegistry.from([[errorApiRef, errorApi]])}>
           <ComponentPage {...props} />
         </ApiProvider>,

plugins/explore/src/components/ExploreCard.test.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 import ExploreCard from './ExploreCard';
 
@@ -32,22 +32,18 @@ const minProps = {
 
 describe('<ExploreCard />', () => {
   it('renders without exploding', () => {
-    const { getByText } = render(
-      wrapInThemedTestApp(<ExploreCard {...minProps} />),
-    );
+    const { getByText } = render(wrapInTestApp(<ExploreCard {...minProps} />));
     expect(getByText('Explore')).toBeInTheDocument();
   });
 
   it('renders props correctly', () => {
-    const { getByText } = render(
-      wrapInThemedTestApp(<ExploreCard {...minProps} />),
-    );
+    const { getByText } = render(wrapInTestApp(<ExploreCard {...minProps} />));
     expect(getByText(minProps.card.title)).toBeInTheDocument();
     expect(getByText(minProps.card.description)).toBeInTheDocument();
   });
 
   it('should link out', () => {
-    const rendered = render(wrapInThemedTestApp(<ExploreCard {...minProps} />));
+    const rendered = render(wrapInTestApp(<ExploreCard {...minProps} />));
     const anchor = rendered.container.querySelector('a');
     expect(anchor.href).toBe(minProps.card.url);
   });
@@ -63,7 +59,7 @@ describe('<ExploreCard />', () => {
       },
     };
     const { getByText } = render(
-      wrapInThemedTestApp(<ExploreCard {...propsWithoutDescription} />),
+      wrapInTestApp(<ExploreCard {...propsWithoutDescription} />),
     );
     expect(getByText('Description missing')).toBeInTheDocument();
   });
@@ -78,15 +74,13 @@ describe('<ExploreCard />', () => {
       },
     };
     const { queryByText } = render(
-      wrapInThemedTestApp(<ExploreCard {...propsWithLifecycle} />),
+      wrapInTestApp(<ExploreCard {...propsWithLifecycle} />),
     );
     expect(queryByText('GA')).not.toBeInTheDocument();
   });
 
   it('renders tags correctly', () => {
-    const { getByText } = render(
-      wrapInThemedTestApp(<ExploreCard {...minProps} />),
-    );
+    const { getByText } = render(wrapInTestApp(<ExploreCard {...minProps} />));
     expect(getByText(minProps.card.tags[0])).toBeInTheDocument();
     expect(getByText(minProps.card.tags[1])).toBeInTheDocument();
   });

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

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 import { ApiRegistry, ApiProvider } from '@backstage/core';
 
 import AuditListTable from './AuditListTable';
@@ -50,12 +50,10 @@ describe('AuditListTable', () => {
     );
   };
   it('renders the link to each website', () => {
-    const rendered = render(
-      wrapInThemedTestApp(auditList(websiteListResponse)),
-    );
+    const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
     const link = rendered.queryByText('https://anchor.fm');
     const website = websiteListResponse.items.find(
-      (w) => w.url === 'https://anchor.fm',
+      w => w.url === 'https://anchor.fm',
     );
     if (!website)
       throw new Error('https://anchor.fm must be present in fixture');
@@ -67,11 +65,9 @@ describe('AuditListTable', () => {
   });
 
   it('renders the dates that are available for a given row', () => {
-    const rendered = render(
-      wrapInThemedTestApp(auditList(websiteListResponse)),
-    );
+    const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
     const website = websiteListResponse.items.find(
-      (w) => w.url === 'https://anchor.fm',
+      w => w.url === 'https://anchor.fm',
     );
     if (!website)
       throw new Error('https://anchor.fm must be present in fixture');
@@ -81,35 +77,30 @@ describe('AuditListTable', () => {
   });
 
   it('renders the status for a given row', async () => {
-    const rendered = render(
-      wrapInThemedTestApp(auditList(websiteListResponse)),
-    );
+    const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
 
     const completed = await rendered.findAllByText('COMPLETED');
     expect(completed).toHaveLength(
-      websiteListResponse.items.filter(
-        (w) => w.lastAudit.status === 'COMPLETED',
-      ).length,
+      websiteListResponse.items.filter(w => w.lastAudit.status === 'COMPLETED')
+        .length,
     );
 
     const failed = await rendered.findAllByText('FAILED');
     expect(failed).toHaveLength(
-      websiteListResponse.items.filter((w) => w.lastAudit.status === 'FAILED')
+      websiteListResponse.items.filter(w => w.lastAudit.status === 'FAILED')
         .length,
     );
 
     const running = await rendered.findAllByText('FAILED');
     expect(running).toHaveLength(
-      websiteListResponse.items.filter((w) => w.lastAudit.status === 'RUNNING')
+      websiteListResponse.items.filter(w => w.lastAudit.status === 'RUNNING')
         .length,
     );
   });
 
   describe('sparklines', () => {
     it('correctly maps the data from the website payload', () => {
-      const rendered = render(
-        wrapInThemedTestApp(auditList(websiteListResponse)),
-      );
+      const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
       const backstageSEO = rendered.getByTitle(
         'trendline for SEO category of https://backstage.io',
       );
@@ -117,9 +108,7 @@ describe('AuditListTable', () => {
     });
 
     it('does not break when no data is available', () => {
-      const rendered = render(
-        wrapInThemedTestApp(auditList(websiteListResponse)),
-      );
+      const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
       const anchorSEO = rendered.queryByTitle(
         'trendline for SEO category of https://anchor.fm',
       );

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

@@ -27,11 +27,10 @@ jest.mock('react-router-dom', () => {
 });
 
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import mockFetch from 'jest-fetch-mock';
 import { render, fireEvent } from '@testing-library/react';
 import { ApiRegistry, ApiProvider } from '@backstage/core';
-import { wrapInThemedTestApp, wrapInTheme } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 import {
   lighthouseApiRef,
@@ -57,7 +56,7 @@ describe('AuditList', () => {
 
   it('should render the table', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apis}>
           <AuditList />
         </ApiProvider>,
@@ -69,7 +68,7 @@ describe('AuditList', () => {
 
   it('renders a link to create a new audit', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apis}>
           <AuditList />
         </ApiProvider>,
@@ -87,12 +86,11 @@ describe('AuditList', () => {
     it('requests the correct limit and offset from the api based on the query', () => {
       mockFetch.mockClear();
       render(
-        wrapInTheme(
-          <MemoryRouter initialEntries={['/lighthouse?page=2']}>
-            <ApiProvider apis={apis}>
-              <AuditList />
-            </ApiProvider>
-          </MemoryRouter>,
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <AuditList />
+          </ApiProvider>,
+          { routeEntries: ['/lighthouse?page=2'] },
         ),
       );
       expect(mockFetch).toHaveBeenLastCalledWith(
@@ -104,7 +102,7 @@ describe('AuditList', () => {
     describe('when only one page is needed', () => {
       it('hides pagination elements', () => {
         const rendered = render(
-          wrapInThemedTestApp(
+          wrapInTestApp(
             <ApiProvider apis={apis}>
               <AuditList />
             </ApiProvider>,
@@ -125,7 +123,7 @@ describe('AuditList', () => {
 
       it('shows pagination elements', async () => {
         const rendered = render(
-          wrapInThemedTestApp(
+          wrapInTestApp(
             <ApiProvider apis={apis}>
               <AuditList />
             </ApiProvider>,
@@ -138,12 +136,11 @@ describe('AuditList', () => {
 
       it('changes the page on click', async () => {
         const rendered = render(
-          wrapInTheme(
-            <MemoryRouter initialEntries={['/lighthouse?page=2']}>
-              <ApiProvider apis={apis}>
-                <AuditList />
-              </ApiProvider>
-            </MemoryRouter>,
+          wrapInTestApp(
+            <ApiProvider apis={apis}>
+              <AuditList />
+            </ApiProvider>,
+            { routeEntries: ['/lighthouse?page=2'] },
           ),
         );
         const element = await rendered.findByLabelText(/Go to page 1/);
@@ -157,7 +154,7 @@ describe('AuditList', () => {
     it('should render the loader', async () => {
       mockFetch.mockResponseOnce(() => new Promise(() => {}));
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditList />
           </ApiProvider>,
@@ -172,7 +169,7 @@ describe('AuditList', () => {
     it('should render an error', async () => {
       mockFetch.mockRejectOnce(new Error('failed to fetch'));
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditList />
           </ApiProvider>,

plugins/lighthouse/src/components/AuditView/index.test.tsx

@@ -27,7 +27,7 @@ jest.mock('react-router-dom', () => {
 import React from 'react';
 import mockFetch from 'jest-fetch-mock';
 import { render } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 import { ApiRegistry, ApiProvider } from '@backstage/core';
 
 import AuditView from '.';
@@ -56,7 +56,7 @@ describe('AuditView', () => {
 
   it('renders the iframe for the selected audit', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apis}>
           <AuditView />
         </ApiProvider>,
@@ -72,7 +72,7 @@ describe('AuditView', () => {
 
   it('renders a link to create a new audit for this website', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apis}>
           <AuditView />
         </ApiProvider>,
@@ -92,7 +92,7 @@ describe('AuditView', () => {
   describe('sidebar', () => {
     it('renders a list of all audits for the website', async () => {
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -110,7 +110,7 @@ describe('AuditView', () => {
 
     it('sets the current audit as active', async () => {
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -138,7 +138,7 @@ describe('AuditView', () => {
 
     it('navigates to the next report when an audit is clicked', async () => {
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -160,7 +160,7 @@ describe('AuditView', () => {
     it('it shows the loading', async () => {
       mockFetch.mockImplementationOnce(() => new Promise(() => {}));
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -174,7 +174,7 @@ describe('AuditView', () => {
     it('it shows an error', async () => {
       mockFetch.mockRejectOnce(new Error('failed to fetch'));
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -191,7 +191,7 @@ describe('AuditView', () => {
       useParams.mockReturnValueOnce({ id });
 
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -211,7 +211,7 @@ describe('AuditView', () => {
       useParams.mockReturnValueOnce({ id });
 
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,

plugins/lighthouse/src/components/CreateAudit/index.test.tsx

@@ -29,14 +29,13 @@ jest.mock('react-router-dom', () => {
 import React from 'react';
 import mockFetch from 'jest-fetch-mock';
 import { wait, render, fireEvent } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
 import {
   ApiRegistry,
   ApiProvider,
   ErrorApi,
   errorApiRef,
 } from '@backstage/core';
-import { wrapInThemedTestApp, wrapInTheme } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 import { lighthouseApiRef, LighthouseRestApi, Audit } from '../../api';
 import CreateAudit from '.';
@@ -62,7 +61,7 @@ describe('CreateAudit', () => {
 
   it('renders the form', () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apis}>
           <CreateAudit />
         </ApiProvider>,
@@ -77,16 +76,15 @@ describe('CreateAudit', () => {
     it('prefills the url into the form', () => {
       const url = 'https://spotify.com';
       const rendered = render(
-        wrapInTheme(
-          <MemoryRouter
-            initialEntries={[
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <CreateAudit />
+          </ApiProvider>,
+          {
+            routeEntries: [
               `/lighthouse/create-audit?url=${encodeURIComponent(url)}`,
-            ]}
-          >
-            <ApiProvider apis={apis}>
-              <CreateAudit />
-            </ApiProvider>
-          </MemoryRouter>,
+            ],
+          },
         ),
       );
       expect(rendered.getByLabelText(/URL/)).toHaveAttribute('value', url);
@@ -98,7 +96,7 @@ describe('CreateAudit', () => {
       mockFetch.mockResponseOnce(() => new Promise(() => {}));
 
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <CreateAudit />
           </ApiProvider>,
@@ -121,7 +119,7 @@ describe('CreateAudit', () => {
       mockFetch.mockResponseOnce(JSON.stringify(createAuditResponse));
 
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <CreateAudit />
           </ApiProvider>,
@@ -152,7 +150,7 @@ describe('CreateAudit', () => {
       mockFetch.mockRejectOnce(new Error('failed to post'));
 
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <CreateAudit />
           </ApiProvider>,

plugins/lighthouse/src/components/Intro/index.test.tsx

@@ -18,13 +18,13 @@
 
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 import LighthouseIntro from '.';
 
 describe('LighthouseIntro', () => {
   it('renders successfully', () => {
-    const rendered = render(wrapInThemedTestApp(<LighthouseIntro />));
+    const rendered = render(wrapInTestApp(<LighthouseIntro />));
     expect(
       rendered.queryByText('Welcome to Lighthouse in Backstage!'),
     ).toBeInTheDocument();
@@ -35,13 +35,13 @@ describe('LighthouseIntro', () => {
     const secondTabRe = /you will need a running instance of/;
 
     it('selects the first text element', () => {
-      const rendered = render(wrapInThemedTestApp(<LighthouseIntro />));
+      const rendered = render(wrapInTestApp(<LighthouseIntro />));
       expect(rendered.queryByText(firstTabRe)).toBeInTheDocument();
       expect(rendered.queryByText(secondTabRe)).not.toBeInTheDocument();
     });
 
     it('shows the other text when the tab is clicked', () => {
-      const rendered = render(wrapInThemedTestApp(<LighthouseIntro />));
+      const rendered = render(wrapInTestApp(<LighthouseIntro />));
       fireEvent.click(rendered.getByText('Setup'));
       expect(rendered.queryByText(firstTabRe)).not.toBeInTheDocument();
       expect(rendered.queryByText(secondTabRe)).toBeInTheDocument();
@@ -50,7 +50,7 @@ describe('LighthouseIntro', () => {
 
   describe('closing', () => {
     it('hides the content on click', () => {
-      const rendered = render(wrapInThemedTestApp(<LighthouseIntro />));
+      const rendered = render(wrapInTestApp(<LighthouseIntro />));
       const welcomeMessage = rendered.queryByText(
         'Welcome to Lighthouse in Backstage!',
       );