@trackunit/react-core-contexts-test 0.1.187 → 0.1.189

package/HookRenderer.cjs.js

@@ -6,11 +6,12 @@ var react = require('@testing-library/react');
 var pure = require('@testing-library/react/pure');
 require('@trackunit/react-core-hooks');
 require('lodash/omit');
-require('react-router-dom');
 require('@apollo/client');
 require('@apollo/client/link/error');
 require('@apollo/client/testing');
 require('@trackunit/react-core-contexts-api');
+require('@apollo/client/react');
+require('@tanstack/react-router');
 require('react');
 require('graphql');
 

package/HookRenderer.esm.js

@@ -4,11 +4,12 @@ import { act } from '@testing-library/react';
 import { renderHook } from '@testing-library/react/pure';
 import '@trackunit/react-core-hooks';
 import 'lodash/omit';
-import 'react-router-dom';
 import '@apollo/client';
 import '@apollo/client/link/error';
 import '@apollo/client/testing';
 import '@trackunit/react-core-contexts-api';
+import '@apollo/client/react';
+import '@tanstack/react-router';
 import 'react';
 import 'graphql';
 

package/index.cjs.js

@@ -7,11 +7,12 @@ require('react/jsx-runtime');
 require('@testing-library/react');
 require('@trackunit/react-core-hooks');
 require('lodash/omit');
-require('react-router-dom');
 require('@apollo/client');
 require('@apollo/client/link/error');
 require('@apollo/client/testing');
 require('@trackunit/react-core-contexts-api');
+require('@apollo/client/react');
+require('@tanstack/react-router');
 require('react');
 require('graphql');
 

package/index.cjs2.js

@@ -1,14 +1,15 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('@testing-library/react');
+var react$1 = require('@testing-library/react');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var omit = require('lodash/omit');
-var reactRouterDom = require('react-router-dom');
 var client = require('@apollo/client');
 var error = require('@apollo/client/link/error');
 var testing = require('@apollo/client/testing');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
+var react = require('@apollo/client/react');
+var reactRouter = require('@tanstack/react-router');
 var React = require('react');
 var graphql = require('graphql');
 
@@ -227,9 +228,129 @@ const mockUserSubscriptionContext = {
     numberOfDaysWithAccessToHistoricalData: 30,
     numberOfDaysWithAccessToHistoricalInsights: 30,
     features: [],
+    loading: false,
     packageType: "EXPAND_FLEET_OWNER",
 };
 
+const buildFlatRouteMap = (routes) => {
+    const routeMap = {};
+    routes.forEach(route => {
+        routeMap[route.id] = route;
+        if (Array.isArray(route.children)) {
+            Object.assign(routeMap, buildFlatRouteMap(route.children));
+        }
+    });
+    return routeMap;
+};
+/**
+ * This component is used to wrap the children of the RouterContainer to add a test root container
+ */
+const RootRouteDebugger = () => {
+    // const matches = useMatches();
+    // console.log("matches", matches);
+    return jsxRuntime.jsx(reactRouter.Outlet, {});
+};
+/**
+ * This component is used to wrap the children of the RouterContainer to add a test root container.
+ *
+ * @param addTestRootContainer boolean to add test root container
+ * @param children children to be wrapped
+ * @returns React.ReactElement
+ */
+const TestRenderChildren = ({ addTestRootContainer, children }) => {
+    return addTestRootContainer ? (jsxRuntime.jsx("div", { className: "inline-block h-[1000px] w-[1024px]", "data-testid": "testRoot", style: {
+            "--tw-scale-x": "0.99",
+            "--tw-scale-y": "0.99",
+        }, children: children })) : (jsxRuntime.jsx("div", { children: children }));
+};
+/**
+ * This component is used to wrap the children of the RouterContainer to add a test root container.
+ *
+ * @param addTestRootContainer boolean to add test root container
+ * @param selectedRouterProps selected router props
+ * @param rootRoute root route
+ * @param children children to be wrapped
+ * @returns React.ReactElement
+ */
+const RouterContainer = ({ addTestRootContainer, selectedRouterProps, rootRoute, children, }) => {
+    const client = react.useApolloClient();
+    const memoryHistory = React.useMemo(() => {
+        var _a, _b;
+        return reactRouter.createMemoryHistory({
+            initialEntries: (_b = (_a = selectedRouterProps === null || selectedRouterProps === void 0 ? void 0 : selectedRouterProps.initialEntries) === null || _a === void 0 ? void 0 : _a.map(entry => entry.path)) !== null && _b !== void 0 ? _b : ["/"],
+            initialIndex: 0,
+        });
+    }, [selectedRouterProps]);
+    const getChildren = React.useCallback(() => children, [children]);
+    const router = React.useMemo(() => {
+        var _a, _b;
+        if (!rootRoute) {
+            rootRoute = reactRouter.createRootRoute({ component: RootRouteDebugger });
+            const childRoute = reactRouter.createRoute({
+                path: "/",
+                getParentRoute: () => rootRoute,
+                component: () => (jsxRuntime.jsx(TestRenderChildren, { addTestRootContainer: addTestRootContainer, children: getChildren() })),
+            });
+            rootRoute.addChildren([childRoute]);
+        }
+        else {
+            const pathsToRoute = buildFlatRouteMap([rootRoute]);
+            if (pathsToRoute.__root__) {
+                pathsToRoute.__root__.options.component = () => jsxRuntime.jsx(RootRouteDebugger, {});
+            }
+            if (pathsToRoute["/"]) {
+                // This ensures / is not redirecting to default home route
+                pathsToRoute["/"].options.beforeLoad = () => { };
+            }
+            if (((_a = selectedRouterProps === null || selectedRouterProps === void 0 ? void 0 : selectedRouterProps.initialEntries) === null || _a === void 0 ? void 0 : _a.length) || 0 > 0) {
+                (_b = selectedRouterProps === null || selectedRouterProps === void 0 ? void 0 : selectedRouterProps.initialEntries) === null || _b === void 0 ? void 0 : _b.forEach(entry => {
+                    const route = pathsToRoute[entry.route];
+                    if (route) {
+                        if (entry.component) {
+                            route.options.component = entry.component;
+                        }
+                        else {
+                            route.options.component = () => (jsxRuntime.jsx(TestRenderChildren, { addTestRootContainer: addTestRootContainer, children: getChildren() }));
+                        }
+                    }
+                });
+            }
+            else {
+                const slashRoute = pathsToRoute["/"];
+                if (slashRoute) {
+                    slashRoute.options.component = () => (jsxRuntime.jsx(TestRenderChildren, { addTestRootContainer: addTestRootContainer, children: getChildren() }));
+                }
+                else {
+                    const childRoute = reactRouter.createRoute({
+                        path: "/",
+                        getParentRoute: () => rootRoute,
+                        component: () => (jsxRuntime.jsx(TestRenderChildren, { addTestRootContainer: addTestRootContainer, children: getChildren() })),
+                    }).lazy(() => __awaiter(void 0, void 0, void 0, function* () {
+                        return reactRouter.createLazyRoute("/")({
+                            component: () => (jsxRuntime.jsx(TestRenderChildren, { addTestRootContainer: addTestRootContainer, children: getChildren() })),
+                        });
+                    }));
+                    rootRoute.addChildren([childRoute]);
+                }
+            }
+        }
+        return reactRouter.createRouter({
+            routeTree: rootRoute,
+            history: memoryHistory,
+            context: {
+                hasAccessTo: () => __awaiter(void 0, void 0, void 0, function* () {
+                    return true;
+                }),
+                client: null,
+                defaultUserRoute: "/",
+                isAuthenticated: true,
+            },
+        });
+    }, [rootRoute]);
+    const context = React.useMemo(() => (Object.assign({ hasAccessTo: () => __awaiter(void 0, void 0, void 0, function* () { return true; }), isAuthenticated: true, client, defaultUserRoute: "/" }, ((selectedRouterProps === null || selectedRouterProps === void 0 ? void 0 : selectedRouterProps.context) || {}))), [client]);
+    return jsxRuntime.jsx(reactRouter.RouterProvider, { context: context, router: router });
+};
+
 /**
  * Flushes all promises in the queue.
  * This is useful when testing async code.
@@ -257,7 +378,7 @@ const flushPromises = (waitTimeInMS = 0) => {
  * @returns {Promise<void>} - Returns a promise that resolves after the wait time.
  */
 const flushPromisesInAct = (waitTimeInMS = 0) => {
-    return react.act(() => {
+    return react$1.act(() => {
         return new Promise(resolve => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (global.ORG_setTimeout) {
@@ -286,7 +407,7 @@ class TrackunitProvidersMockBuilder {
         this.selectedNavigationContext = mockNavigationContext;
         this.selectedTokenContext = { token: "fakeToken" };
         this.selectedApolloMocks = [];
-        this.selectedRouterProps = {};
+        this.selectedRouterProps = null;
         this.selectedToastContext = mockToastContext;
         this.selectedConfirmationDialogContext = mockConfirmationDialogContext;
         this.selectedAssetSortingContext = mockAssetSortingContext;
@@ -602,7 +723,7 @@ class TrackunitProvidersMockBuilder {
     /**
      * Use this Router Props with the given mocks.
      *
-     * This is used to provide a MemoryRouter from lib "react-router-dom"
+     * This is used to provide a MemoryRouter from lib "@tanstack/react-router"
      *
      * @example
      * ...
@@ -623,7 +744,7 @@ class TrackunitProvidersMockBuilder {
      */
     routerProps(routerProps) {
         this.selectedRouterProps = routerProps;
-        return this;
+        return this.rootRoute(routerProps.routeTree ? routerProps.routeTree : this.selectedRootRoute);
     }
     /**
      * Use this Manager Apollo Context Provider with the given mocks.
@@ -660,6 +781,10 @@ class TrackunitProvidersMockBuilder {
     validateSuppliedMocks() {
         return true;
     }
+    rootRoute(rootRoute) {
+        this.selectedRootRoute = rootRoute;
+        return this;
+    }
     /**
      * Make sure this represent the same structure as the main index.tsx does.
      *
@@ -667,10 +792,7 @@ class TrackunitProvidersMockBuilder {
      * @param addTestRootContainer - if you want to add a root container to the test.
      */
     getMockedCompositionRoot(testChildren, addTestRootContainer = true, forceDebugging = false) {
-        return (jsxRuntime.jsx(reactCoreHooks.EnvironmentContextProvider, { value: this.selectedEnvironmentContext, children: jsxRuntime.jsx(reactRouterDom.MemoryRouter, Object.assign({}, this.selectedRouterProps, { children: jsxRuntime.jsx(reactCoreHooks.CurrentUserProvider, { value: this.selectedCurrentUserContext, children: jsxRuntime.jsx(reactCoreHooks.AnalyticsContext.Provider, { value: this.selectedAnalyticsContext, children: jsxRuntime.jsx(reactCoreHooks.UserSubscriptionProvider, { value: this.selectedUserSubscriptionContext, children: jsxRuntime.jsx(reactCoreHooks.OemBrandingContextProvider, { value: this.selectedOemBrandingContext, children: jsxRuntime.jsx(reactCoreHooks.TokenProvider, { value: this.selectedTokenContext, children: jsxRuntime.jsx(reactCoreHooks.ToastProvider, { value: this.selectedToastContext, children: jsxRuntime.jsx(reactCoreHooks.ConfirmationDialogProvider, { value: this.selectedConfirmationDialogContext, children: jsxRuntime.jsx(reactCoreHooks.FilterBarProvider, { value: { filterBarValues: this.selectedFilterBarValues }, children: jsxRuntime.jsx(reactCoreHooks.AssetSortingProvider, { value: this.selectedAssetSortingContext, children: jsxRuntime.jsx(ApolloMockedProviderWithError, { addTypename: false, forceDebugging: forceDebugging, mocks: this.selectedApolloMocks, children: jsxRuntime.jsx(reactCoreHooks.NavigationContextProvider, { value: this.selectedNavigationContext, children: jsxRuntime.jsx(reactCoreHooks.CurrentUserPreferenceProvider, { value: this.selectedCurrentUserPreferenceContext, children: addTestRootContainer ? (jsxRuntime.jsx("div", { className: "inline-block h-[1000px] w-[1024px]", "data-testid": "testRoot", style: {
-                                                                        "--tw-scale-x": "0.99",
-                                                                        "--tw-scale-y": "0.99",
-                                                                    }, children: testChildren })) : (jsxRuntime.jsx("div", { children: testChildren })) }) }) }) }) }) }) }) }) }) }) }) }) })) }));
+        return (jsxRuntime.jsx(reactCoreHooks.CurrentUserProvider, { value: this.selectedCurrentUserContext, children: jsxRuntime.jsx(reactCoreHooks.AnalyticsContext.Provider, { value: this.selectedAnalyticsContext, children: jsxRuntime.jsx(reactCoreHooks.UserSubscriptionProvider, { value: this.selectedUserSubscriptionContext, children: jsxRuntime.jsx(reactCoreHooks.OemBrandingContextProvider, { value: this.selectedOemBrandingContext, children: jsxRuntime.jsx(reactCoreHooks.TokenProvider, { value: this.selectedTokenContext, children: jsxRuntime.jsx(reactCoreHooks.ToastProvider, { value: this.selectedToastContext, children: jsxRuntime.jsx(reactCoreHooks.ConfirmationDialogProvider, { value: this.selectedConfirmationDialogContext, children: jsxRuntime.jsx(reactCoreHooks.FilterBarProvider, { value: { filterBarValues: this.selectedFilterBarValues }, children: jsxRuntime.jsx(reactCoreHooks.AssetSortingProvider, { value: this.selectedAssetSortingContext, children: jsxRuntime.jsx(ApolloMockedProviderWithError, { addTypename: false, forceDebugging: forceDebugging, mocks: this.selectedApolloMocks, children: jsxRuntime.jsx(reactCoreHooks.NavigationContextProvider, { value: this.selectedNavigationContext, children: jsxRuntime.jsx(reactCoreHooks.CurrentUserPreferenceProvider, { value: this.selectedCurrentUserPreferenceContext, children: jsxRuntime.jsx(reactCoreHooks.EnvironmentContextProvider, { value: this.selectedEnvironmentContext, children: jsxRuntime.jsx(RouterContainer, { addTestRootContainer: addTestRootContainer, rootRoute: this.selectedRootRoute, selectedRouterProps: this.selectedRouterProps, children: testChildren }) }) }) }) }) }) }) }) }) }) }) }) }) }));
     }
     /**
      * This will return the mocked composition root.
@@ -693,16 +815,16 @@ class TrackunitProvidersMockBuilder {
         return __awaiter(this, void 0, void 0, function* () {
             this.validateSuppliedMocks();
             let mountedcomponent;
-            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
-                mountedcomponent = react.render(child, {
+            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
+                mountedcomponent = react$1.render(child, {
                     wrapper: ({ children }) => this.getMockedCompositionRoot(children),
                 });
                 yield flushPromises();
             }));
-            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
+            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
                 yield flushPromises();
             }));
-            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
+            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
                 yield flushPromises();
             }));
             return mountedcomponent;
@@ -751,7 +873,7 @@ const useDebugger = (propsToWatch, id) => {
         return stackId || "unknown-id";
     }, [id]);
     // eslint-disable-next-line no-console
-    console.log("Rerender", uniqueId);
+    console.log("Rerender", uniqueId, window.location.pathname);
     React.useEffect(() => {
         const changedProps = Object.entries(propsToWatch || {}).reduce((result, [key, value]) => {
             if (prevPropsRef.current && prevPropsRef.current[key] !== value) {

package/index.esm.js

@@ -3,10 +3,11 @@ import 'react/jsx-runtime';
 import '@testing-library/react';
 import '@trackunit/react-core-hooks';
 import 'lodash/omit';
-import 'react-router-dom';
 import '@apollo/client';
 import '@apollo/client/link/error';
 import '@apollo/client/testing';
 import '@trackunit/react-core-contexts-api';
+import '@apollo/client/react';
+import '@tanstack/react-router';
 import 'react';
 import 'graphql';

package/index.esm2.js

@@ -1,13 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { act, render } from '@testing-library/react';
-import { EnvironmentContextProvider, CurrentUserProvider, AnalyticsContext, UserSubscriptionProvider, OemBrandingContextProvider, TokenProvider, ToastProvider, ConfirmationDialogProvider, FilterBarProvider, AssetSortingProvider, NavigationContextProvider, CurrentUserPreferenceProvider } from '@trackunit/react-core-hooks';
+import { CurrentUserProvider, AnalyticsContext, UserSubscriptionProvider, OemBrandingContextProvider, TokenProvider, ToastProvider, ConfirmationDialogProvider, FilterBarProvider, AssetSortingProvider, NavigationContextProvider, CurrentUserPreferenceProvider, EnvironmentContextProvider } from '@trackunit/react-core-hooks';
 import omit from 'lodash/omit';
-import { MemoryRouter } from 'react-router-dom';
 import { ApolloLink } from '@apollo/client';
 import { onError } from '@apollo/client/link/error';
 import { MockLink, MockedProvider } from '@apollo/client/testing';
 import { AssetSortByProperty, SortOrder } from '@trackunit/react-core-contexts-api';
-import React, { useRef, useMemo, useEffect } from 'react';
+import { useApolloClient } from '@apollo/client/react';
+import { createMemoryHistory, createRootRoute, createRoute, createLazyRoute, createRouter, RouterProvider, Outlet } from '@tanstack/react-router';
+import React, { useMemo, useCallback, useRef, useEffect } from 'react';
 import { GraphQLError } from 'graphql';
 
 /******************************************************************************
@@ -220,9 +221,129 @@ const mockUserSubscriptionContext = {
     numberOfDaysWithAccessToHistoricalData: 30,
     numberOfDaysWithAccessToHistoricalInsights: 30,
     features: [],
+    loading: false,
     packageType: "EXPAND_FLEET_OWNER",
 };
 
+const buildFlatRouteMap = (routes) => {
+    const routeMap = {};
+    routes.forEach(route => {
+        routeMap[route.id] = route;
+        if (Array.isArray(route.children)) {
+            Object.assign(routeMap, buildFlatRouteMap(route.children));
+        }
+    });
+    return routeMap;
+};
+/**
+ * This component is used to wrap the children of the RouterContainer to add a test root container
+ */
+const RootRouteDebugger = () => {
+    // const matches = useMatches();
+    // console.log("matches", matches);
+    return jsx(Outlet, {});
+};
+/**
+ * This component is used to wrap the children of the RouterContainer to add a test root container.
+ *
+ * @param addTestRootContainer boolean to add test root container
+ * @param children children to be wrapped
+ * @returns React.ReactElement
+ */
+const TestRenderChildren = ({ addTestRootContainer, children }) => {
+    return addTestRootContainer ? (jsx("div", { className: "inline-block h-[1000px] w-[1024px]", "data-testid": "testRoot", style: {
+            "--tw-scale-x": "0.99",
+            "--tw-scale-y": "0.99",
+        }, children: children })) : (jsx("div", { children: children }));
+};
+/**
+ * This component is used to wrap the children of the RouterContainer to add a test root container.
+ *
+ * @param addTestRootContainer boolean to add test root container
+ * @param selectedRouterProps selected router props
+ * @param rootRoute root route
+ * @param children children to be wrapped
+ * @returns React.ReactElement
+ */
+const RouterContainer = ({ addTestRootContainer, selectedRouterProps, rootRoute, children, }) => {
+    const client = useApolloClient();
+    const memoryHistory = useMemo(() => {
+        var _a, _b;
+        return createMemoryHistory({
+            initialEntries: (_b = (_a = selectedRouterProps === null || selectedRouterProps === void 0 ? void 0 : selectedRouterProps.initialEntries) === null || _a === void 0 ? void 0 : _a.map(entry => entry.path)) !== null && _b !== void 0 ? _b : ["/"],
+            initialIndex: 0,
+        });
+    }, [selectedRouterProps]);
+    const getChildren = useCallback(() => children, [children]);
+    const router = useMemo(() => {
+        var _a, _b;
+        if (!rootRoute) {
+            rootRoute = createRootRoute({ component: RootRouteDebugger });
+            const childRoute = createRoute({
+                path: "/",
+                getParentRoute: () => rootRoute,
+                component: () => (jsx(TestRenderChildren, { addTestRootContainer: addTestRootContainer, children: getChildren() })),
+            });
+            rootRoute.addChildren([childRoute]);
+        }
+        else {
+            const pathsToRoute = buildFlatRouteMap([rootRoute]);
+            if (pathsToRoute.__root__) {
+                pathsToRoute.__root__.options.component = () => jsx(RootRouteDebugger, {});
+            }
+            if (pathsToRoute["/"]) {
+                // This ensures / is not redirecting to default home route
+                pathsToRoute["/"].options.beforeLoad = () => { };
+            }
+            if (((_a = selectedRouterProps === null || selectedRouterProps === void 0 ? void 0 : selectedRouterProps.initialEntries) === null || _a === void 0 ? void 0 : _a.length) || 0 > 0) {
+                (_b = selectedRouterProps === null || selectedRouterProps === void 0 ? void 0 : selectedRouterProps.initialEntries) === null || _b === void 0 ? void 0 : _b.forEach(entry => {
+                    const route = pathsToRoute[entry.route];
+                    if (route) {
+                        if (entry.component) {
+                            route.options.component = entry.component;
+                        }
+                        else {
+                            route.options.component = () => (jsx(TestRenderChildren, { addTestRootContainer: addTestRootContainer, children: getChildren() }));
+                        }
+                    }
+                });
+            }
+            else {
+                const slashRoute = pathsToRoute["/"];
+                if (slashRoute) {
+                    slashRoute.options.component = () => (jsx(TestRenderChildren, { addTestRootContainer: addTestRootContainer, children: getChildren() }));
+                }
+                else {
+                    const childRoute = createRoute({
+                        path: "/",
+                        getParentRoute: () => rootRoute,
+                        component: () => (jsx(TestRenderChildren, { addTestRootContainer: addTestRootContainer, children: getChildren() })),
+                    }).lazy(() => __awaiter(void 0, void 0, void 0, function* () {
+                        return createLazyRoute("/")({
+                            component: () => (jsx(TestRenderChildren, { addTestRootContainer: addTestRootContainer, children: getChildren() })),
+                        });
+                    }));
+                    rootRoute.addChildren([childRoute]);
+                }
+            }
+        }
+        return createRouter({
+            routeTree: rootRoute,
+            history: memoryHistory,
+            context: {
+                hasAccessTo: () => __awaiter(void 0, void 0, void 0, function* () {
+                    return true;
+                }),
+                client: null,
+                defaultUserRoute: "/",
+                isAuthenticated: true,
+            },
+        });
+    }, [rootRoute]);
+    const context = useMemo(() => (Object.assign({ hasAccessTo: () => __awaiter(void 0, void 0, void 0, function* () { return true; }), isAuthenticated: true, client, defaultUserRoute: "/" }, ((selectedRouterProps === null || selectedRouterProps === void 0 ? void 0 : selectedRouterProps.context) || {}))), [client]);
+    return jsx(RouterProvider, { context: context, router: router });
+};
+
 /**
  * Flushes all promises in the queue.
  * This is useful when testing async code.
@@ -279,7 +400,7 @@ class TrackunitProvidersMockBuilder {
         this.selectedNavigationContext = mockNavigationContext;
         this.selectedTokenContext = { token: "fakeToken" };
         this.selectedApolloMocks = [];
-        this.selectedRouterProps = {};
+        this.selectedRouterProps = null;
         this.selectedToastContext = mockToastContext;
         this.selectedConfirmationDialogContext = mockConfirmationDialogContext;
         this.selectedAssetSortingContext = mockAssetSortingContext;
@@ -595,7 +716,7 @@ class TrackunitProvidersMockBuilder {
     /**
      * Use this Router Props with the given mocks.
      *
-     * This is used to provide a MemoryRouter from lib "react-router-dom"
+     * This is used to provide a MemoryRouter from lib "@tanstack/react-router"
      *
      * @example
      * ...
@@ -616,7 +737,7 @@ class TrackunitProvidersMockBuilder {
      */
     routerProps(routerProps) {
         this.selectedRouterProps = routerProps;
-        return this;
+        return this.rootRoute(routerProps.routeTree ? routerProps.routeTree : this.selectedRootRoute);
     }
     /**
      * Use this Manager Apollo Context Provider with the given mocks.
@@ -653,6 +774,10 @@ class TrackunitProvidersMockBuilder {
     validateSuppliedMocks() {
         return true;
     }
+    rootRoute(rootRoute) {
+        this.selectedRootRoute = rootRoute;
+        return this;
+    }
     /**
      * Make sure this represent the same structure as the main index.tsx does.
      *
@@ -660,10 +785,7 @@ class TrackunitProvidersMockBuilder {
      * @param addTestRootContainer - if you want to add a root container to the test.
      */
     getMockedCompositionRoot(testChildren, addTestRootContainer = true, forceDebugging = false) {
-        return (jsx(EnvironmentContextProvider, { value: this.selectedEnvironmentContext, children: jsx(MemoryRouter, Object.assign({}, this.selectedRouterProps, { children: jsx(CurrentUserProvider, { value: this.selectedCurrentUserContext, children: jsx(AnalyticsContext.Provider, { value: this.selectedAnalyticsContext, children: jsx(UserSubscriptionProvider, { value: this.selectedUserSubscriptionContext, children: jsx(OemBrandingContextProvider, { value: this.selectedOemBrandingContext, children: jsx(TokenProvider, { value: this.selectedTokenContext, children: jsx(ToastProvider, { value: this.selectedToastContext, children: jsx(ConfirmationDialogProvider, { value: this.selectedConfirmationDialogContext, children: jsx(FilterBarProvider, { value: { filterBarValues: this.selectedFilterBarValues }, children: jsx(AssetSortingProvider, { value: this.selectedAssetSortingContext, children: jsx(ApolloMockedProviderWithError, { addTypename: false, forceDebugging: forceDebugging, mocks: this.selectedApolloMocks, children: jsx(NavigationContextProvider, { value: this.selectedNavigationContext, children: jsx(CurrentUserPreferenceProvider, { value: this.selectedCurrentUserPreferenceContext, children: addTestRootContainer ? (jsx("div", { className: "inline-block h-[1000px] w-[1024px]", "data-testid": "testRoot", style: {
-                                                                        "--tw-scale-x": "0.99",
-                                                                        "--tw-scale-y": "0.99",
-                                                                    }, children: testChildren })) : (jsx("div", { children: testChildren })) }) }) }) }) }) }) }) }) }) }) }) }) })) }));
+        return (jsx(CurrentUserProvider, { value: this.selectedCurrentUserContext, children: jsx(AnalyticsContext.Provider, { value: this.selectedAnalyticsContext, children: jsx(UserSubscriptionProvider, { value: this.selectedUserSubscriptionContext, children: jsx(OemBrandingContextProvider, { value: this.selectedOemBrandingContext, children: jsx(TokenProvider, { value: this.selectedTokenContext, children: jsx(ToastProvider, { value: this.selectedToastContext, children: jsx(ConfirmationDialogProvider, { value: this.selectedConfirmationDialogContext, children: jsx(FilterBarProvider, { value: { filterBarValues: this.selectedFilterBarValues }, children: jsx(AssetSortingProvider, { value: this.selectedAssetSortingContext, children: jsx(ApolloMockedProviderWithError, { addTypename: false, forceDebugging: forceDebugging, mocks: this.selectedApolloMocks, children: jsx(NavigationContextProvider, { value: this.selectedNavigationContext, children: jsx(CurrentUserPreferenceProvider, { value: this.selectedCurrentUserPreferenceContext, children: jsx(EnvironmentContextProvider, { value: this.selectedEnvironmentContext, children: jsx(RouterContainer, { addTestRootContainer: addTestRootContainer, rootRoute: this.selectedRootRoute, selectedRouterProps: this.selectedRouterProps, children: testChildren }) }) }) }) }) }) }) }) }) }) }) }) }) }));
     }
     /**
      * This will return the mocked composition root.
@@ -744,7 +866,7 @@ const useDebugger = (propsToWatch, id) => {
         return stackId || "unknown-id";
     }, [id]);
     // eslint-disable-next-line no-console
-    console.log("Rerender", uniqueId);
+    console.log("Rerender", uniqueId, window.location.pathname);
     useEffect(() => {
         const changedProps = Object.entries(propsToWatch || {}).reduce((result, [key, value]) => {
             if (prevPropsRef.current && prevPropsRef.current[key] !== value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-core-contexts-test",
-  "version": "0.1.187",
+  "version": "0.1.189",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -13,8 +13,8 @@
     "@trackunit/react-core-contexts-api": "*",
     "@trackunit/react-core-hooks": "*",
     "lodash": "4.17.21",
-    "react-router-dom": "6.18.0",
-    "graphql": "^15.8.0"
+    "graphql": "^15.8.0",
+    "@tanstack/react-router": "1.19.1"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/TrackunitProvidersMockBuilder.d.ts

@@ -1,8 +1,17 @@
 import { MockedResponse } from "@apollo/client/testing";
+import { AnyRoute, RegisteredRouter, RouteIds } from "@tanstack/react-router";
 import { RenderResult } from "@testing-library/react";
 import { ConfirmationDialogContextValue, FilterBarValues, IAnalyticsContext, IAssetSortingContext, ICurrentUserContext, IEnvironmentContext, INavigationContext, IOemBrandingContext, IToastContext, ITokenContext, IUserPreferencesContext, IUserSubscriptionContext } from "@trackunit/react-core-contexts-api";
 import * as React from "react";
-import { MemoryRouterProps } from "react-router-dom";
+export type MemoryRouterProps<T extends AnyRoute> = {
+    routeTree?: T;
+    initialEntries?: {
+        route: RouteIds<RegisteredRouter["routeTree"]>;
+        path: string;
+        component?: () => JSX.Element | null;
+    }[];
+    context?: Record<string, unknown>;
+};
 /**
  * This builder allows you to enable trackunit providers using the builder pattern, and then call 1 of either:
  * For React Components:
@@ -12,12 +21,13 @@ import { MemoryRouterProps } from "react-router-dom";
  * For Storybook:
  * - storybook
  */
-export declare class TrackunitProvidersMockBuilder {
+export declare class TrackunitProvidersMockBuilder<T extends AnyRoute> {
     protected selectedEnvironmentContext: IEnvironmentContext;
     protected selectedNavigationContext: INavigationContext;
     protected selectedTokenContext: ITokenContext;
     protected selectedApolloMocks: MockedResponse[];
-    protected selectedRouterProps: MemoryRouterProps;
+    protected selectedRouterProps: MemoryRouterProps<T> | null;
+    protected selectedRootRoute: AnyRoute | null;
     protected selectedToastContext: IToastContext;
     protected selectedConfirmationDialogContext: ConfirmationDialogContextValue;
     protected selectedAssetSortingContext: IAssetSortingContext;
@@ -289,7 +299,7 @@ export declare class TrackunitProvidersMockBuilder {
     /**
      * Use this Router Props with the given mocks.
      *
-     * This is used to provide a MemoryRouter from lib "react-router-dom"
+     * This is used to provide a MemoryRouter from lib "@tanstack/react-router"
      *
      * @example
      * ...
@@ -308,7 +318,7 @@ export declare class TrackunitProvidersMockBuilder {
      * @param routerProps - The router props to use.
      * @returns { TrackunitProvidersMockBuilder } - The builder.
      */
-    routerProps(routerProps: MemoryRouterProps): this;
+    routerProps(routerProps: MemoryRouterProps<T>): this;
     /**
      * Use this Manager Apollo Context Provider with the given mocks.
      *
@@ -339,6 +349,7 @@ export declare class TrackunitProvidersMockBuilder {
      * @returns {boolean} true or throws error if any invalid mocks
      */
     protected validateSuppliedMocks(): true | never;
+    protected rootRoute(rootRoute: AnyRoute | null): this;
     /**
      * Make sure this represent the same structure as the main index.tsx does.
      *
@@ -365,4 +376,4 @@ export declare class TrackunitProvidersMockBuilder {
 /**
  * This is the default mock builder for the TrackunitProviders.
  */
-export declare const trackunitProviders: () => TrackunitProvidersMockBuilder;
+export declare const trackunitProviders: () => TrackunitProvidersMockBuilder<AnyRoute>;

package/src/utils/routingUtils.d.ts

@@ -0,0 +1,38 @@
+import { AnyRoute } from "@tanstack/react-router";
+import React from "react";
+import { MemoryRouterProps } from "../TrackunitProvidersMockBuilder";
+/**
+ * This component is used to wrap the children of the RouterContainer to add a test root container
+ */
+export declare const RootRouteDebugger: () => JSX.Element;
+/**
+ * This component is used to wrap the children of the RouterContainer to add a test root container
+ */
+export interface TestRenderChildrenProps {
+    addTestRootContainer: boolean;
+    children: React.ReactNode;
+}
+/**
+ * This component is used to wrap the children of the RouterContainer to add a test root container.
+ *
+ * @param addTestRootContainer boolean to add test root container
+ * @param children children to be wrapped
+ * @returns React.ReactElement
+ */
+export declare const TestRenderChildren: ({ addTestRootContainer, children }: TestRenderChildrenProps) => JSX.Element;
+export interface RouterContainerProps<T extends AnyRoute = AnyRoute> {
+    addTestRootContainer: boolean;
+    rootRoute?: T | null;
+    selectedRouterProps: MemoryRouterProps<T> | null;
+    children: React.ReactNode;
+}
+/**
+ * This component is used to wrap the children of the RouterContainer to add a test root container.
+ *
+ * @param addTestRootContainer boolean to add test root container
+ * @param selectedRouterProps selected router props
+ * @param rootRoute root route
+ * @param children children to be wrapped
+ * @returns React.ReactElement
+ */
+export declare const RouterContainer: ({ addTestRootContainer, selectedRouterProps, rootRoute, children, }: RouterContainerProps) => React.ReactElement;