go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/analysis/frontend/ui/src/testing_tools/libs/mock_router.tsx (about)

     1  // Copyright 2022 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  /* eslint-disable valid-jsdoc */
    15  /* eslint-disable @typescript-eslint/no-explicit-any */
    16  
    17  import {
    18    QueryClient,
    19    QueryClientProvider,
    20  } from 'react-query';
    21  import {
    22    BrowserRouter as Router,
    23    Route,
    24    Routes,
    25  } from 'react-router-dom';
    26  
    27  import {
    28    render,
    29    RenderResult,
    30  } from '@testing-library/react';
    31  
    32  /**
    33   * Renders a component wrapped with a mock Router.
    34   *
    35   * @param ui The component to render.
    36   * @param route The route that the current component is at, defaults to '/'.
    37   * @return The render result.
    38   */
    39  export const renderWithRouter = (
    40      ui: React.ReactElement,
    41      route = '/',
    42  ): RenderResult => {
    43    window.history.pushState({}, 'Test page', route);
    44  
    45    return render(ui, { wrapper: Router });
    46  };
    47  
    48  
    49  interface Props {
    50    children: React.ReactNode
    51  }
    52  
    53  /**
    54   * Renders a component with a mock router and a mock query client.
    55   *
    56   * @param ui The UI component to render.
    57   * @param route The route that the current component is at, defaults to '/'.
    58   * @param routeDefinition The definition of the current route,
    59   *                        useful for getting route params.
    60   * @return The render result.
    61   */
    62  export const renderWithRouterAndClient = (
    63      ui: React.ReactElement,
    64      route = '/',
    65      routeDefinition = '',
    66  ) => {
    67    const wrapper = ({ children }: Props) => {
    68      return (
    69        <Router >
    70          <Routes>
    71            <Route
    72              path={routeDefinition ? routeDefinition : route}
    73              element={children}/>
    74          </Routes>
    75        </Router>
    76      );
    77    };
    78    window.history.pushState({}, 'Test page', route);
    79    const client = new QueryClient({
    80      defaultOptions: {
    81        queries: {
    82          retry: false,
    83        },
    84      },
    85    });
    86    return render(
    87        <QueryClientProvider client={client}>{ui}</QueryClientProvider>,
    88        {
    89          wrapper,
    90        });
    91  };