use renderInTestApp

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

plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx

@@ -14,12 +14,8 @@
  * limitations under the License.
  */
 
-import {
-  renderWithEffects,
-  TestApiRegistry,
-  wrapInTestApp,
-} from '@backstage/test-utils';
-import { fireEvent } from '@testing-library/react';
+import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils';
+import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 import { UserSettingsAuthProviders } from './UserSettingsAuthProviders';
 
@@ -56,22 +52,20 @@ const apiRegistry = TestApiRegistry.from(
 
 describe('<UserSettingsAuthProviders />', () => {
   it('displays a provider and calls its sign-in handler on click', async () => {
-    const rendered = await renderWithEffects(
-      wrapInTestApp(
-        <ApiProvider apis={apiRegistry}>
-          <UserSettingsAuthProviders />
-        </ApiProvider>,
-      ),
+    await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <UserSettingsAuthProviders />
+      </ApiProvider>,
     );
 
-    expect(rendered.getByText('Google')).toBeInTheDocument();
+    expect(screen.getByText('Google')).toBeInTheDocument();
     expect(
-      rendered.getByText(
+      screen.getByText(
         'Provides authentication towards Google APIs and identities',
       ),
     ).toBeInTheDocument();
 
-    const button = rendered.getByTitle('Sign in to Google');
+    const button = screen.getByTitle('Sign in to Google');
     fireEvent.click(button);
     expect(mockSignInHandler).toHaveBeenCalledTimes(1);
   });

plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { DefaultSettingsPage } from './DefaultSettingsPage';
 import { UserSettingsTab } from '../UserSettingsTab';
 import { useOutlet } from 'react-router-dom';
@@ -32,9 +32,7 @@ describe('<DefaultSettingsPage />', () => {
   });
 
   it('should render the settings page with 3 tabs', async () => {
-    const { container } = await renderWithEffects(
-      wrapInTestApp(<DefaultSettingsPage />),
-    );
+    const { container } = await renderInTestApp(<DefaultSettingsPage />);
 
     const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
     expect(tabs).toHaveLength(3);
@@ -46,8 +44,8 @@ describe('<DefaultSettingsPage />', () => {
         <div>Advanced settings</div>
       </UserSettingsTab>
     );
-    const { container } = await renderWithEffects(
-      wrapInTestApp(<DefaultSettingsPage tabs={[advancedTabRoute]} />),
+    const { container } = await renderInTestApp(
+      <DefaultSettingsPage tabs={[advancedTabRoute]} />,
     );
 
     const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
@@ -61,8 +59,8 @@ describe('<DefaultSettingsPage />', () => {
         <div>Advanced settings</div>
       </SettingsLayout.Route>
     );
-    const { container } = await renderWithEffects(
-      wrapInTestApp(<DefaultSettingsPage tabs={[advancedTabRoute]} />),
+    const { container } = await renderInTestApp(
+      <DefaultSettingsPage tabs={[advancedTabRoute]} />,
     );
 
     const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');

plugins/user-settings/src/components/General/UserSettingsIdentityCard.test.tsx

@@ -14,11 +14,7 @@
  * limitations under the License.
  */
 
-import {
-  renderWithEffects,
-  wrapInTestApp,
-  TestApiRegistry,
-} from '@backstage/test-utils';
+import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils';
 import { screen } from '@testing-library/react';
 import React from 'react';
 import { UserSettingsIdentityCard } from './UserSettingsIdentityCard';
@@ -40,15 +36,13 @@ const apiRegistry = TestApiRegistry.from([
 
 describe('<UserSettingsIdentityCard />', () => {
   it('displays an identity card', async () => {
-    await renderWithEffects(
-      wrapInTestApp(
-        <ApiProvider apis={apiRegistry}>
-          <UserSettingsIdentityCard />
-        </ApiProvider>,
-        {
-          mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef },
-        },
-      ),
+    await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <UserSettingsIdentityCard />
+      </ApiProvider>,
+      {
+        mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef },
+      },
     );
 
     expect(screen.getByText('user:default/test-ownership')).toBeInTheDocument();

plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx

@@ -13,11 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { UserSettingsLanguageToggle } from './UserSettingsLanguageToggle';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { useTranslation } from 'react-i18next';
 
 jest.mock('@backstage/core-plugin-api/alpha', () => ({
@@ -35,7 +36,7 @@ describe('UserSettingsLanguageToggle', () => {
     jest.clearAllMocks();
   });
 
-  it('should render correctly with multiple supported languages', () => {
+  it('should render correctly with multiple supported languages', async () => {
     const messages: Record<string, string> = {
       en: 'English',
       fr: 'French',
@@ -61,7 +62,7 @@ describe('UserSettingsLanguageToggle', () => {
         messages[option?.language || key] || 'translatedValue',
     );
 
-    render(wrapInTestApp(<UserSettingsLanguageToggle />));
+    await renderInTestApp(<UserSettingsLanguageToggle />);
 
     expect(screen.getAllByText('Change the language')).toHaveLength(1);
     expect(screen.getAllByText('English')).toHaveLength(1);
@@ -69,7 +70,7 @@ describe('UserSettingsLanguageToggle', () => {
     expect(screen.getAllByText('German')).toHaveLength(1);
   });
 
-  it('should not render when only one supported language', () => {
+  it('should not render when only one supported language', async () => {
     const tMock = jest.fn().mockReturnValue('translatedValue');
     const i18nMock = {
       language: 'en',
@@ -85,13 +86,13 @@ describe('UserSettingsLanguageToggle', () => {
       i18n: i18nMock,
     });
 
-    render(wrapInTestApp(<UserSettingsLanguageToggle />));
+    await renderInTestApp(<UserSettingsLanguageToggle />);
 
     expect(screen.queryByText('translatedValue')).toBeNull();
     expect(screen.queryByText('English')).toBeNull();
   });
 
-  it('should handle language change', () => {
+  it('should handle language change', async () => {
     const messages: Record<string, string> = {
       en: 'English',
       fr: 'French',
@@ -116,7 +117,7 @@ describe('UserSettingsLanguageToggle', () => {
       i18n: i18nMock,
     });
 
-    render(wrapInTestApp(<UserSettingsLanguageToggle />));
+    await renderInTestApp(<UserSettingsLanguageToggle />);
 
     fireEvent.click(screen.getByText('French'));
 

plugins/user-settings/src/components/General/UserSettingsMenu.test.tsx

@@ -16,26 +16,22 @@
 
 import {
   MockErrorApi,
-  renderInTestApp,
   TestApiProvider,
-  renderWithEffects,
-  wrapInTestApp,
+  renderInTestApp,
 } from '@backstage/test-utils';
 import { errorApiRef, identityApiRef } from '@backstage/core-plugin-api';
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, waitFor, screen } from '@testing-library/react';
 import React from 'react';
 import { UserSettingsMenu } from './UserSettingsMenu';
 
 describe('<UserSettingsMenu />', () => {
   it('displays a menu button with a sign-out option', async () => {
-    const rendered = await renderWithEffects(
-      wrapInTestApp(<UserSettingsMenu />),
-    );
+    await renderInTestApp(<UserSettingsMenu />);
 
-    const menuButton = rendered.getByLabelText('more');
+    const menuButton = screen.getByLabelText('more');
     fireEvent.click(menuButton);
 
-    expect(rendered.getByText('Sign Out')).toBeInTheDocument();
+    expect(screen.getByText('Sign Out')).toBeInTheDocument();
   });
 
   it('handles errors that occur when signing out', async () => {
@@ -43,7 +39,7 @@ describe('<UserSettingsMenu />', () => {
       signOut: jest.fn().mockRejectedValue(new Error('Logout error')),
     };
     const mockErrorApi = new MockErrorApi({ collect: true });
-    const rendered = await renderInTestApp(
+    await renderInTestApp(
       <TestApiProvider
         apis={[
           [errorApiRef, mockErrorApi],
@@ -54,9 +50,9 @@ describe('<UserSettingsMenu />', () => {
       </TestApiProvider>,
     );
 
-    const menuButton = rendered.getByLabelText('more');
+    const menuButton = screen.getByLabelText('more');
     fireEvent.click(menuButton);
-    fireEvent.click(rendered.getByText('Sign Out'));
+    fireEvent.click(screen.getByText('Sign Out'));
 
     await waitFor(() => {
       expect(mockErrorApi.getErrors()).toHaveLength(1);

plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
-import { fireEvent } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { SidebarPinStateProvider } from '@backstage/core-components';
@@ -23,22 +23,20 @@ import { SidebarPinStateProvider } from '@backstage/core-components';
 describe('<UserSettingsPinToggle />', () => {
   it('toggles the pin sidebar button', async () => {
     const mockToggleFn = jest.fn();
-    const rendered = await renderWithEffects(
-      wrapInTestApp(
-        <SidebarPinStateProvider
-          value={{
-            isPinned: false,
-            isMobile: false,
-            toggleSidebarPinState: mockToggleFn,
-          }}
-        >
-          <UserSettingsPinToggle />
-        </SidebarPinStateProvider>,
-      ),
+    await renderInTestApp(
+      <SidebarPinStateProvider
+        value={{
+          isPinned: false,
+          isMobile: false,
+          toggleSidebarPinState: mockToggleFn,
+        }}
+      >
+        <UserSettingsPinToggle />
+      </SidebarPinStateProvider>,
     );
-    expect(rendered.getByText('Pin Sidebar')).toBeInTheDocument();
+    expect(screen.getByText('Pin Sidebar')).toBeInTheDocument();
 
-    const pinButton = rendered.getByLabelText('Pin Sidebar Switch');
+    const pinButton = screen.getByLabelText('Pin Sidebar Switch');
     fireEvent.click(pinButton);
     expect(mockToggleFn).toHaveBeenCalled();
   });

plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx

@@ -15,15 +15,11 @@
  */
 
 import { AppTheme, appThemeApiRef } from '@backstage/core-plugin-api';
-import {
-  renderWithEffects,
-  TestApiRegistry,
-  wrapInTestApp,
-} from '@backstage/test-utils';
+import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 import { ApiProvider, AppThemeSelector } from '@backstage/core-app-api';
@@ -48,17 +44,15 @@ describe('<UserSettingsThemeToggle />', () => {
   it('toggles the theme select button', async () => {
     const themeApi = apiRegistry.get(appThemeApiRef);
 
-    const rendered = await renderWithEffects(
-      wrapInTestApp(
-        <ApiProvider apis={apiRegistry}>
-          <UserSettingsThemeToggle />
-        </ApiProvider>,
-      ),
+    await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <UserSettingsThemeToggle />
+      </ApiProvider>,
     );
 
-    expect(rendered.getByText('Theme')).toBeInTheDocument();
+    expect(screen.getByText('Theme')).toBeInTheDocument();
 
-    const themeButton = rendered.getByText('Mock Theme');
+    const themeButton = screen.getByText('Mock Theme');
     expect(themeApi?.getActiveThemeId()).toBe(undefined);
     fireEvent.click(themeButton);
     expect(themeApi?.getActiveThemeId()).toBe('light-theme');

plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import { SettingsPage } from './SettingsPage';
 import { UserSettingsTab } from '../UserSettingsTab';
 import { useOutlet } from 'react-router-dom';
@@ -34,9 +34,7 @@ describe('<SettingsPage />', () => {
   });
 
   it('should render the default settings page with 3 tabs', async () => {
-    const { container } = await renderWithEffects(
-      wrapInTestApp(<SettingsPage />),
-    );
+    const { container } = await renderInTestApp(<SettingsPage />);
 
     const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
     expect(tabs).toHaveLength(3);
@@ -49,9 +47,7 @@ describe('<SettingsPage />', () => {
       </UserSettingsTab>
     );
     (useOutlet as jest.Mock).mockReturnValue(advancedTabRoute);
-    const { container } = await renderWithEffects(
-      wrapInTestApp(<SettingsPage />),
-    );
+    const { container } = await renderInTestApp(<SettingsPage />);
 
     const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
     expect(tabs).toHaveLength(4);
@@ -65,9 +61,7 @@ describe('<SettingsPage />', () => {
       </SettingsLayout.Route>
     );
     (useOutlet as jest.Mock).mockReturnValue(advancedTabRoute);
-    const { container } = await renderWithEffects(
-      wrapInTestApp(<SettingsPage />),
-    );
+    const { container } = await renderInTestApp(<SettingsPage />);
 
     const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
     expect(tabs).toHaveLength(4);
@@ -90,9 +84,7 @@ describe('<SettingsPage />', () => {
       </SettingsLayout>
     );
     (useOutlet as jest.Mock).mockReturnValue(customLayout);
-    const { container } = await renderWithEffects(
-      wrapInTestApp(<SettingsPage />),
-    );
+    const { container } = await renderInTestApp(<SettingsPage />);
 
     const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
     expect(tabs).toHaveLength(2);