From a3b39b70ee20f9e12a93936df86200f36fc2adeb Mon Sep 17 00:00:00 2001
From: Onur Temizkan <onur@narval.co.uk>
Date: Mon, 21 Nov 2022 11:08:26 +0000
Subject: [PATCH] Use react-router-6 versions separately in tests.

---
 packages/react/package.json                |   3 +-
 packages/react/test/reactrouterv6.test.tsx | 360 ++++++++++-----------
 yarn.lock                                  |  18 +-
 3 files changed, 190 insertions(+), 191 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 94ed7ecf720f..32b9b8d33dfc 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -46,7 +46,8 @@
     "react-router-3": "npm:react-router@3.2.0",
     "react-router-4": "npm:react-router@4.1.0",
     "react-router-5": "npm:react-router@5.0.0",
-    "react-router-6": "npm:react-router@6.4.2",
+    "react-router-6": "npm:react-router@6.3.0",
+    "react-router-6.4": "npm:react-router@6.4.2",
     "redux": "^4.0.5"
   },
   "scripts": {
diff --git a/packages/react/test/reactrouterv6.test.tsx b/packages/react/test/reactrouterv6.test.tsx
index 1fc3600d8558..c51541366592 100644
--- a/packages/react/test/reactrouterv6.test.tsx
+++ b/packages/react/test/reactrouterv6.test.tsx
@@ -2,7 +2,6 @@ import { render } from '@testing-library/react';
 import { Request } from 'node-fetch';
 import * as React from 'react';
 import {
-  createMemoryRouter,
   createRoutesFromChildren,
   matchPath,
   matchRoutes,
@@ -10,13 +9,14 @@ import {
   Navigate,
   Outlet,
   Route,
-  RouterProvider,
   Routes,
   useLocation,
   useNavigationType,
   useRoutes,
 } from 'react-router-6';
 
+import { createMemoryRouter, RouterProvider, Navigate as Navigate_6_4 } from 'react-router-6.4';
+
 import { reactRouterV6Instrumentation, wrapCreateBrowserRouter } from '../src';
 import { withSentryReactRouterV6Routing, wrapUseRoutes } from '../src/reactrouterv6';
 import { CreateRouterFunction } from '../src/types';
@@ -630,219 +630,217 @@ describe('React Router v6', () => {
   });
 
   describe('wrapCreateBrowserRouter', () => {
-    describe('pageload', () => {
-      it('starts a pageload transaction', () => {
-        const [mockStartTransaction] = createInstrumentation();
-        const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
-
-        const router = sentryCreateBrowserRouter(
-          [
-            {
-              path: '/',
-              element: <div>TEST</div>,
-            },
-          ],
+    it('starts a pageload transaction', () => {
+      const [mockStartTransaction] = createInstrumentation();
+      const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
+
+      const router = sentryCreateBrowserRouter(
+        [
           {
-            initialEntries: ['/'],
+            path: '/',
+            element: <div>TEST</div>,
           },
-        );
+        ],
+        {
+          initialEntries: ['/'],
+        },
+      );
 
-        render(<RouterProvider router={router} />);
+      render(<RouterProvider router={router} />);
 
-        expect(mockStartTransaction).toHaveBeenCalledTimes(1);
-        expect(mockStartTransaction).toHaveBeenCalledWith({
-          name: '/',
-          op: 'pageload',
-          tags: {
-            'routing.instrumentation': 'react-router-v6',
-          },
-          metadata: {
-            source: 'url',
-          },
-        });
+      expect(mockStartTransaction).toHaveBeenCalledTimes(1);
+      expect(mockStartTransaction).toHaveBeenCalledWith({
+        name: '/',
+        op: 'pageload',
+        tags: {
+          'routing.instrumentation': 'react-router-v6',
+        },
+        metadata: {
+          source: 'url',
+        },
       });
+    });
+
+    it('starts a navigation transaction', () => {
+      const [mockStartTransaction] = createInstrumentation();
+      const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
 
-      it('starts a navigation transaction', () => {
-        const [mockStartTransaction] = createInstrumentation();
-        const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
-
-        const router = sentryCreateBrowserRouter(
-          [
-            {
-              path: '/',
-              element: <Navigate to="/about" />,
-            },
-            {
-              path: 'about',
-              element: <div>About</div>,
-            },
-          ],
+      const router = sentryCreateBrowserRouter(
+        [
           {
-            initialEntries: ['/'],
+            path: '/',
+            element: <Navigate_6_4 to="/about" />,
           },
-        );
+          {
+            path: 'about',
+            element: <div>About</div>,
+          },
+        ],
+        {
+          initialEntries: ['/'],
+        },
+      );
 
-        render(<RouterProvider router={router} />);
+      render(<RouterProvider router={router} />);
 
-        expect(mockStartTransaction).toHaveBeenCalledTimes(2);
-        expect(mockStartTransaction).toHaveBeenLastCalledWith({
-          name: '/about',
-          op: 'navigation',
-          tags: { 'routing.instrumentation': 'react-router-v6' },
-          metadata: { source: 'route' },
-        });
+      expect(mockStartTransaction).toHaveBeenCalledTimes(2);
+      expect(mockStartTransaction).toHaveBeenLastCalledWith({
+        name: '/about',
+        op: 'navigation',
+        tags: { 'routing.instrumentation': 'react-router-v6' },
+        metadata: { source: 'route' },
       });
+    });
+
+    it('works with nested routes', () => {
+      const [mockStartTransaction] = createInstrumentation();
+      const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
 
-      it('works with nested routes', () => {
-        const [mockStartTransaction] = createInstrumentation();
-        const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
-
-        const router = sentryCreateBrowserRouter(
-          [
-            {
-              path: '/',
-              element: <Navigate to="/about/us" />,
-            },
-            {
-              path: 'about',
-              element: <div>About</div>,
-              children: [
-                {
-                  path: 'us',
-                  element: <div>Us</div>,
-                },
-              ],
-            },
-          ],
+      const router = sentryCreateBrowserRouter(
+        [
           {
-            initialEntries: ['/'],
+            path: '/',
+            element: <Navigate_6_4 to="/about/us" />,
           },
-        );
+          {
+            path: 'about',
+            element: <div>About</div>,
+            children: [
+              {
+                path: 'us',
+                element: <div>Us</div>,
+              },
+            ],
+          },
+        ],
+        {
+          initialEntries: ['/'],
+        },
+      );
 
-        render(<RouterProvider router={router} />);
+      render(<RouterProvider router={router} />);
 
-        expect(mockStartTransaction).toHaveBeenCalledTimes(2);
-        expect(mockStartTransaction).toHaveBeenLastCalledWith({
-          name: '/about/us',
-          op: 'navigation',
-          tags: { 'routing.instrumentation': 'react-router-v6' },
-          metadata: { source: 'route' },
-        });
+      expect(mockStartTransaction).toHaveBeenCalledTimes(2);
+      expect(mockStartTransaction).toHaveBeenLastCalledWith({
+        name: '/about/us',
+        op: 'navigation',
+        tags: { 'routing.instrumentation': 'react-router-v6' },
+        metadata: { source: 'route' },
       });
+    });
 
-      it('works with parameterized paths', () => {
-        const [mockStartTransaction] = createInstrumentation();
-        const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
-
-        const router = sentryCreateBrowserRouter(
-          [
-            {
-              path: '/',
-              element: <Navigate to="/about/us" />,
-            },
-            {
-              path: 'about',
-              element: <div>About</div>,
-              children: [
-                {
-                  path: ':page',
-                  element: <div>Page</div>,
-                },
-              ],
-            },
-          ],
+    it('works with parameterized paths', () => {
+      const [mockStartTransaction] = createInstrumentation();
+      const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
+
+      const router = sentryCreateBrowserRouter(
+        [
           {
-            initialEntries: ['/'],
+            path: '/',
+            element: <Navigate_6_4 to="/about/us" />,
           },
-        );
+          {
+            path: 'about',
+            element: <div>About</div>,
+            children: [
+              {
+                path: ':page',
+                element: <div>Page</div>,
+              },
+            ],
+          },
+        ],
+        {
+          initialEntries: ['/'],
+        },
+      );
 
-        render(<RouterProvider router={router} />);
+      render(<RouterProvider router={router} />);
 
-        expect(mockStartTransaction).toHaveBeenCalledTimes(2);
-        expect(mockStartTransaction).toHaveBeenLastCalledWith({
-          name: '/about/:page',
-          op: 'navigation',
-          tags: { 'routing.instrumentation': 'react-router-v6' },
-          metadata: { source: 'route' },
-        });
+      expect(mockStartTransaction).toHaveBeenCalledTimes(2);
+      expect(mockStartTransaction).toHaveBeenLastCalledWith({
+        name: '/about/:page',
+        op: 'navigation',
+        tags: { 'routing.instrumentation': 'react-router-v6' },
+        metadata: { source: 'route' },
       });
+    });
+
+    it('works with paths with multiple parameters', () => {
+      const [mockStartTransaction] = createInstrumentation();
+      const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
 
-      it('works with paths with multiple parameters', () => {
-        const [mockStartTransaction] = createInstrumentation();
-        const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
-
-        const router = sentryCreateBrowserRouter(
-          [
-            {
-              path: '/',
-              element: <Navigate to="/stores/foo/products/234" />,
-            },
-            {
-              path: 'stores',
-              element: <div>Stores</div>,
-              children: [
-                {
-                  path: ':storeId',
-                  element: <div>Store</div>,
-                  children: [
-                    {
-                      path: 'products',
-                      element: <div>Products</div>,
-                      children: [
-                        {
-                          path: ':productId',
-                          element: <div>Product</div>,
-                        },
-                      ],
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
+      const router = sentryCreateBrowserRouter(
+        [
           {
-            initialEntries: ['/'],
+            path: '/',
+            element: <Navigate_6_4 to="/stores/foo/products/234" />,
           },
-        );
+          {
+            path: 'stores',
+            element: <div>Stores</div>,
+            children: [
+              {
+                path: ':storeId',
+                element: <div>Store</div>,
+                children: [
+                  {
+                    path: 'products',
+                    element: <div>Products</div>,
+                    children: [
+                      {
+                        path: ':productId',
+                        element: <div>Product</div>,
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        {
+          initialEntries: ['/'],
+        },
+      );
 
-        render(<RouterProvider router={router} />);
+      render(<RouterProvider router={router} />);
 
-        expect(mockStartTransaction).toHaveBeenCalledTimes(2);
-        expect(mockStartTransaction).toHaveBeenLastCalledWith({
-          name: '/stores/:storeId/products/:productId',
-          op: 'navigation',
-          tags: { 'routing.instrumentation': 'react-router-v6' },
-          metadata: { source: 'route' },
-        });
+      expect(mockStartTransaction).toHaveBeenCalledTimes(2);
+      expect(mockStartTransaction).toHaveBeenLastCalledWith({
+        name: '/stores/:storeId/products/:productId',
+        op: 'navigation',
+        tags: { 'routing.instrumentation': 'react-router-v6' },
+        metadata: { source: 'route' },
       });
+    });
+
+    it('updates pageload transaction to a parameterized route', () => {
+      const [mockStartTransaction, { mockSetName }] = createInstrumentation();
+      const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
 
-      it('updates pageload transaction to a parameterized route', () => {
-        const [mockStartTransaction, { mockSetName }] = createInstrumentation();
-        const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
-
-        const router = sentryCreateBrowserRouter(
-          [
-            {
-              path: 'about',
-              element: <div>About</div>,
-              children: [
-                {
-                  path: ':page',
-                  element: <div>page</div>,
-                },
-              ],
-            },
-          ],
+      const router = sentryCreateBrowserRouter(
+        [
           {
-            initialEntries: ['/about/us'],
+            path: 'about',
+            element: <div>About</div>,
+            children: [
+              {
+                path: ':page',
+                element: <div>page</div>,
+              },
+            ],
           },
-        );
+        ],
+        {
+          initialEntries: ['/about/us'],
+        },
+      );
 
-        render(<RouterProvider router={router} />);
+      render(<RouterProvider router={router} />);
 
-        expect(mockStartTransaction).toHaveBeenCalledTimes(1);
-        expect(mockSetName).toHaveBeenLastCalledWith('/about/:page', 'route');
-      });
+      expect(mockStartTransaction).toHaveBeenCalledTimes(1);
+      expect(mockSetName).toHaveBeenLastCalledWith('/about/:page', 'route');
     });
   });
 });
diff --git a/yarn.lock b/yarn.lock
index 60a1afe9f4db..3fc2b4409ba1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -21297,28 +21297,28 @@ react-refresh@0.8.3:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-"react-router-6@npm:react-router@6.4.2":
+"react-router-6.4@npm:react-router@6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.2.tgz#300628ee9ed81b8ef1597b5cb98b474efe9779b8"
   integrity sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==
   dependencies:
     "@remix-run/router" "1.0.2"
 
-react-router-dom@^6.2.2:
+"react-router-6@npm:react-router@6.3.0", react-router@6.3.0:
+  name react-router-6
   version "6.3.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
-  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
+  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
   dependencies:
     history "^5.2.0"
-    react-router "6.3.0"
 
-react-router@6.3.0:
-  name react-router-6
+react-router-dom@^6.2.2:
   version "6.3.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
-  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
+  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
   dependencies:
     history "^5.2.0"
+    react-router "6.3.0"
 
 react@^18.0.0:
   version "18.0.0"