Niloofar Sadeghi / Refactor tests in the route-with-sub-routes.spec.tsx file (Core)

packages/core/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.tsx

@@ -1,30 +1,57 @@
-// TODO refactor old tests in this component
 import React from 'react';
-import { RouteWithSubRoutesRender } from '../route-with-sub-routes.jsx';
 import { Redirect } from 'react-router-dom';
-import { PlatformContext } from '@deriv/shared';
-
-// configure({ adapter: new Adapter() });
-
-describe('<RouteWithSubRoutes />', () => {
-    it('should render one <RouteWithSubRoutesRender /> component', () => {
-        // const comp = (
-        //     <PlatformContext.Provider>
-        //         <RouteWithSubRoutesRender />
-        //     </PlatformContext.Provider>
-        // );
-        // const wrapper = shallow(comp);
-        // expect(wrapper).toHaveLength(1);
+import { render, screen } from '@testing-library/react';
+import RouteWithSubRoutes from '../route-with-sub-routes';
+
+type TMockFunction = {
+    path: string;
+    exact?: boolean;
+};
+
+jest.mock('Stores/connect', () => ({
+    __esModule: true,
+    default: 'mockedDefaultExport',
+    connect:
+        () =>
+        <T,>(Component: T) =>
+            Component,
+}));
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    Route: jest.fn(({ path, exact }: TMockFunction) => (
+        <div>
+            <span>{`path param: ${path}`}</span>
+            <span>{`exact param: ${exact}`}</span>
+        </div>
+    )),
+}));
+
+afterEach(() => jest.clearAllMocks());
+
+const route = {
+    getTitle: jest.fn(),
+    component: Redirect,
+    is_logging_in: true,
+    is_logged_in: true,
+    exact: true,
+    path: '/test-path',
+};
+
+const MockRouteWithSubRoutesRender = () => <RouteWithSubRoutes {...route} />;
+
+describe('RouteWithSubRoutes component', () => {
+    it('should render the "RouteWithSubRoutes" component', () => {
+        render(<MockRouteWithSubRoutesRender />);
+        const span_element = screen.getByText(/path param: \/test-path/i);
+        expect(span_element).toBeInTheDocument();
+    });
+
+    it('should render properties', () => {
+        render(<MockRouteWithSubRoutesRender />);
+        const path_param = screen.getByText(/\/test-path/i);
+        const exact_param = screen.getByText(/exact param: true/i);
+        expect(path_param).toBeInTheDocument();
+        expect(exact_param).toBeInTheDocument();
     });
-    // it('should have props as passed as route', () => {
-    //     const route = { path: '/', component: Redirect, title: '', exact: true, to: '/root' };
-    //     const comp = (
-    //         <PlatformContext.Provider>
-    //             <RouteWithSubRoutesRender {...route} />
-    //         </PlatformContext.Provider>
-    //     );
-    //     const wrapper = shallow(comp);
-    //     expect(wrapper.prop('exact')).toBe(true);
-    //     expect(wrapper.prop('path')).toBe('/');
-    // });
 });

packages/core/src/App/Components/Routes/route-with-sub-routes.jsx

@@ -75,8 +75,6 @@ const RouteWithSubRoutes = route => {
     return <Route exact={route.exact} path={route.path} render={renderFactory} />;
 };
 
-export { RouteWithSubRoutes as RouteWithSubRoutesRender }; // For tests
-
 export default connect(({ gtm, common }) => ({
     pushDataLayer: gtm.pushDataLayer,
     checkAppId: common.checkAppId,