mobx-route 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-route",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "keywords": [
     "mobx",
     "react",
@@ -159,6 +159,11 @@
       "default": "./react/components/route-view.js",
       "types": "./react/components/route-view.d.ts"
     },
+    "./react/components/switch.test": {
+      "import": "./react/components/switch.test.js",
+      "default": "./react/components/switch.test.js",
+      "types": "./react/components/switch.test.d.ts"
+    },
     "./react/components/switch": {
       "import": "./react/components/switch.js",
       "default": "./react/components/switch.js",

package/react/components/route-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route-view.d.ts","sourceRoot":"","sources":["../../../src/react/components/route-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AACzD,OAAO,EAAY,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EACL,sBAAsB,EACtB,KAAK,QAAQ,EACb,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,kBAAkB,CAAC,MAAM,SAAS,sBAAsB,IAClE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAExC,MAAM,WAAW,oBAAoB,CAAC,MAAM,SAAS,sBAAsB;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7E,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EACL,SAAS,GACT,CAAC,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC;CAC9E;AAED,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,SAAS,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,wBAAwB,CAAC,MAAM,SAAS,sBAAsB,CAC7E,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7E,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EACL,SAAS,GACT,CAAC,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC;CAC9E;AAED,MAAM,MAAM,eAAe,CAAC,MAAM,SAAS,sBAAsB,IAC7D,wBAAwB,CAAC,MAAM,CAAC,GAChC,2BAA2B,CAAC;AAEhC,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,sBAAsB,IAAI;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,SAAS,QAAQ,GAC3B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC,GAC3C,MAAM,SAAS,eAAe,GAC5B,MAAM,CAAC,QAAQ,CAAC,GAChB,KAAK,CAAC;CACb,CAAC;AAEF,iBAAS,aAAa,CAAC,MAAM,SAAS,sBAAsB,EAC1D,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,GACvC,SAAS,CAsCX;AAED,eAAO,MAAM,SAAS;;CAA0B,CAAC"}
+{"version":3,"file":"route-view.d.ts","sourceRoot":"","sources":["../../../src/react/components/route-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AACzD,OAAO,EAAY,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EACL,sBAAsB,EACtB,KAAK,QAAQ,EACb,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,kBAAkB,CAAC,MAAM,SAAS,sBAAsB,IAClE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAExC,MAAM,WAAW,oBAAoB,CAAC,MAAM,SAAS,sBAAsB;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7E,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EACL,SAAS,GACT,CAAC,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC;CAC9E;AAED,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,SAAS,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,wBAAwB,CAAC,MAAM,SAAS,sBAAsB,CAC7E,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7E,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EACL,SAAS,GACT,CAAC,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC;CAC9E;AAED,MAAM,MAAM,eAAe,CAAC,MAAM,SAAS,sBAAsB,IAC7D,wBAAwB,CAAC,MAAM,CAAC,GAChC,2BAA2B,CAAC;AAEhC,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,sBAAsB,IAAI;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,SAAS,QAAQ,GAC3B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC,GAC3C,MAAM,SAAS,eAAe,GAC5B,MAAM,CAAC,QAAQ,CAAC,GAChB,KAAK,CAAC;CACb,CAAC;AAEF,iBAAS,aAAa,CAAC,MAAM,SAAS,sBAAsB,EAC1D,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,GACvC,SAAS,CAwCX;AAED,eAAO,MAAM,SAAS;;CAA0B,CAAC"}

package/react/components/route-view.js

@@ -14,12 +14,14 @@ function RouteViewBase(props) {
         return props.fallbackView ?? null;
     }
     if (props.lazyView) {
-        lazyViewComponentRef.current = loadable({
-            load: () => props.lazyView(props.route),
-            loading: props.loading,
-            preload: props.preload,
-            throwOnError: props.throwOnError,
-        });
+        if (!lazyViewComponentRef.current) {
+            lazyViewComponentRef.current = loadable({
+                load: () => props.lazyView(props.route),
+                loading: props.loading,
+                preload: props.preload,
+                throwOnError: props.throwOnError,
+            });
+        }
         Component = lazyViewComponentRef.current;
     }
     else {

package/react/components/switch.d.ts

@@ -15,7 +15,7 @@ type SwitchPropsWithDefaultUrl = {
     default?: string;
 } & SwitchBaseProps & RouteNavigateParams;
 export type SwitchProps<TRoute extends AnyRouteEntity> = SwitchPropsWithDefaultRoute<TRoute> | SwitchPropsWithDefaultUrl;
-export declare const Switch: (<TRoute extends AnyRouteEntity>({ children, default: defaultNavigation, params, ...navigateParams }: SwitchProps<TRoute>) => ReactNode) & {
+export declare const Switch: (<TRoute extends AnyRouteEntity>({ children, default: defaultNavigation, params, ...navigateParams }: SwitchProps<TRoute>) => string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null) & {
     displayName: string;
 };
 export {};

package/react/components/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/react/components/switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,SAAS,EAEV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EACL,cAAc,EAEd,mBAAmB,EACnB,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAG7B,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,KAAK,2BAA2B,CAAC,MAAM,SAAS,cAAc,IAAI;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,CAAC,qBAAqB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,SAAS,IAAI,GACxD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;CACrC,GACD;IACE,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC7B,CAAC,GACJ,eAAe,GACf,mBAAmB,CAAC;AAEtB,KAAK,yBAAyB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,eAAe,GACjB,mBAAmB,CAAC;AAEtB,MAAM,MAAM,WAAW,CAAC,MAAM,SAAS,cAAc,IACjD,2BAA2B,CAAC,MAAM,CAAC,GACnC,yBAAyB,CAAC;AAsB9B,eAAO,MAAM,MAAM,IAAsB,MAAM,SAAS,cAAc,uEAMnE,WAAW,CAAC,MAAM,CAAC;;CAiCpB,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/react/components/switch.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA4B,SAAS,EAAa,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EACL,cAAc,EAEd,mBAAmB,EACnB,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAG7B,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,KAAK,2BAA2B,CAAC,MAAM,SAAS,cAAc,IAAI;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,CAAC,qBAAqB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,SAAS,IAAI,GACxD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;CACrC,GACD;IACE,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC7B,CAAC,GACJ,eAAe,GACf,mBAAmB,CAAC;AAEtB,KAAK,yBAAyB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,eAAe,GACjB,mBAAmB,CAAC;AAEtB,MAAM,MAAM,WAAW,CAAC,MAAM,SAAS,cAAc,IACjD,2BAA2B,CAAC,MAAM,CAAC,GACnC,yBAAyB,CAAC;AAE9B,eAAO,MAAM,MAAM,IAAsB,MAAM,SAAS,cAAc,uEAMnE,WAAW,CAAC,MAAM,CAAC;;CAsGpB,CAAC"}

package/react/components/switch.js

@@ -1,36 +1,80 @@
+/* eslint-disable sonarjs/no-nested-conditional */
+/* eslint-disable unicorn/no-nested-ternary */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { buildSearchString } from 'mobx-location-history';
 import { observer } from 'mobx-react-lite';
-import { Fragment, isValidElement, useEffect, } from 'react';
-import { flatMapDeep } from 'yummies/data';
+import { Fragment, isValidElement, useEffect } from 'react';
 import { routeConfig, } from '../../core/index.js';
 import { isRouteEntity } from '../../core/utils/is-route-entity.js';
-const flattenChildren = (children) => flatMapDeep(children, (c) => 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-c && c.type === Fragment ? c.props.children : c);
-const isValidRouteElement = (element) => {
-    return (isValidElement(element) &&
-        // @ts-ignore
-        isRouteEntity(element.props?.route));
-};
 export const Switch = observer(function ({ children, default: defaultNavigation, 
 // @ts-ignore
 params, ...navigateParams }) {
-    let resultElement = null;
-    let defaultElement = null;
-    for (const element of flattenChildren(children)) {
-        if (isValidRouteElement(element) && element.props.route.isOpened) {
-            resultElement = element;
-            break;
+    let activeElement = null;
+    let lastInactiveElement = null;
+    let foundActive = false;
+    const stack = Array.isArray(children)
+        ? [...children].reverse()
+        : children
+            ? [children]
+            : [];
+    while (stack.length > 0) {
+        const node = stack.pop();
+        if (node == null || typeof node === 'boolean') {
+            continue;
+        }
+        if (Array.isArray(node)) {
+            for (let i = node.length - 1; i >= 0; i--) {
+                stack.push(node[i]);
+            }
+            continue;
+        }
+        if (isValidElement(node) && node.type === Fragment) {
+            const fragmentChildren = node.props.children;
+            if (fragmentChildren) {
+                if (Array.isArray(fragmentChildren)) {
+                    for (let i = fragmentChildren.length - 1; i >= 0; i--) {
+                        stack.push(fragmentChildren[i]);
+                    }
+                }
+                else {
+                    stack.push(fragmentChildren);
+                }
+            }
+            continue;
+        }
+        let isActive = false;
+        const checkStack = [node];
+        while (checkStack.length > 0) {
+            const checkNode = checkStack.pop();
+            if (checkNode == null || typeof checkNode === 'boolean') {
+                continue;
+            }
+            if (Array.isArray(checkNode)) {
+                for (const element of checkNode) {
+                    checkStack.push(element);
+                }
+            }
+            else if (isValidElement(checkNode)) {
+                if (isRouteEntity(checkNode.props?.route) &&
+                    checkNode.props.route.isOpened) {
+                    isActive = true;
+                    break;
+                }
+                if (checkNode.props.children) {
+                    checkStack.push(checkNode.props.children);
+                }
+            }
+        }
+        if (isActive) {
+            activeElement = node;
+            foundActive = true;
         }
         else {
-            defaultElement = element;
+            lastInactiveElement = node;
         }
     }
-    const isResultElementFound = !!resultElement;
     useEffect(() => {
-        if (!isResultElementFound && defaultNavigation) {
+        if (!foundActive && defaultNavigation) {
             if (typeof defaultNavigation === 'string') {
                 const history = routeConfig.get().history;
                 const url = `${defaultNavigation}${buildSearchString(navigateParams.query || {})}`;
@@ -45,6 +89,12 @@ params, ...navigateParams }) {
                 defaultNavigation.open(params, navigateParams);
             }
         }
-    }, [isResultElementFound, defaultNavigation]);
-    return resultElement ?? defaultElement;
+    }, [foundActive, defaultNavigation]);
+    if (foundActive) {
+        return activeElement;
+    }
+    if (defaultNavigation) {
+        return null;
+    }
+    return lastInactiveElement ?? null;
 });

package/react/components/switch.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=switch.test.d.ts.map

package/react/components/switch.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.test.d.ts","sourceRoot":"","sources":["../../../src/react/components/switch.test.tsx"],"names":[],"mappings":""}

package/react/components/switch.test.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable sonarjs/no-unstable-nested-components */
+import { act, render } from '@testing-library/react';
+import { createBrowserHistory } from 'mobx-location-history';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { Route, routeConfig } from '../../core/index.js';
+import { mockHistory } from '../../core/route/route.test.js';
+import { RouteView } from './route-view.js';
+import { Switch } from './switch.js';
+describe('<Switch/>', () => {
+    it('Should render nothing when no one route is opened', async () => {
+        const history = mockHistory(createBrowserHistory());
+        routeConfig.update({
+            history,
+        });
+        beforeEach(() => {
+            history.clearMocks();
+        });
+        const route1 = new Route('/test1');
+        const route2 = new Route('/test2');
+        const route3 = new Route('/test3');
+        const App = () => {
+            return (_jsxs(Switch, { children: [_jsx(RouteView, { route: route1, view: () => _jsx("div", { children: "route1" }) }), _jsx(RouteView, { route: route2, view: () => _jsx("div", { children: "route2" }) }), _jsx(RouteView, { route: route3, view: () => _jsx("div", { children: "route3" }) })] }));
+        };
+        const { container } = await act(async () => render(_jsx(App, {})));
+        expect(container.firstChild).toBeNull();
+    });
+    it('Should render last non active element when no one route is opened', async () => {
+        const history = mockHistory(createBrowserHistory());
+        routeConfig.update({
+            history,
+        });
+        beforeEach(() => {
+            history.clearMocks();
+        });
+        const route1 = new Route('/test1');
+        const route2 = new Route('/test2');
+        const route3 = new Route('/test3');
+        const App1 = () => {
+            return (_jsxs(Switch, { children: [_jsx(RouteView, { route: route1, view: () => _jsx("div", { children: "route1" }) }), _jsx(RouteView, { route: route2, view: () => _jsx("div", { children: "route2" }) }), _jsx(RouteView, { route: route3, view: () => _jsx("div", { children: "route3" }) }), _jsx("div", { children: "not_found1" })] }));
+        };
+        const screen1 = await act(async () => render(_jsx(App1, {})));
+        expect(screen1.getByText('not_found1')).toBeDefined();
+    });
+    it('Should render active element when 1-order route is opened', async () => {
+        const history = mockHistory(createBrowserHistory());
+        routeConfig.update({
+            history,
+        });
+        beforeEach(() => {
+            history.clearMocks();
+        });
+        const route1 = new Route('/test1');
+        const route2 = new Route('/test2');
+        const route3 = new Route('/test3');
+        const App1 = () => {
+            return (_jsxs(Switch, { children: [_jsx(RouteView, { route: route1, view: () => _jsx("div", { children: "route1" }) }), _jsx(RouteView, { route: route2, view: () => _jsx("div", { children: "route2" }) }), _jsx(RouteView, { route: route3, view: () => _jsx("div", { children: "route3" }) }), _jsx("div", { children: "not_found1" })] }));
+        };
+        await route1.open();
+        const screen1 = await act(async () => render(_jsx(App1, {})));
+        expect(screen1.getByText('route1')).toBeDefined();
+    });
+    it('Should render active element when 2-order route is opened', async () => {
+        const history = mockHistory(createBrowserHistory());
+        routeConfig.update({
+            history,
+        });
+        beforeEach(() => {
+            history.clearMocks();
+        });
+        const route1 = new Route('/test1');
+        const route2 = new Route('/test2');
+        const route3 = new Route('/test3');
+        const App1 = () => {
+            return (_jsxs(Switch, { children: [_jsx(RouteView, { route: route1, view: () => _jsx("div", { children: "route1" }) }), _jsx(RouteView, { route: route2, view: () => _jsx("div", { children: "route2" }) }), _jsx(RouteView, { route: route3, view: () => _jsx("div", { children: "route3" }) }), _jsx("div", { children: "not_found1" })] }));
+        };
+        await route2.open();
+        const screen1 = await act(async () => render(_jsx(App1, {})));
+        expect(screen1.getByText('route2')).toBeDefined();
+    });
+    it('Should render active element when 3-order route is opened', async () => {
+        const history = mockHistory(createBrowserHistory());
+        routeConfig.update({
+            history,
+        });
+        beforeEach(() => {
+            history.clearMocks();
+        });
+        const route1 = new Route('/test1');
+        const route2 = new Route('/test2');
+        const route3 = new Route('/test3');
+        const App1 = () => {
+            return (_jsxs(Switch, { children: [_jsx(RouteView, { route: route1, view: () => _jsx("div", { children: "route1" }) }), _jsx(RouteView, { route: route2, view: () => _jsx("div", { children: "route2" }) }), _jsx(RouteView, { route: route3, view: () => _jsx("div", { children: "route3" }) }), _jsx("div", { children: "not_found1" })] }));
+        };
+        await route3.open();
+        const screen1 = await act(async () => render(_jsx(App1, {})));
+        expect(screen1.getByText('route3')).toBeDefined();
+    });
+    it('Should render element of LAST OPENED route', async () => {
+        const history = mockHistory(createBrowserHistory());
+        routeConfig.update({
+            history,
+        });
+        beforeEach(() => {
+            history.clearMocks();
+        });
+        const route1 = new Route('/test');
+        const route2 = new Route('/test');
+        const route3 = new Route('/test');
+        const App1 = () => {
+            return (_jsxs(Switch, { children: [_jsx(RouteView, { route: route1, view: () => _jsx("div", { children: "route1" }) }), _jsx(RouteView, { route: route2, view: () => _jsx("div", { children: "route2" }) }), _jsx(RouteView, { route: route3, view: () => _jsx("div", { children: "route3" }) }), _jsx("div", { children: "not_found1" })] }));
+        };
+        await route3.open();
+        const screen1 = await act(async () => render(_jsx(App1, {})));
+        expect(screen1.getByText('route3')).toBeDefined();
+        expect(() => screen1.getByText('route2')).toThrowError();
+        expect(() => screen1.getByText('route1')).toThrowError();
+        expect(() => screen1.getByText('not_found1')).toThrowError();
+    });
+    it('Should render element with wrapper component if it is opened', async () => {
+        const history = mockHistory(createBrowserHistory());
+        routeConfig.update({
+            history,
+        });
+        beforeEach(() => {
+            history.clearMocks();
+        });
+        const route1 = new Route('/route-1-test');
+        const route2 = new Route('/route-2-test');
+        const route3 = new Route('/route-3-test');
+        const Wrapper = ({ children, text, }) => {
+            return (_jsxs("div", { className: "wrapper", children: [_jsx("label", { children: text }), children] }));
+        };
+        const App1 = () => {
+            return (_jsxs(Switch, { children: [_jsx(Wrapper, { text: "wrapper1", children: _jsx(RouteView, { route: route1, view: () => _jsx("div", { children: "route1" }) }) }), _jsx(Wrapper, { text: "wrapper2", children: _jsx(RouteView, { route: route2, view: () => _jsx("div", { children: "route2" }) }) }), _jsx(Wrapper, { text: "wrapper3", children: _jsx(RouteView, { route: route3, view: () => _jsx("div", { children: "route3" }) }) }), _jsx("div", { children: "not_found1" })] }));
+        };
+        await route2.open();
+        const screen1 = await act(async () => render(_jsx(App1, {})));
+        expect(screen1.getByText('route2')).toBeDefined();
+        expect(screen1.getByText('wrapper2')).toBeDefined();
+        expect(() => screen1.getByText('route1')).toThrowError();
+        expect(() => screen1.getByText('wrapper1')).toThrowError();
+        expect(() => screen1.getByText('route3')).toThrowError();
+        expect(() => screen1.getByText('wrapper3')).toThrowError();
+        expect(() => screen1.getByText('not_found1')).toThrowError();
+    });
+});