Merge pull request #1057 from spotify/rugvip/appwrapp

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

packages/core-api/src/app/App.tsx

@@ -43,7 +43,7 @@ type FullAppOptions = {
   plugins: BackstagePlugin[];
   components: AppComponents;
   themes: AppTheme[];
-  configLoader: AppConfigLoader;
+  configLoader?: AppConfigLoader;
 };
 
 export class PrivateAppImpl implements BackstageApp {
@@ -52,7 +52,7 @@ export class PrivateAppImpl implements BackstageApp {
   private readonly plugins: BackstagePlugin[];
   private readonly components: AppComponents;
   private readonly themes: AppTheme[];
-  private readonly configLoader: AppConfigLoader;
+  private readonly configLoader?: AppConfigLoader;
 
   constructor(options: FullAppOptions) {
     this.apis = options.apis;
@@ -148,11 +148,13 @@ export class PrivateAppImpl implements BackstageApp {
 
   getProvider(): ComponentType<{}> {
     const Provider: FC<{}> = ({ children }) => {
-      const config = useAsync(this.configLoader);
+      // Keeping this synchronous when a config loader isn't set simplifies tests a lot
+      const hasConfig = Boolean(this.configLoader);
+      const config = useAsync(this.configLoader || (() => Promise.resolve({})));
 
       let childNode = children;
 
-      if (config.loading) {
+      if (hasConfig && config.loading) {
         const { Progress } = this.components;
         childNode = <Progress />;
       } else if (config.error) {

packages/core/src/components/CodeSnippet/CodeSnippet.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 CodeSnippet from './CodeSnippet';
 
@@ -33,16 +33,14 @@ const minProps = {
 
 describe('<CodeSnippet />', () => {
   it('renders text without exploding', () => {
-    const { getByText } = render(
-      wrapInThemedTestApp(<CodeSnippet {...minProps} />),
-    );
+    const { getByText } = render(wrapInTestApp(<CodeSnippet {...minProps} />));
     expect(getByText(/"Hello"/)).toBeInTheDocument();
     expect(getByText(/"World"/)).toBeInTheDocument();
   });
 
   it('renders without line numbers', () => {
     const { queryByText } = render(
-      wrapInThemedTestApp(<CodeSnippet {...minProps} />),
+      wrapInTestApp(<CodeSnippet {...minProps} />),
     );
     expect(queryByText('1')).not.toBeInTheDocument();
     expect(queryByText('2')).not.toBeInTheDocument();
@@ -51,7 +49,7 @@ describe('<CodeSnippet />', () => {
 
   it('renders with line numbers', () => {
     const { queryByText } = render(
-      wrapInThemedTestApp(<CodeSnippet {...minProps} showLineNumbers />),
+      wrapInTestApp(<CodeSnippet {...minProps} showLineNumbers />),
     );
     expect(queryByText(/1/)).toBeInTheDocument();
     expect(queryByText(/2/)).toBeInTheDocument();

packages/core/src/components/CopyTextButton/CopyTextButton.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 CopyTextButton from './CopyTextButton';
 import {
   ApiRegistry,
@@ -57,7 +57,7 @@ const apiRegistry = ApiRegistry.from([
 describe('<CopyTextButton />', () => {
   it('renders without exploding', () => {
     const { getByDisplayValue } = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apiRegistry}>
           <CopyTextButton {...props} />
         </ApiProvider>,
@@ -69,7 +69,7 @@ describe('<CopyTextButton />', () => {
   it('displays tooltip on click', async () => {
     document.execCommand = jest.fn();
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apiRegistry}>
           <CopyTextButton {...props} />
         </ApiProvider>,

packages/core/src/components/DismissableBanner/DismissableBanner.test.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 // import { fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
-import { renderWithEffects, wrapInThemedTestApp } from '@backstage/test-utils';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 // import { createSetting } from 'shared/apis/settings';
 import DismissableBanner from './DismissableBanner';
 
@@ -30,7 +30,7 @@ describe('<DismissableBanner />', () => {
     */
 
     const rendered = await renderWithEffects(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <DismissableBanner
           variant="info"
           // setting={mockSetting}

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

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { renderWithEffects, wrapInThemedTestApp } from '@backstage/test-utils';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import HorizontalScrollGrid from './HorizontalScrollGrid';
 import { Grid } from '@material-ui/core';
 
@@ -34,7 +34,7 @@ describe('<HorizontalScrollGrid />', () => {
 
   it('renders without exploding', () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <HorizontalScrollGrid>
           <Grid item>item1</Grid>
           <Grid item>item2</Grid>
@@ -69,7 +69,7 @@ describe('<HorizontalScrollGrid />', () => {
     };
 
     const rendered = await renderWithEffects(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <HorizontalScrollGrid style={{ maxWidth: 300 }}>
           <Grid item style={{ minWidth: 200 }}>
             item1

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

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

packages/core/src/components/ProgressBars/CircleProgress.test.jsx

@@ -16,37 +16,33 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 import CircleProgress, { getProgressColor } from './CircleProgress';
 
 describe('<CircleProgress />', () => {
   it('renders without exploding', () => {
     const { getByText } = render(
-      wrapInThemedTestApp(<CircleProgress value={10} fractional={false} />),
+      wrapInTestApp(<CircleProgress value={10} fractional={false} />),
     );
     getByText('10%');
   });
   it('handles fractional prop', () => {
     const { getByText } = render(
-      wrapInThemedTestApp(<CircleProgress value={0.1} fractional />),
+      wrapInTestApp(<CircleProgress value={0.1} fractional />),
     );
     getByText('10%');
   });
 
   it('handles max prop', () => {
     const { getByText } = render(
-      wrapInThemedTestApp(
-        <CircleProgress value={1} max={10} fractional={false} />,
-      ),
+      wrapInTestApp(<CircleProgress value={1} max={10} fractional={false} />),
     );
     getByText('1%');
   });
 
   it('handles unit prop', () => {
     const { getByText } = render(
-      wrapInThemedTestApp(
-        <CircleProgress value={10} fractional={false} unit="m" />,
-      ),
+      wrapInTestApp(<CircleProgress value={10} fractional={false} unit="m" />),
     );
     getByText('10m');
   });

packages/core/src/components/ProgressBars/ProgressCard.test.jsx

@@ -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 ProgressCard from './ProgressCard';
 
@@ -24,32 +24,26 @@ const minProps = { title: 'Tingle upgrade', progress: 0.12 };
 
 describe('<ProgressCard />', () => {
   it('renders without exploding', () => {
-    const { getByText } = render(
-      wrapInThemedTestApp(<ProgressCard {...minProps} />),
-    );
+    const { getByText } = render(wrapInTestApp(<ProgressCard {...minProps} />));
     expect(getByText(/Tingle.*/)).toBeInTheDocument();
   });
 
   it('renders progress and title', () => {
-    const { getByText } = render(
-      wrapInThemedTestApp(<ProgressCard {...minProps} />),
-    );
+    const { getByText } = render(wrapInTestApp(<ProgressCard {...minProps} />));
     expect(getByText(/Tingle.*/)).toBeInTheDocument();
     expect(getByText(/12%.*/)).toBeInTheDocument();
   });
 
   it('does not render deepLink', () => {
     const { queryByText } = render(
-      wrapInThemedTestApp(<ProgressCard {...minProps} />),
+      wrapInTestApp(<ProgressCard {...minProps} />),
     );
     expect(queryByText('View more')).not.toBeInTheDocument();
   });
 
   it('handles invalid numbers', () => {
     const badProps = { title: 'Tingle upgrade', progress: 'hejjo' };
-    const { getByText } = render(
-      wrapInThemedTestApp(<ProgressCard {...badProps} />),
-    );
+    const { getByText } = render(wrapInTestApp(<ProgressCard {...badProps} />));
     expect(getByText(/N\/A.*/)).toBeInTheDocument();
   });
 });

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

@@ -17,7 +17,7 @@
 /* eslint-disable jest/no-disabled-tests */
 import React from 'react';
 import { render } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 import TrendLine from '.';
 
@@ -25,7 +25,7 @@ describe('TrendLine', () => {
   describe('when no data is present', () => {
     it('renders null without throwing', () => {
       const rendered = render(
-        wrapInThemedTestApp(<TrendLine data={[]} title="sparkline" />),
+        wrapInTestApp(<TrendLine data={[]} title="sparkline" />),
       );
       expect(rendered.queryByTitle('sparkline')).not.toBeInTheDocument();
     });
@@ -34,7 +34,7 @@ describe('TrendLine', () => {
   describe('when one datapoint is present', () => {
     it('renders as a straight line', () => {
       const rendered = render(
-        wrapInThemedTestApp(<TrendLine data={[0.5]} title="sparkline" />),
+        wrapInTestApp(<TrendLine data={[0.5]} title="sparkline" />),
       );
       expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
     });
@@ -43,7 +43,7 @@ describe('TrendLine', () => {
   describe.skip('when the data finishes above the success threshold', () => {
     it('renders with the correct color', () => {
       const rendered = render(
-        wrapInThemedTestApp(<TrendLine data={[0.5, 0.95]} title="sparkline" />),
+        wrapInTestApp(<TrendLine data={[0.5, 0.95]} title="sparkline" />),
       );
       expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
     });
@@ -52,7 +52,7 @@ describe('TrendLine', () => {
   describe.skip('when the data finishes within the the warning threshold', () => {
     it('renders with the correct color', () => {
       const rendered = render(
-        wrapInThemedTestApp(<TrendLine data={[0.5, 0.65]} title="sparkline" />),
+        wrapInTestApp(<TrendLine data={[0.5, 0.65]} title="sparkline" />),
       );
       expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
     });
@@ -61,7 +61,7 @@ describe('TrendLine', () => {
   describe.skip('when the data finishes within the the error threshold', () => {
     it('renders with the correct color', () => {
       const rendered = render(
-        wrapInThemedTestApp(<TrendLine data={[0.5, 0.4]} title="sparkline" />),
+        wrapInTestApp(<TrendLine data={[0.5, 0.4]} title="sparkline" />),
       );
       expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
     });

packages/core/src/components/WarningPanel/WarningPanel.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 WarningPanel from './WarningPanel';
 
@@ -24,15 +24,13 @@ const minProps = { title: 'Mock title', message: 'Some more info' };
 
 describe('<WarningPanel />', () => {
   it('renders without exploding', () => {
-    const { getByText } = render(
-      wrapInThemedTestApp(<WarningPanel {...minProps} />),
-    );
+    const { getByText } = render(wrapInTestApp(<WarningPanel {...minProps} />));
     expect(getByText('Mock title')).toBeInTheDocument();
   });
 
   it('renders message and children', () => {
     const { getByText } = render(
-      wrapInThemedTestApp(<WarningPanel {...minProps}>children</WarningPanel>),
+      wrapInTestApp(<WarningPanel {...minProps}>children</WarningPanel>),
     );
     expect(getByText('Some more info')).toBeInTheDocument();
     expect(getByText('children')).toBeInTheDocument();

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

@@ -17,7 +17,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { ContentHeader } from './ContentHeader';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 jest.mock('react-helmet', () => {
   return {
@@ -27,9 +27,7 @@ jest.mock('react-helmet', () => {
 
 describe('<ContentHeader/>', () => {
   it('should render with title', () => {
-    const rendered = render(
-      wrapInThemedTestApp(<ContentHeader title="Title" />),
-    );
+    const rendered = render(wrapInTestApp(<ContentHeader title="Title" />));
     rendered.getByText('Title');
   });
 
@@ -37,14 +35,14 @@ describe('<ContentHeader/>', () => {
     const title = 'Custom title';
     const titleComponent = () => <h1>{title}</h1>;
     const rendered = render(
-      wrapInThemedTestApp(<ContentHeader titleComponent={titleComponent} />),
+      wrapInTestApp(<ContentHeader titleComponent={titleComponent} />),
     );
     rendered.getByText(title);
   });
 
   it('should render with description', () => {
     const rendered = render(
-      wrapInThemedTestApp(<ContentHeader description="description" />),
+      wrapInTestApp(<ContentHeader description="description" />),
     );
     rendered.getByText('description');
   });

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

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

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

@@ -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 { Header } from './Header';
 
 jest.mock('react-helmet', () => {
@@ -27,19 +27,19 @@ jest.mock('react-helmet', () => {
 
 describe('<Header/>', () => {
   it('should render with title', () => {
-    const rendered = render(wrapInThemedTestApp(<Header title="Title" />));
+    const rendered = render(wrapInTestApp(<Header title="Title" />));
     rendered.getByText('Title');
   });
 
   it('should set document title', () => {
-    const rendered = render(wrapInThemedTestApp(<Header title="Title1" />));
+    const rendered = render(wrapInTestApp(<Header title="Title1" />));
     rendered.getByText('Title1');
     rendered.getByText('defaultTitle: Title1 | Backstage');
   });
 
   it('should override document title', () => {
     const rendered = render(
-      wrapInThemedTestApp(<Header title="Title1" pageTitleOverride="Title2" />),
+      wrapInTestApp(<Header title="Title1" pageTitleOverride="Title2" />),
     );
     rendered.getByText('Title1');
     rendered.getByText('defaultTitle: Title2 | Backstage');
@@ -47,14 +47,14 @@ describe('<Header/>', () => {
 
   it('should have subtitle', () => {
     const rendered = render(
-      wrapInThemedTestApp(<Header title="Title" subtitle="Subtitle" />),
+      wrapInTestApp(<Header title="Title" subtitle="Subtitle" />),
     );
     rendered.getByText('Subtitle');
   });
 
   it('should have type rendered', () => {
     const rendered = render(
-      wrapInThemedTestApp(<Header title="Title" type="tool" />),
+      wrapInTestApp(<Header title="Title" type="tool" />),
     );
     rendered.getByText('tool');
   });

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

@@ -16,18 +16,18 @@
 
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { wrapInThemedTestApp, Keyboard } from '@backstage/test-utils';
+import { wrapInTestApp, Keyboard } from '@backstage/test-utils';
 import { HeaderActionMenu } from './HeaderActionMenu';
 
 describe('<ComponentContextMenu />', () => {
   it('renders without any items and without exploding', () => {
-    render(wrapInThemedTestApp(<HeaderActionMenu actionItems={[]} />));
+    render(wrapInTestApp(<HeaderActionMenu actionItems={[]} />));
   });
 
   it('can open the menu and click menu items', () => {
     const onClickFunction = jest.fn();
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <HeaderActionMenu
           actionItems={[{ label: 'Some label', onClick: onClickFunction }]}
         />,
@@ -49,7 +49,7 @@ describe('<ComponentContextMenu />', () => {
 
   it('Disabled', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <HeaderActionMenu
           actionItems={[{ label: 'Some label', disabled: true }]}
         />,
@@ -66,7 +66,7 @@ describe('<ComponentContextMenu />', () => {
   it('Test wrapper, and secondary label', () => {
     const onClickFunction = jest.fn();
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <HeaderActionMenu
           actionItems={[
             {
@@ -92,7 +92,7 @@ describe('<ComponentContextMenu />', () => {
 
   it('should close when hitting escape', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <HeaderActionMenu actionItems={[{ label: 'Some label' }]} />,
       ),
     );

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

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

packages/test-utils/package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@backstage/cli": "^0.1.1-alpha.6",
+    "@backstage/core-api": "^0.1.1-alpha.6",
     "@backstage/test-utils-core": "^0.1.1-alpha.6",
     "@backstage/theme": "^0.1.1-alpha.6",
     "@material-ui/core": "^4.9.1",

packages/test-utils/src/testUtils/appWrappers.test.tsx

@@ -27,7 +27,7 @@ describe('wrapInTestApp', () => {
           <Route path="/route1">Route 1</Route>
           <Route path="/route2">Route 2</Route>
         </>,
-        ['/route2'],
+        { routeEntries: ['/route2'] },
       ),
     );
     expect(rendered.getByText('Route 2')).toBeInTheDocument();

packages/test-utils/src/testUtils/appWrappers.tsx

@@ -14,16 +14,60 @@
  * limitations under the License.
  */
 
-import React, { ComponentType, ReactNode, FunctionComponent } from 'react';
-import { ThemeProvider } from '@material-ui/core';
+import React, { ComponentType, ReactNode, FunctionComponent, FC } from 'react';
 import { MemoryRouter } from 'react-router';
 import { Route } from 'react-router-dom';
 import { lightTheme } from '@backstage/theme';
+import privateExports, {
+  defaultSystemIcons,
+  ApiTestRegistry,
+  BootErrorPageProps,
+} from '@backstage/core-api';
+const { PrivateAppImpl } = privateExports;
+
+const NotFoundErrorPage = () => {
+  throw new Error('Reached NotFound Page');
+};
+const BootErrorPage: FC<BootErrorPageProps> = ({ step, error }) => {
+  throw new Error(`Reached BootError Page at step ${step} with error ${error}`);
+};
+const Progress = () => <div data-testid="progress" />;
+
+/**
+ * Options to customize the behavior of the test app wrapper.
+ */
+type TestAppOptions = {
+  /**
+   * Initial route entries to pass along as `initialEntries` to the router.
+   */
+  routeEntries?: string[];
+};
 
 export function wrapInTestApp(
   Component: ComponentType | ReactNode,
-  initialRouterEntries: string[] = ['/'],
+  options: TestAppOptions = {},
 ) {
+  const { routeEntries = ['/'] } = options;
+
+  const app = new PrivateAppImpl({
+    apis: new ApiTestRegistry(),
+    components: {
+      NotFoundErrorPage,
+      BootErrorPage,
+      Progress,
+    },
+    icons: defaultSystemIcons,
+    plugins: [],
+    themes: [
+      {
+        id: 'light',
+        theme: lightTheme,
+        title: 'Test App Theme',
+        variant: 'light',
+      },
+    ],
+  });
+
   let Wrapper: ComponentType;
   if (Component instanceof Function) {
     Wrapper = Component;
@@ -31,21 +75,13 @@ export function wrapInTestApp(
     Wrapper = (() => Component) as FunctionComponent;
   }
 
+  const AppProvider = app.getProvider();
+
   return (
-    <MemoryRouter initialEntries={initialRouterEntries}>
-      <Route component={Wrapper} />
-    </MemoryRouter>
+    <AppProvider>
+      <MemoryRouter initialEntries={routeEntries}>
+        <Route component={Wrapper} />
+      </MemoryRouter>
+    </AppProvider>
   );
 }
-
-export function wrapInThemedTestApp(
-  component: ReactNode,
-  initialRouterEntries: string[] = ['/'],
-) {
-  const themed = <ThemeProvider theme={lightTheme}>{component}</ThemeProvider>;
-  return wrapInTestApp(themed, initialRouterEntries);
-}
-
-export const wrapInTheme = (component: ReactNode, theme = lightTheme) => (
-  <ThemeProvider theme={theme}>{component}</ThemeProvider>
-);

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!',
       );