@common-stack/client-react 0.5.29 → 0.5.31

package/lib/route/render-routes.test.js

@@ -1,46 +1,32 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("@testing-library/react");
-const react_router_dom_1 = require("react-router-dom");
-const react_2 = __importDefault(require("react"));
-const render_routes_1 = require("./render-routes");
+import { cleanup, getByText, render, screen, waitFor } from '@testing-library/react';
+import { Link, useParams, createMemoryRouter, RouterProvider, Outlet, useLoaderData } from 'react-router-dom';
+import React from 'react';
+import { renderRoutes2 as renderRoutes } from './render-routes';
 function TestInitialProps({ foo }) {
-    return react_2.default.createElement("h1", { "data-testid": "test" }, foo);
+    return React.createElement("h1", { "data-testid": "test" }, foo);
 }
 let mountCount = 0;
 let renderCount = 0;
 function TestInitialPropsWithoutUnmount({ foo }) {
-    react_2.default.useEffect(() => {
+    React.useEffect(() => {
         return () => {
             mountCount++;
         };
     }, []);
-    return (react_2.default.createElement("div", null,
-        react_2.default.createElement("h1", { "data-testid": "test2" }, foo),
-        react_2.default.createElement("a", { href: "#bar" }, "link-bar"),
-        react_2.default.createElement(react_router_dom_1.Link, { to: "/get-initial-props" }, "change-route"),
-        react_2.default.createElement("h2", { id: "bar" }, "h2-bar")));
+    return (React.createElement("div", null,
+        React.createElement("h1", { "data-testid": "test2" }, foo),
+        React.createElement("a", { href: "#bar" }, "link-bar"),
+        React.createElement(Link, { to: "/get-initial-props" }, "change-route"),
+        React.createElement("h2", { id: "bar" }, "h2-bar")));
 }
 function TestInitialPropsWithMount({ foo }) {
-    react_2.default.useEffect(() => {
+    React.useEffect(() => {
         mountCount++;
     }, []);
     renderCount++;
-    return react_2.default.createElement("h1", { "data-testid": "test" }, foo);
+    return React.createElement("h1", { "data-testid": "test" }, foo);
 }
-const getInitialProps = () => __awaiter(void 0, void 0, void 0, function* () {
+const getInitialProps = async () => {
     return new Promise((resolve) => {
         setTimeout(() => {
             resolve({
@@ -48,16 +34,16 @@ const getInitialProps = () => __awaiter(void 0, void 0, void 0, function* () {
             });
         }, 100);
     });
-});
+};
 TestInitialProps.getInitialProps = getInitialProps;
 TestInitialPropsWithoutUnmount.getInitialProps = getInitialProps;
 TestInitialPropsWithMount.getInitialProps = getInitialProps;
 function TestInitialPropsParent({ foo, children, }) {
-    return (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement("h1", { "data-testid": "test-parent" }, foo),
+    return (React.createElement(React.Fragment, null,
+        React.createElement("h1", { "data-testid": "test-parent" }, foo),
         children));
 }
-TestInitialPropsParent.getInitialProps = () => __awaiter(void 0, void 0, void 0, function* () {
+TestInitialPropsParent.getInitialProps = async () => {
     return new Promise((resolve) => {
         setTimeout(() => {
             resolve({
@@ -65,22 +51,57 @@ TestInitialPropsParent.getInitialProps = () => __awaiter(void 0, void 0, void 0,
             });
         }, 100);
     });
-});
+};
 const routerConfig = {
+    isServer: false,
     ssrProps: {},
+    loaderArgs: { foo: 'bar' },
     routes: [
+        {
+            path: '/with-loader',
+            loader: async ({ foo }) => {
+                return { title: 'Loader', foo };
+            },
+            component: (props) => {
+                const loaderData = useLoaderData();
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("h1", { "data-testid": "root" }, loaderData.title),
+                    React.createElement("h2", { "data-testid": "foo" }, loaderData.foo),
+                    React.createElement(Outlet, null)));
+            },
+            routes: [
+                {
+                    path: '/with-loader/child/:id',
+                    loader: async ({ params }) => {
+                        const list = ['one', 'two', 'three'];
+                        return { number: list[params.id] };
+                    },
+                    component: (props) => {
+                        const loaderData = useLoaderData();
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement("h1", { "data-testid": "test" }, "Child"),
+                            React.createElement("h2", { "data-testid": "number" }, loaderData.number)));
+                    }
+                },
+            ],
+        },
         {
             path: '/layout',
-            component: (props) => (react_2.default.createElement(react_2.default.Fragment, null,
-                react_2.default.createElement("h1", { "data-testid": "layout" }, "Layout"),
-                react_2.default.createElement("h2", { "data-testid": "routes" }, props.routes.map((r) => r.path).join(',')),
+            component: (props) => (React.createElement(React.Fragment, null,
+                React.createElement("h1", { "data-testid": "layout" }, "Layout"),
+                React.createElement("h2", { "data-testid": "routes" }, props.routes.map((r) => r.path).join(',')),
                 props.children)),
             routes: [
                 {
                     path: '/layout',
-                    component: (props) => (react_2.default.createElement(react_2.default.Fragment, null,
-                        react_2.default.createElement("h1", { "data-testid": "test" }, "Foo"),
-                        react_2.default.createElement("h2", { "data-testid": "routes-embed" }, props.routes.map((r) => r.path).join(',')))),
+                    component: (props) => (React.createElement(React.Fragment, null,
+                        React.createElement("h1", { "data-testid": "test" }, "Foo"),
+                        React.createElement("h2", { "data-testid": "routes-embed" }, props.routes.map((r) => r.path).join(',')))),
+                },
+                {
+                    path: '/layout/top',
+                    component: (props) => (React.createElement(React.Fragment, null,
+                        React.createElement("h1", { "data-testid": "top" }, "Top"))),
                 },
             ],
         },
@@ -89,34 +110,82 @@ const routerConfig = {
             routes: [
                 {
                     path: '/layout-without-component/foo',
-                    component: () => react_2.default.createElement("h1", { "data-testid": "test" }, "Foo"),
+                    component: () => React.createElement("h1", { "data-testid": "test" }, "Foo"),
                 },
             ],
         },
         {
             path: '/users/:id',
             component: (props) => {
-                return react_2.default.createElement("h1", { "data-testid": "test" }, props.match.params.id);
+                let params = useParams();
+                return React.createElement(React.Fragment, null,
+                    React.createElement("h1", { "data-testid": "test" }, params.id),
+                    React.createElement(Outlet, null));
             },
+            routes: [
+                {
+                    path: '/users/:id/dashboard',
+                    component: (props) => {
+                        let params = useParams();
+                        return React.createElement("h2", { "data-testid": "test2" },
+                            "Dashboard of ",
+                            params.id);
+                    },
+                },
+                {
+                    path: '/users/:id/profile',
+                    component: (props) => {
+                        let params = useParams();
+                        return React.createElement("h2", { "data-testid": "test2" },
+                            "Profile of ",
+                            params.id);
+                    },
+                }
+            ]
         },
-        { path: '/bar', component: () => react_2.default.createElement("h1", { "data-testid": "test" }, "Bar") },
+        {
+            path: '/nested-routes',
+            routes: [
+                {
+                    path: '/nested-routes/first',
+                    component: () => React.createElement("h2", { "data-testid": "child" }, "First"),
+                },
+                {
+                    path: '/nested-routes/second',
+                    component: () => React.createElement(React.Fragment, null,
+                        React.createElement("h2", { "data-testid": "child" }, "Second"),
+                        React.createElement(Outlet, null)),
+                    routes: [
+                        {
+                            path: '/nested-routes/second/one',
+                            component: () => React.createElement("h3", { "data-testid": "nest-child" }, "One"),
+                        },
+                        {
+                            path: '/nested-routes/second/two',
+                            component: () => React.createElement("h3", { "data-testid": "nest-child" }, "Two"),
+                        },
+                    ],
+                },
+            ],
+        },
+        { path: '/bar', component: () => React.createElement("h1", { "data-testid": "test" }, "Bar") },
         {
             path: '/bar-exact',
             exact: true,
-            component: () => react_2.default.createElement("h1", { "data-testid": "test" }, "Bar Exact"),
+            component: () => React.createElement("h1", { "data-testid": "test" }, "Bar Exact"),
         },
         {
             path: '/bar-strict/',
             strict: true,
-            component: () => react_2.default.createElement("h1", { "data-testid": "test" }, "Bar Strict"),
+            component: () => React.createElement("h1", { "data-testid": "test" }, "Bar Strict mode will not work"),
         },
         {
             path: '/bar-sensitive',
             sensitive: true,
-            component: () => react_2.default.createElement("h1", { "data-testid": "test" }, "Bar Sensitive"),
+            component: () => React.createElement("h1", { "data-testid": "test" }, "Bar Sensitive"),
         },
         { path: '/redirect', redirect: '/d' },
-        { path: '/d', component: () => react_2.default.createElement("h1", { "data-testid": "test" }, "Redirect") },
+        { path: '/d', component: () => React.createElement("h1", { "data-testid": "test" }, "Redirect") },
         { path: '/get-initial-props', component: TestInitialProps },
         {
             path: '/get-initial-props-without-unmount',
@@ -139,124 +208,245 @@ const routerConfig = {
         {
             path: '/props-route',
             foo: 'bar',
-            component: (props) => (react_2.default.createElement("h1", { "data-testid": "test" }, `${props.route.path} ${props.route.foo}`)),
+            component: (props) => (React.createElement("h1", { "data-testid": "test" }, `${props.route.path} ${props.route.foo}`)),
         },
         {
             path: '/pass-props',
             component: (props) => {
-                return react_2.default.Children.map(props.children, (child) => {
-                    return react_2.default.cloneElement(child, { foo: 'bar' });
+                return React.Children.map(props.children, (child) => {
+                    return React.cloneElement(child, { foo: 'bar' });
                 });
             },
             routes: [
                 {
                     path: '/pass-props',
-                    component: (props) => react_2.default.createElement("h1", { "data-testid": "test" }, props.foo),
+                    component: (props) => React.createElement("h1", { "data-testid": "test" }, props.foo),
                 },
             ],
         },
         {
             path: '/wrappers',
-            component: () => react_2.default.createElement("h1", null, "foo"),
+            component: () => React.createElement("h1", null, "foo"),
             wrappers: [
-                (props) => (react_2.default.createElement(react_2.default.Fragment, null,
-                    react_2.default.createElement("h1", null,
+                (props) => (React.createElement(React.Fragment, null,
+                    React.createElement("h1", null,
                         "wrapper 1 ",
                         props.route.path),
                     props.children)),
-                (props) => (react_2.default.createElement(react_2.default.Fragment, null,
-                    react_2.default.createElement("h1", null, "wrapper 2"),
+                (props) => (React.createElement(React.Fragment, null,
+                    React.createElement("h1", null, "wrapper 2"),
                     props.children)),
             ],
         },
-        { component: () => react_2.default.createElement("h1", { "data-testid": "test" }, "Fallback") },
+        { component: () => React.createElement("h1", { "data-testid": "test" }, "Fallback") },
     ],
     // plugin: new Plugin(),
 };
-let routes = (0, render_routes_1.renderRoutes2)(routerConfig);
+// const setComponent = (configs) => {
+//   return configs.map((config) => {
+//     config.component = (props) => {
+//       const configParam = useParams();
+//       if (Array.isArray(config.routes)) {
+//         // console.log(props);
+//         return <section><h1>{config.path}</h1><span>{JSON.stringify(configParam)}</span><Outlet /></section>
+//       } else {
+//         return <section><h1>{config.path}</h1><span>{JSON.stringify(configParam)}</span><p>{config.key}</p></section>
+//       }
+//     }
+//     if (Array.isArray(config.routes)) {
+//       config.routes = setComponent(config.routes);
+//     }
+//     return config
+//   })
+// }
+// routerConfig.routes = setComponent(testRoutes);
+const routes = renderRoutes(routerConfig);
 beforeEach(() => {
     window.g_useSSR = true;
     window.g_initialProps = null;
     mountCount = 0;
     renderCount = 0;
 });
-afterEach(() => __awaiter(void 0, void 0, void 0, function* () {
+afterEach(async () => {
     delete window.g_useSSR;
     delete window.g_initialProps;
-    yield (0, react_1.cleanup)();
-}));
-test('/layout', () => __awaiter(void 0, void 0, void 0, function* () {
-    const { container } = (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/layout'] }, routes));
-    expect(container).toMatchSnapshot();
-    expect((yield react_1.screen.findByTestId('layout')).innerHTML).toEqual('Layout');
-    expect((yield react_1.screen.findByTestId('routes')).innerHTML).toContain('/layout,/layout-without-component,/users/:id');
-    expect((yield react_1.screen.findByTestId('routes-embed')).innerHTML).toContain('/layout,/layout-without-component,/users/:id');
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('Foo');
-}));
-test('/layout-without-component', () => __awaiter(void 0, void 0, void 0, function* () {
-    (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/layout-without-component/foo'] }, routes));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('Foo');
-}));
-test('/bar', () => __awaiter(void 0, void 0, void 0, function* () {
-    (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/bar'] }, routes));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('Bar');
-}));
-test('/BAR', () => __awaiter(void 0, void 0, void 0, function* () {
-    (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/BAR'] }, routes));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('Bar');
-}));
-test('/bar-exact/foo', () => __awaiter(void 0, void 0, void 0, function* () {
-    (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/bar-exact/foo'] }, routes));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('Fallback');
-}));
-test('/bar-strict', () => __awaiter(void 0, void 0, void 0, function* () {
-    (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/bar-strict'] }, routes));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('Fallback');
-}));
-test('/BAR-sensitive', () => __awaiter(void 0, void 0, void 0, function* () {
-    (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/BAR-sensitive'] }, routes));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('Fallback');
-}));
-test('/users/123', () => __awaiter(void 0, void 0, void 0, function* () {
-    (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/users/123'] }, routes));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('123');
-}));
-test('/redirect', () => __awaiter(void 0, void 0, void 0, function* () {
-    (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/redirect'] }, routes));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('Redirect');
-}));
-test('/props-route', () => __awaiter(void 0, void 0, void 0, function* () {
-    (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/props-route'] }, routes));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('/props-route bar');
-}));
-test('/pass-props', () => __awaiter(void 0, void 0, void 0, function* () {
-    const { container } = (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/pass-props'] }, routes));
-    yield (0, react_1.waitFor)(() => (0, react_1.getByText)(container, 'bar'));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('bar');
-}));
-test('/get-initial-props-with-mount', () => __awaiter(void 0, void 0, void 0, function* () {
-    const newRoutes = (0, render_routes_1.renderRoutes2)(routerConfig);
+    await cleanup();
+});
+// test('/o/:orgName/dashboard', async () => {
+//   const router = createMemoryRouter(routes, {initialEntries: ['/o/toka/dashboard']});
+//   const { container } = render(<RouterProvider router={router} />)
+//   expect(container).toMatchSnapshot();
+// });
+test('/layout', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/layout'] });
+    const { container } = render(React.createElement(RouterProvider, { router: router }));
+    // const { container } = render(
+    //   <MemoryRouter initialEntries={['/layout']}>
+    //     {routes}
+    //   </MemoryRouter>
+    // );
+    // expect(container).toMatchSnapshot();
+    expect((await screen.findByTestId('layout')).innerHTML).toEqual('Layout');
+    expect((await screen.findByTestId('routes')).innerHTML).toContain('/layout,/layout-without-component,/users/:id');
+    expect((await screen.findByTestId('routes-embed')).innerHTML).toContain('/layout,/layout-without-component,/users/:id');
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('Foo');
+});
+test('/layout/top', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/layout/top'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    expect((await screen.findByTestId('top')).innerHTML).toEqual('Top');
+});
+test('/layout-without-component', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/layout-without-component/foo'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // render(
+    //   <MemoryRouter initialEntries={['/layout-without-component/foo']}>
+    //     {routes}
+    //   </MemoryRouter>,
+    // );
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('Foo');
+});
+test('/with-loader', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/with-loader'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    expect((await screen.findByTestId('root')).innerHTML).toEqual('Loader');
+    expect((await screen.findByTestId('foo')).innerHTML).toEqual('bar');
+});
+test('/with-loader/child', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/with-loader/child/1'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    expect((await screen.findByTestId('root')).innerHTML).toEqual('Loader');
+    expect((await screen.findByTestId('foo')).innerHTML).toEqual('bar');
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('Child');
+    expect((await screen.findByTestId('number')).innerHTML).toEqual('two');
+});
+test('/nested-routes/first', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/nested-routes/first'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    expect((await screen.findByTestId('child')).innerHTML).toEqual('First');
+});
+test('/nested-routes/second/one', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/nested-routes/second/one'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    expect((await screen.findByTestId('nest-child')).innerHTML).toEqual('One');
+});
+test('/bar', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/bar'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // render(<MemoryRouter initialEntries={['/bar']}>{routes}</MemoryRouter>);
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('Bar');
+});
+test('/BAR', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/BAR'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // render(<MemoryRouter initialEntries={['/BAR']}>{routes}</MemoryRouter>);
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('Bar');
+});
+test('/bar-exact/foo', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/bar-exact/foo'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // render(
+    //   <MemoryRouter initialEntries={['/bar-exact/foo']}>{routes}</MemoryRouter>,
+    // );
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('Fallback');
+});
+test('/bar-strict', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/bar-strict'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // render(
+    //   <MemoryRouter initialEntries={['/bar-strict']}>{routes}</MemoryRouter>,
+    // );
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('Bar Strict mode will not work');
+});
+test('/BAR-sensitive', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/BAR-sensitive'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // render(
+    //   <MemoryRouter initialEntries={['/BAR-sensitive']}>{routes}</MemoryRouter>,
+    // );
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('Fallback');
+});
+test('/users/123', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/users/123'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // render(<MemoryRouter initialEntries={['/users/123']}>{routes}</MemoryRouter>);
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('123');
+});
+test('/users/123/dashboard', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/users/123/dashboard'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // render(<MemoryRouter initialEntries={['/users/123']}>{routes}</MemoryRouter>);
+    expect((await screen.findByTestId('test2')).innerHTML).toEqual('Dashboard of 123');
+});
+test('/redirect', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/redirect'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // const newRoutes = renderRoutes({...routerConfig, withRoutesElement: true});
+    // render(<MemoryRouter initialEntries={['/redirect']}>{newRoutes}</MemoryRouter>);
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('Redirect');
+});
+test('/props-route', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/props-route'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // render(
+    //   <MemoryRouter initialEntries={['/props-route']}>{routes}</MemoryRouter>,
+    // );
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('/props-route bar');
+});
+test('/pass-props', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/pass-props'] });
+    const { container } = render(React.createElement(RouterProvider, { router: router }));
+    // const { container } = render(
+    //   <MemoryRouter initialEntries={['/pass-props']}>{routes}</MemoryRouter>,
+    // );
+    await waitFor(() => getByText(container, 'bar'));
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('bar');
+});
+test('/get-initial-props-with-mount', async () => {
+    const newRoutes = renderRoutes(routerConfig);
+    const router = createMemoryRouter(newRoutes, { initialEntries: ['/get-initial-props-with-mount'] });
     expect(mountCount).toEqual(0);
     expect(renderCount).toEqual(0);
-    const { container } = (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/get-initial-props-with-mount'] }, newRoutes));
-    yield (0, react_1.waitFor)(() => (0, react_1.getByText)(container, 'bar'));
+    const { container } = render(React.createElement(RouterProvider, { router: router }));
+    // const { container } = render(
+    //   <MemoryRouter initialEntries={['/get-initial-props-with-mount']}>
+    //     {newRoutes}
+    //   </MemoryRouter>,
+    // );
+    await waitFor(() => getByText(container, 'bar'));
     expect(mountCount).toEqual(1);
     expect(renderCount).toEqual(2);
-}));
-test('/get-initial-props-embed', () => __awaiter(void 0, void 0, void 0, function* () {
-    const newRoutes = (0, render_routes_1.renderRoutes2)(routerConfig);
-    const { container } = (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/get-initial-props-embed'] }, newRoutes));
-    yield (0, react_1.waitFor)(() => (0, react_1.getByText)(container, 'bar'));
-    yield (0, react_1.waitFor)(() => (0, react_1.getByText)(container, 'parent'));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('bar');
-    expect((yield react_1.screen.findByTestId('test-parent')).innerHTML).toEqual('parent');
-}));
+});
+test('/get-initial-props-embed', async () => {
+    const newRoutes = renderRoutes(routerConfig);
+    const router = createMemoryRouter(newRoutes, { initialEntries: ['/get-initial-props-embed'] });
+    const { container } = render(React.createElement(RouterProvider, { router: router }));
+    // const { container } = render(
+    //   <MemoryRouter initialEntries={['/get-initial-props-embed']}>
+    //     {newRoutes}
+    //   </MemoryRouter>,
+    // );
+    await waitFor(() => getByText(container, 'bar'));
+    await waitFor(() => getByText(container, 'parent'));
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('bar');
+    expect((await screen.findByTestId('test-parent')).innerHTML).toEqual('parent');
+});
 test('/wrappers', () => {
-    const { container } = (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/wrappers'] }, routes));
+    const router = createMemoryRouter(routes, { initialEntries: ['/wrappers'] });
+    const { container } = render(React.createElement(RouterProvider, { router: router }));
+    // const { container } = render(
+    //   <MemoryRouter initialEntries={['/wrappers']}>{routes}</MemoryRouter>,
+    // );
     expect(container.innerHTML).toEqual('<h1>wrapper 1 /wrappers</h1><h1>wrapper 2</h1><h1>foo</h1>');
 });
-test('/fallback-20140924', () => __awaiter(void 0, void 0, void 0, function* () {
-    (0, react_1.render)(react_2.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: ['/fallback-20140924'] }, routes));
-    expect((yield react_1.screen.findByTestId('test')).innerHTML).toEqual('Fallback');
-}));
+test('/fallback-20140924', async () => {
+    const router = createMemoryRouter(routes, { initialEntries: ['/fallback-20140924'] });
+    render(React.createElement(RouterProvider, { router: router }));
+    // render(
+    //   <MemoryRouter initialEntries={['/fallback-20140924']}>
+    //     {routes}
+    //   </MemoryRouter>,
+    // );
+    expect((await screen.findByTestId('test')).innerHTML).toEqual('Fallback');
+});
 //# sourceMappingURL=render-routes.test.js.map