chore: upgrade react-router-dom to 5.3.4 (#22878)

superset-frontend/package.json

@@ -181,7 +181,7 @@
     "react-redux": "^7.2.8",
     "react-resize-detector": "^7.1.2",
     "react-reverse-portal": "^2.1.1",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.3.4",
     "react-search-input": "^0.11.3",
     "react-select": "^3.2.0",
     "react-sortable-hoc": "^2.0.0",
@@ -256,7 +256,7 @@
     "@types/react-jsonschema-form": "^1.7.4",
     "@types/react-loadable": "^5.5.6",
     "@types/react-redux": "^7.1.10",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-select": "^3.0.19",
     "@types/react-table": "^7.0.19",
     "@types/react-ultimate-pagination": "^1.2.0",
@@ -281,8 +281,8 @@
     "cross-env": "^5.2.0",
     "css-loader": "^6.2.0",
     "css-minimizer-webpack-plugin": "^3.0.2",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.7",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^7.1.0",

superset-frontend/src/explore/components/SaveModal.test.jsx

@@ -117,6 +117,7 @@ const getWrapper = (props = defaultProps, store = initialStore) =>
     .dive()
     .dive()
     .dive()
+    .dive()
     .dive();
 
 test('renders a Modal with the right set of components', () => {

superset-frontend/src/views/CRUD/data/savedquery/SavedQueryList.test.jsx

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import thunk from 'redux-thunk';
+import { BrowserRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import fetchMock from 'fetch-mock';
@@ -245,9 +246,11 @@ describe('RTL', () => {
   async function renderAndWait() {
     const mounted = act(async () => {
       render(
-        <QueryParamProvider>
-          <SavedQueryList />
-        </QueryParamProvider>,
+        <BrowserRouter>
+          <QueryParamProvider>
+            <SavedQueryList />
+          </QueryParamProvider>
+        </BrowserRouter>,
         { useRedux: true },
       );
     });

superset-frontend/src/views/components/SubMenu.test.tsx

@@ -18,6 +18,7 @@
  */
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import { render, screen } from 'spec/helpers/testing-library';
 import SubMenu, { ButtonProps } from './SubMenu';
 
@@ -58,30 +59,42 @@ const mockedProps = {
   ],
 };
 
+const setup = (overrides: Record<string, any> = {}) => {
+  const props = {
+    ...mockedProps,
+    ...overrides,
+  };
+  return render(
+    <BrowserRouter>
+      <SubMenu {...props} />
+    </BrowserRouter>,
+  );
+};
+
 test('should render', async () => {
-  const { container } = render(<SubMenu {...mockedProps} />);
+  const { container } = setup();
   expect(await screen.findByText(/title/i)).toBeInTheDocument();
   expect(container).toBeInTheDocument();
 });
 
 test('should render the navigation', async () => {
-  render(<SubMenu {...mockedProps} />);
+  setup();
   expect(await screen.findByRole('navigation')).toBeInTheDocument();
 });
 
 test('should render the brand', async () => {
-  render(<SubMenu {...mockedProps} />);
+  setup();
   expect(await screen.findByText('Title')).toBeInTheDocument();
 });
 
 test('should render the right number of tabs', async () => {
-  render(<SubMenu {...mockedProps} />);
+  setup();
   expect(await screen.findAllByRole('tab')).toHaveLength(3);
 });
 
 test('should render all the tabs links', async () => {
   const { tabs } = mockedProps;
-  render(<SubMenu {...mockedProps} />);
+  setup();
   expect(await screen.findAllByRole('tab')).toHaveLength(3);
   tabs.forEach(tab => {
     const tabItem = screen.getByText(tab.label);
@@ -90,7 +103,7 @@ test('should render all the tabs links', async () => {
 });
 
 test('should render dropdownlinks', async () => {
-  render(<SubMenu {...mockedProps} />);
+  setup();
   userEvent.hover(screen.getByText('test an upload'));
   const label = await screen.findByText('test an upload');
   expect(label).toBeInTheDocument();
@@ -110,11 +123,7 @@ test('should render the buttons', async () => {
       buttonStyle: 'danger' as ButtonProps['buttonStyle'],
     },
   ];
-  const buttonsProps = {
-    ...mockedProps,
-    buttons,
-  };
-  render(<SubMenu {...buttonsProps} />);
+  setup({ buttons });
   const testButton = screen.getByText(buttons[0].name);
   expect(await screen.findAllByRole('button')).toHaveLength(3);
   userEvent.click(testButton);