From c572e87ec13b714b48897e1c592e665744e1c054 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 23 Aug 2022 18:18:44 +0200
Subject: [PATCH] core-components: tweaked tests for compatibility

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .../src/components/Button/Button.test.tsx     |  8 +++---
 .../src/components/Link/Link.test.tsx         | 12 +++++----
 .../TabbedLayout/TabbedLayout.test.tsx        | 27 ++++++-------------
 3 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/packages/core-components/src/components/Button/Button.test.tsx b/packages/core-components/src/components/Button/Button.test.tsx
index e3a1074e6f..805b3b3f10 100644
--- a/packages/core-components/src/components/Button/Button.test.tsx
+++ b/packages/core-components/src/components/Button/Button.test.tsx
@@ -26,10 +26,12 @@ describe('<Button />', () => {
     const buttonLabel = 'Navigate!';
     const { getByText } = render(
       wrapInTestApp(
-        <Routes>
-          <Route path="/test" element={<p>{testString}</p>} />
+        <>
           <Button to="/test">{buttonLabel}</Button>
-        </Routes>,
+          <Routes>
+            <Route path="/test" element={<p>{testString}</p>} />
+          </Routes>
+        </>,
       ),
     );
 
diff --git a/packages/core-components/src/components/Link/Link.test.tsx b/packages/core-components/src/components/Link/Link.test.tsx
index 5cfeaa4869..52e687d2e4 100644
--- a/packages/core-components/src/components/Link/Link.test.tsx
+++ b/packages/core-components/src/components/Link/Link.test.tsx
@@ -33,10 +33,12 @@ describe('<Link />', () => {
     const linkText = 'Navigate!';
     const { getByText } = render(
       wrapInTestApp(
-        <Routes>
+        <>
           <Link to="/test">{linkText}</Link>
-          <Route path="/test" element={<p>{testString}</p>} />
-        </Routes>,
+          <Routes>
+            <Route path="/test" element={<p>{testString}</p>} />
+          </Routes>
+        </>,
       ),
     );
     expect(() => getByText(testString)).toThrow();
@@ -116,8 +118,8 @@ describe('<Link />', () => {
       const { getByText } = render(
         wrapInTestApp(
           <TestApiProvider apis={[[configApiRef, configApi]]}>
+            <Link to="/example/test">{linkText}</Link>
             <Routes>
-              <Link to="/example/test">{linkText}</Link>
               <Route path="/example/test" element={<p>{testString}</p>} />
             </Routes>
           </TestApiProvider>,
@@ -141,8 +143,8 @@ describe('<Link />', () => {
       const { getByText } = render(
         wrapInTestApp(
           <TestApiProvider apis={[[configApiRef, configApi]]}>
+            <Link to="/test">{linkText}</Link>
             <Routes>
-              <Link to="/test">{linkText}</Link>
               <Route path="/example/test" element={<p>{testString}</p>} />
             </Routes>
           </TestApiProvider>,
diff --git a/packages/core-components/src/components/TabbedLayout/TabbedLayout.test.tsx b/packages/core-components/src/components/TabbedLayout/TabbedLayout.test.tsx
index 55422faffc..b700739a8b 100644
--- a/packages/core-components/src/components/TabbedLayout/TabbedLayout.test.tsx
+++ b/packages/core-components/src/components/TabbedLayout/TabbedLayout.test.tsx
@@ -16,7 +16,6 @@
 import { renderInTestApp, withLogCollector } from '@backstage/test-utils';
 import { act, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { Route, Routes } from 'react-router';
 import { TabbedLayout } from './TabbedLayout';
 
 describe('TabbedLayout', () => {
@@ -59,24 +58,14 @@ describe('TabbedLayout', () => {
 
   it('navigates when user clicks different tab', async () => {
     const { getByText, queryByText, queryAllByRole } = await renderInTestApp(
-      <Routes>
-        <Route
-          path="/*"
-          element={
-            <TabbedLayout>
-              <TabbedLayout.Route path="/" title="tabbed-test-title">
-                <div>tabbed-test-content</div>
-              </TabbedLayout.Route>
-              <TabbedLayout.Route
-                path="/some-other-path"
-                title="tabbed-test-title-2"
-              >
-                <div>tabbed-test-content-2</div>
-              </TabbedLayout.Route>
-            </TabbedLayout>
-          }
-        />
-      </Routes>,
+      <TabbedLayout>
+        <TabbedLayout.Route path="/" title="tabbed-test-title">
+          <div>tabbed-test-content</div>
+        </TabbedLayout.Route>
+        <TabbedLayout.Route path="/some-other-path" title="tabbed-test-title-2">
+          <div>tabbed-test-content-2</div>
+        </TabbedLayout.Route>
+      </TabbedLayout>,
     );
 
     const secondTab = queryAllByRole('tab')[1];