use renderInTestApp

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

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

@@ -15,9 +15,9 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import {
-  wrapInTestApp,
+  renderInTestApp,
   setupRequestMockHandlers,
   TestApiRegistry,
 } from '@backstage/test-utils';
@@ -56,9 +56,9 @@ describe('AuditListTable', () => {
       </ApiProvider>
     );
   };
-  it('renders the link to each website', () => {
-    const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
-    const link = rendered.queryByText('https://anchor.fm');
+  it('renders the link to each website', async () => {
+    await renderInTestApp(auditList(websiteListResponse));
+    const link = screen.queryByText('https://anchor.fm');
     const website = websiteListResponse.items.find(
       w => w.url === 'https://anchor.fm',
     );
@@ -68,34 +68,34 @@ describe('AuditListTable', () => {
     expect(link).toHaveAttribute('href', `/audit/${website.lastAudit.id}`);
   });
 
-  it('renders the dates that are available for a given row', () => {
-    const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
+  it('renders the dates that are available for a given row', async () => {
+    await renderInTestApp(auditList(websiteListResponse));
     const website = websiteListResponse.items.find(
       w => w.url === 'https://anchor.fm',
     );
     if (!website)
       throw new Error('https://anchor.fm must be present in fixture');
     expect(
-      rendered.getByText(formatTime(website.lastAudit.timeCreated)),
+      screen.getByText(formatTime(website.lastAudit.timeCreated)),
     ).toBeInTheDocument();
   });
 
   it('renders the status for a given row', async () => {
-    const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
+    await renderInTestApp(auditList(websiteListResponse));
 
-    const completed = await rendered.findAllByText('COMPLETED');
+    const completed = await screen.findAllByText('COMPLETED');
     expect(completed).toHaveLength(
       websiteListResponse.items.filter(w => w.lastAudit.status === 'COMPLETED')
         .length,
     );
 
-    const failed = await rendered.findAllByText('FAILED');
+    const failed = await screen.findAllByText('FAILED');
     expect(failed).toHaveLength(
       websiteListResponse.items.filter(w => w.lastAudit.status === 'FAILED')
         .length,
     );
 
-    const running = await rendered.findAllByText('FAILED');
+    const running = await screen.findAllByText('FAILED');
     expect(running).toHaveLength(
       websiteListResponse.items.filter(w => w.lastAudit.status === 'RUNNING')
         .length,
@@ -103,17 +103,17 @@ describe('AuditListTable', () => {
   });
 
   describe('sparklines', () => {
-    it('correctly maps the data from the website payload', () => {
-      const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
-      const backstageSEO = rendered.getByTitle(
+    it('correctly maps the data from the website payload', async () => {
+      await renderInTestApp(auditList(websiteListResponse));
+      const backstageSEO = screen.getByTitle(
         'trendline for SEO category of https://backstage.io',
       );
       expect(backstageSEO).toBeInTheDocument();
     });
 
-    it('does not break when no data is available', () => {
-      const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
-      const anchorSEO = rendered.queryByTitle(
+    it('does not break when no data is available', async () => {
+      await renderInTestApp(auditList(websiteListResponse));
+      const anchorSEO = screen.queryByTitle(
         'trendline for SEO category of https://anchor.fm',
       );
       expect(anchorSEO).not.toBeInTheDocument();

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

@@ -26,9 +26,9 @@ jest.mock('react-router-dom', () => {
 import {
   setupRequestMockHandlers,
   TestApiRegistry,
-  wrapInTestApp,
+  renderInTestApp,
 } from '@backstage/test-utils';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
@@ -59,40 +59,34 @@ describe('AuditList', () => {
 
   it('should render the table', async () => {
     server.use(rest.get('*', (_req, res, ctx) => res(ctx.json(data))));
-    const rendered = render(
-      wrapInTestApp(
-        <ApiProvider apis={apis}>
-          <AuditList />
-        </ApiProvider>,
-      ),
+    await renderInTestApp(
+      <ApiProvider apis={apis}>
+        <AuditList />
+      </ApiProvider>,
     );
-    const element = await rendered.findByText('https://anchor.fm');
+    const element = await screen.findByText('https://anchor.fm');
     expect(element).toBeInTheDocument();
   });
 
   it('renders a button to create a new audit', async () => {
-    const rendered = render(
-      wrapInTestApp(
-        <ApiProvider apis={apis}>
-          <AuditList />
-        </ApiProvider>,
-      ),
+    await renderInTestApp(
+      <ApiProvider apis={apis}>
+        <AuditList />
+      </ApiProvider>,
     );
-    const button = await rendered.findByText('Create Audit');
+    const button = await screen.findByText('Create Audit');
     expect(button).toBeInTheDocument();
   });
 
   describe('pagination', () => {
     describe('when only one page is needed', () => {
-      it('hides pagination elements', () => {
-        const rendered = render(
-          wrapInTestApp(
-            <ApiProvider apis={apis}>
-              <AuditList />
-            </ApiProvider>,
-          ),
+      it('hides pagination elements', async () => {
+        await renderInTestApp(
+          <ApiProvider apis={apis}>
+            <AuditList />
+          </ApiProvider>,
         );
-        expect(rendered.queryByLabelText(/Go to page/)).not.toBeInTheDocument();
+        expect(screen.queryByLabelText(/Go to page/)).not.toBeInTheDocument();
       });
     });
 
@@ -107,28 +101,22 @@ describe('AuditList', () => {
       });
 
       it('shows pagination elements', async () => {
-        const rendered = render(
-          wrapInTestApp(
-            <ApiProvider apis={apis}>
-              <AuditList />
-            </ApiProvider>,
-          ),
+        await renderInTestApp(
+          <ApiProvider apis={apis}>
+            <AuditList />
+          </ApiProvider>,
         );
-        expect(
-          await rendered.findByLabelText(/Go to page/),
-        ).toBeInTheDocument();
+        expect(await screen.findByLabelText(/Go to page/)).toBeInTheDocument();
       });
 
       it('changes the page on click', async () => {
-        const rendered = render(
-          wrapInTestApp(
-            <ApiProvider apis={apis}>
-              <AuditList />
-            </ApiProvider>,
-            { routeEntries: ['?page=2'] },
-          ),
+        await renderInTestApp(
+          <ApiProvider apis={apis}>
+            <AuditList />
+          </ApiProvider>,
+          { routeEntries: ['?page=2'] },
         );
-        const element = await rendered.findByLabelText(/Go to page 1/);
+        const element = await screen.findByLabelText(/Go to page 1/);
         fireEvent.click(element);
 
         expect(useNavigate()).toHaveBeenCalledWith(`?page=1`);
@@ -139,14 +127,12 @@ describe('AuditList', () => {
   describe('when waiting on the request', () => {
     it('should render the loader', async () => {
       server.use(rest.get('*', (_req, res, ctx) => res(ctx.delay(20000))));
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <AuditList />
-          </ApiProvider>,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <AuditList />
+        </ApiProvider>,
       );
-      const element = await rendered.findByTestId('progress');
+      const element = await screen.findByTestId('progress');
       expect(element).toBeInTheDocument();
     });
   });
@@ -158,14 +144,12 @@ describe('AuditList', () => {
           res(ctx.status(500, 'something broke')),
         ),
       );
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <AuditList />
-          </ApiProvider>,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <AuditList />
+        </ApiProvider>,
       );
-      const element = await rendered.findByText(/Could not load audit list./);
+      const element = await screen.findByText(/Could not load audit list./);
       expect(element).toBeInTheDocument();
     });
   });

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

@@ -32,9 +32,9 @@ import {
   setupRequestMockHandlers,
   TestApiProvider,
   TestApiRegistry,
-  wrapInTestApp,
+  renderInTestApp,
 } from '@backstage/test-utils';
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
@@ -79,16 +79,14 @@ describe('AuditView', () => {
   });
 
   it('renders the iframe for the selected audit', async () => {
-    const rendered = render(
-      wrapInTestApp(
-        <ApiProvider apis={apis}>
-          <AuditView />
-        </ApiProvider>,
-        testAppOptions,
-      ),
+    await renderInTestApp(
+      <ApiProvider apis={apis}>
+        <AuditView />
+      </ApiProvider>,
+      testAppOptions,
     );
 
-    const iframe = await rendered.findByTitle(
+    const iframe = await screen.findByTitle(
       'Lighthouse audit for https://spotify.com',
     );
     expect(iframe).toBeInTheDocument();
@@ -97,38 +95,32 @@ describe('AuditView', () => {
 
   describe('sidebar', () => {
     it('renders a list of all audits for the website', async () => {
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <AuditView />
-          </ApiProvider>,
-          testAppOptions,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <AuditView />
+        </ApiProvider>,
+        testAppOptions,
       );
 
-      await rendered.findByTestId('audit-sidebar');
+      await screen.findByTestId('audit-sidebar');
 
       websiteResponse.audits.forEach(a => {
-        expect(
-          rendered.getByText(formatTime(a.timeCreated)),
-        ).toBeInTheDocument();
+        expect(screen.getByText(formatTime(a.timeCreated))).toBeInTheDocument();
       });
     });
 
     it('sets the current audit as active', async () => {
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <AuditView />
-          </ApiProvider>,
-          testAppOptions,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <AuditView />
+        </ApiProvider>,
+        testAppOptions,
       );
 
-      await rendered.findByTestId('audit-sidebar');
+      await screen.findByTestId('audit-sidebar');
 
       const audit = websiteResponse.audits.find(a => a.id === id) as Audit;
-      const auditElement = rendered.getByText(formatTime(audit.timeCreated));
+      const auditElement = screen.getByText(formatTime(audit.timeCreated));
       expect(auditElement.parentElement?.parentElement?.className).toContain(
         'selected',
       );
@@ -136,7 +128,7 @@ describe('AuditView', () => {
       const notSelectedAudit = websiteResponse.audits.find(
         a => a.id !== id,
       ) as Audit;
-      const notSelectedAuditElement = rendered.getByText(
+      const notSelectedAuditElement = screen.getByText(
         formatTime(notSelectedAudit.timeCreated),
       );
       expect(
@@ -145,20 +137,18 @@ describe('AuditView', () => {
     });
 
     it('navigates to the next report when an audit is clicked', async () => {
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <AuditView />
-          </ApiProvider>,
-          testAppOptions,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <AuditView />
+        </ApiProvider>,
+        testAppOptions,
       );
 
-      await rendered.findByTestId('audit-sidebar');
+      await screen.findByTestId('audit-sidebar');
 
       websiteResponse.audits.forEach(a => {
         expect(
-          rendered.getByText(formatTime(a.timeCreated)).parentElement
+          screen.getByText(formatTime(a.timeCreated)).parentElement
             ?.parentElement,
         ).toHaveAttribute('href', `/audit/${a.id}`);
       });
@@ -168,27 +158,25 @@ describe('AuditView', () => {
       const configApiMock = new ConfigReader({
         app: { baseUrl: `http://localhost:3000/example` },
       });
-      const rendered = render(
-        wrapInTestApp(
-          <TestApiProvider
-            apis={[
-              [lighthouseApiRef, lighthouseRestApiMock],
-              [configApiRef, configApiMock],
-            ]}
-          >
-            <AuditView />
-          </TestApiProvider>,
-          {
-            mountedRoutes: { [`/example/lighthouse`]: rootRouteRef },
-          },
-        ),
+      await renderInTestApp(
+        <TestApiProvider
+          apis={[
+            [lighthouseApiRef, lighthouseRestApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
+          <AuditView />
+        </TestApiProvider>,
+        {
+          mountedRoutes: { [`/example/lighthouse`]: rootRouteRef },
+        },
       );
 
-      await rendered.findByTestId('audit-sidebar');
+      await screen.findByTestId('audit-sidebar');
 
       websiteResponse.audits.forEach(a => {
         expect(
-          rendered.getByText(formatTime(a.timeCreated)).parentElement
+          screen.getByText(formatTime(a.timeCreated)).parentElement
             ?.parentElement,
         ).toHaveAttribute('href', `/example/lighthouse/audit/${a.id}`);
       });
@@ -198,15 +186,13 @@ describe('AuditView', () => {
   describe('when the request for the website by id is pending', () => {
     it('shows the loading', async () => {
       server.use(rest.get('*', (_req, res, ctx) => res(ctx.delay(20000))));
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <AuditView />
-          </ApiProvider>,
-          testAppOptions,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <AuditView />
+        </ApiProvider>,
+        testAppOptions,
       );
-      expect(await rendered.findByTestId('progress')).toBeInTheDocument();
+      expect(await screen.findByTestId('progress')).toBeInTheDocument();
     });
   });
 
@@ -217,15 +203,13 @@ describe('AuditView', () => {
           res(ctx.status(500), ctx.body('failed to fetch')),
         ),
       );
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <AuditView />
-          </ApiProvider>,
-          testAppOptions,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <AuditView />
+        </ApiProvider>,
+        testAppOptions,
       );
-      expect(await rendered.findByText(/failed to fetch/)).toBeInTheDocument();
+      expect(await screen.findByText(/failed to fetch/)).toBeInTheDocument();
     });
   });
 
@@ -235,18 +219,16 @@ describe('AuditView', () => {
         ?.id as string;
       useParams.mockReturnValueOnce({ id });
 
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <AuditView />
-          </ApiProvider>,
-          testAppOptions,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <AuditView />
+        </ApiProvider>,
+        testAppOptions,
       );
 
-      await rendered.findByTestId('audit-sidebar');
+      await screen.findByTestId('audit-sidebar');
 
-      expect(rendered.getByTestId('progress')).toBeInTheDocument();
+      expect(screen.getByTestId('progress')).toBeInTheDocument();
     });
   });
 
@@ -256,18 +238,16 @@ describe('AuditView', () => {
         ?.id as string;
       useParams.mockReturnValueOnce({ id });
 
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <AuditView />
-          </ApiProvider>,
-          testAppOptions,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <AuditView />
+        </ApiProvider>,
+        testAppOptions,
       );
 
-      await rendered.findByTestId('audit-sidebar');
+      await screen.findByTestId('audit-sidebar');
 
-      expect(rendered.getByText(/This audit failed/)).toBeInTheDocument();
+      expect(screen.getByText(/This audit failed/)).toBeInTheDocument();
     });
   });
 });

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

@@ -26,9 +26,9 @@ jest.mock('react-router-dom', () => {
 import {
   setupRequestMockHandlers,
   TestApiRegistry,
-  wrapInTestApp,
+  renderInTestApp,
 } from '@backstage/test-utils';
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
@@ -59,55 +59,49 @@ describe('CreateAudit', () => {
     );
   });
 
-  it('renders the form', () => {
-    const rendered = render(
-      wrapInTestApp(
-        <ApiProvider apis={apis}>
-          <CreateAudit />
-        </ApiProvider>,
-      ),
+  it('renders the form', async () => {
+    await renderInTestApp(
+      <ApiProvider apis={apis}>
+        <CreateAudit />
+      </ApiProvider>,
     );
-    expect(rendered.getByLabelText(/URL/)).toBeEnabled();
-    expect(rendered.getByLabelText(/URL/)).toHaveAttribute('value', '');
-    expect(rendered.getByText(/Create Audit/)).toBeEnabled();
+    expect(screen.getByLabelText(/URL/)).toBeEnabled();
+    expect(screen.getByLabelText(/URL/)).toHaveAttribute('value', '');
+    expect(screen.getByText(/Create Audit/)).toBeEnabled();
   });
 
   describe('when the location contains a url', () => {
-    it('prefills the url into the form', () => {
+    it('prefills the url into the form', async () => {
       const url = 'https://spotify.com';
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <CreateAudit />
-          </ApiProvider>,
-          {
-            routeEntries: [`/create-audit?url=${encodeURIComponent(url)}`],
-          },
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <CreateAudit />
+        </ApiProvider>,
+        {
+          routeEntries: [`/create-audit?url=${encodeURIComponent(url)}`],
+        },
       );
-      expect(rendered.getByLabelText(/URL/)).toHaveAttribute('value', url);
+      expect(screen.getByLabelText(/URL/)).toHaveAttribute('value', url);
     });
   });
 
   describe('when waiting on the request', () => {
-    it('disables the form fields', () => {
+    it('disables the form fields', async () => {
       server.use(rest.get('*', (_req, res, ctx) => res(ctx.delay(20000))));
 
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <CreateAudit />
-          </ApiProvider>,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <CreateAudit />
+        </ApiProvider>,
       );
 
-      fireEvent.change(rendered.getByLabelText(/URL/), {
+      fireEvent.change(screen.getByLabelText(/URL/), {
         target: { value: 'https://spotify.com' },
       });
-      fireEvent.click(rendered.getByText(/Create Audit/));
+      fireEvent.click(screen.getByText(/Create Audit/));
 
-      expect(rendered.getByLabelText(/URL/)).toBeDisabled();
-      expect(rendered.getByText(/Create Audit/).parentElement).toBeDisabled();
+      expect(screen.getByLabelText(/URL/)).toBeDisabled();
+      expect(screen.getByText(/Create Audit/).parentElement).toBeDisabled();
     });
   });
 
@@ -121,18 +115,16 @@ describe('CreateAudit', () => {
         }),
       );
 
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <CreateAudit />
-          </ApiProvider>,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <CreateAudit />
+        </ApiProvider>,
       );
 
-      fireEvent.change(rendered.getByLabelText(/URL/), {
+      fireEvent.change(screen.getByLabelText(/URL/), {
         target: { value: 'https://spotify.com' },
       });
-      fireEvent.click(rendered.getByText(/Create Audit/));
+      fireEvent.click(screen.getByText(/Create Audit/));
 
       await waitFor(() =>
         expect(triggerAuditPayload).toMatchObject({
@@ -155,20 +147,18 @@ describe('CreateAudit', () => {
         }),
       );
 
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <CreateAudit />
-          </ApiProvider>,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <CreateAudit />
+        </ApiProvider>,
       );
 
-      fireEvent.change(rendered.getByLabelText(/URL/), {
+      fireEvent.change(screen.getByLabelText(/URL/), {
         target: { value: 'https://spotify.com' },
       });
-      fireEvent.mouseDown(rendered.getByText(/Mobile/));
-      fireEvent.click(rendered.getByText(/Desktop/));
-      fireEvent.click(rendered.getByText(/Create Audit/));
+      fireEvent.mouseDown(screen.getByText(/Mobile/));
+      fireEvent.click(screen.getByText(/Desktop/));
+      fireEvent.click(screen.getByText(/Create Audit/));
 
       await waitFor(() =>
         expect(triggerAuditPayload).toMatchObject({
@@ -202,20 +192,18 @@ describe('CreateAudit', () => {
         ),
       );
 
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <CreateAudit />
-          </ApiProvider>,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <CreateAudit />
+        </ApiProvider>,
       );
 
-      fireEvent.change(rendered.getByLabelText(/URL/), {
+      fireEvent.change(screen.getByLabelText(/URL/), {
         target: { value: 'https://spotify.com' },
       });
-      fireEvent.click(rendered.getByText(/Create Audit/));
+      fireEvent.click(screen.getByText(/Create Audit/));
 
-      await waitFor(() => expect(rendered.getByLabelText(/URL/)).toBeEnabled());
+      await waitFor(() => expect(screen.getByLabelText(/URL/)).toBeEnabled());
 
       expect(useNavigate()).toHaveBeenCalledWith('..');
     });
@@ -228,20 +216,18 @@ describe('CreateAudit', () => {
           res(ctx.status(500, 'failed to post')),
         ),
       );
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <CreateAudit />
-          </ApiProvider>,
-        ),
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <CreateAudit />
+        </ApiProvider>,
       );
 
-      fireEvent.change(rendered.getByLabelText(/URL/), {
+      fireEvent.change(screen.getByLabelText(/URL/), {
         target: { value: 'https://spotify.com' },
       });
-      fireEvent.click(rendered.getByText(/Create Audit/));
+      fireEvent.click(screen.getByText(/Create Audit/));
 
-      await waitFor(() => expect(rendered.getByLabelText(/URL/)).toBeEnabled());
+      await waitFor(() => expect(screen.getByLabelText(/URL/)).toBeEnabled());
 
       expect(errorApi.post).toHaveBeenCalledWith(expect.any(Error));
     });

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

@@ -14,18 +14,16 @@
  * limitations under the License.
  */
 
-/* eslint-disable jest/no-disabled-tests */
-
-import { wrapInTestApp } from '@backstage/test-utils';
-import { fireEvent, render } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 import LighthouseIntro from './index';
 
 describe('LighthouseIntro', () => {
-  it('renders successfully', () => {
-    const rendered = render(wrapInTestApp(<LighthouseIntro />));
+  it('renders successfully', async () => {
+    await renderInTestApp(<LighthouseIntro />);
     expect(
-      rendered.getByText('Welcome to Lighthouse in Backstage!'),
+      screen.getByText('Welcome to Lighthouse in Backstage!'),
     ).toBeInTheDocument();
   });
 
@@ -33,28 +31,28 @@ describe('LighthouseIntro', () => {
     const firstTabRe = /This plugin allows you to/;
     const secondTabRe = /you will need a running instance of/;
 
-    it('selects the first text element', () => {
-      const rendered = render(wrapInTestApp(<LighthouseIntro />));
-      expect(rendered.getByText(firstTabRe)).toBeInTheDocument();
-      expect(rendered.queryByText(secondTabRe)).not.toBeInTheDocument();
+    it('selects the first text element', async () => {
+      await renderInTestApp(<LighthouseIntro />);
+      expect(screen.getByText(firstTabRe)).toBeInTheDocument();
+      expect(screen.queryByText(secondTabRe)).not.toBeInTheDocument();
     });
 
-    it('shows the other text when the tab is clicked', () => {
-      const rendered = render(wrapInTestApp(<LighthouseIntro />));
-      fireEvent.click(rendered.getByText('Setup'));
-      expect(rendered.queryByText(firstTabRe)).not.toBeInTheDocument();
-      expect(rendered.getByText(secondTabRe)).toBeInTheDocument();
+    it('shows the other text when the tab is clicked', async () => {
+      await renderInTestApp(<LighthouseIntro />);
+      fireEvent.click(screen.getByText('Setup'));
+      expect(screen.queryByText(firstTabRe)).not.toBeInTheDocument();
+      expect(screen.getByText(secondTabRe)).toBeInTheDocument();
     });
   });
 
   describe('closing', () => {
-    it('hides the content on click', () => {
-      const rendered = render(wrapInTestApp(<LighthouseIntro />));
-      const welcomeMessage = rendered.queryByText(
+    it('hides the content on click', async () => {
+      await renderInTestApp(<LighthouseIntro />);
+      const welcomeMessage = screen.queryByText(
         'Welcome to Lighthouse in Backstage!',
       );
       expect(welcomeMessage).toBeInTheDocument();
-      fireEvent.click(rendered.getByText('Hide intro'));
+      fireEvent.click(screen.getByText('Hide intro'));
 
       expect(welcomeMessage).not.toBeInTheDocument();
     });