Migrated App test to react testing library

src/app/App.tsx

@@ -1,7 +1,7 @@
 import { useEffect, FC } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import classNames from 'classnames';
-import NotFound from '../common/NotFound';
+import { NotFound } from '../common/NotFound';
 import { ServersMap } from '../servers/data';
 import { Settings } from '../settings/reducers/settings';
 import { changeThemeInMarkup } from '../utils/theme';
@@ -17,7 +17,7 @@ interface AppProps {
   appUpdated: boolean;
 }
 
-const App = (
+export const App = (
   MainHeader: FC,
   Home: FC,
   MenuLayout: FC,
@@ -65,5 +65,3 @@ const App = (
     </div>
   );
 };
-
-export default App;

src/app/services/provideServices.ts

@@ -1,6 +1,6 @@
 import Bottle from 'bottlejs';
 import { appUpdateAvailable, resetAppUpdate } from '../reducers/appUpdates';
-import App from '../App';
+import { App } from '../App';
 import { ConnectDecorator } from '../../container/types';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {

src/common/MenuLayout.tsx

@@ -7,7 +7,7 @@ import { withSelectedServer } from '../servers/helpers/withSelectedServer';
 import { useSwipeable, useToggle } from '../utils/helpers/hooks';
 import { supportsDomainRedirects, supportsDomainVisits, supportsNonOrphanVisits } from '../utils/helpers/features';
 import { isReachableServer } from '../servers/data';
-import NotFound from './NotFound';
+import { NotFound } from './NotFound';
 import { AsideMenuProps } from './AsideMenu';
 import './MenuLayout.scss';
 

src/common/NotFound.tsx

@@ -4,7 +4,7 @@ import { SimpleCard } from '../utils/SimpleCard';
 
 type NotFoundProps = PropsWithChildren<{ to?: string }>;
 
-const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
+export const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
   <div className="home">
     <SimpleCard className="p-4">
       <h2>Oops! We could not find requested route.</h2>
@@ -17,5 +17,3 @@ const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
     </SimpleCard>
   </div>
 );
-
-export default NotFound;

test/app/App.test.tsx

@@ -1,71 +1,61 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { Route, useLocation } from 'react-router-dom';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 import { Mock } from 'ts-mockery';
 import { Settings } from '../../src/settings/reducers/settings';
-import appFactory from '../../src/app/App';
+import { App as createApp } from '../../src/app/App';
-import { AppUpdateBanner } from '../../src/common/AppUpdateBanner';
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: jest.fn().mockReturnValue({}),
-}));
 
 describe('<App />', () => {
-  let wrapper: ShallowWrapper;
+  const App = createApp(
-  const MainHeader = () => null;
+    () => <>MainHeader</>,
-  const ShlinkVersions = () => null;
+    () => <>Home</>,
-  const App = appFactory(
+    () => <>MenuLayout</>,
-    MainHeader,
+    () => <>CreateServer</>,
-    () => null,
+    () => <>EditServer</>,
-    () => null,
+    () => <>SettingsComp</>,
-    () => null,
+    () => <>ManageServers</>,
-    () => null,
+    () => <>ShlinkVersions</>,
-    () => null,
-    () => null,
-    ShlinkVersions,
   );
-  const createWrapper = () => {
+  const setUp = (activeRoute = '/') => {
-    wrapper = shallow(
+    const history = createMemoryHistory();
-      <App
+    history.push(activeRoute);
-        fetchServers={() => {}}
-        servers={{}}
-        settings={Mock.all<Settings>()}
-        appUpdated={false}
-        resetAppUpdate={() => {}}
-      />,
-    );
 
-    return wrapper;
+    return render(
+      <Router location={history.location} navigator={history}>
+        <App
+          fetchServers={() => {}}
+          servers={{}}
+          settings={Mock.all<Settings>()}
+          appUpdated
+          resetAppUpdate={() => {}}
+        />
+      </Router>,
+    );
   };
 
   afterEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
   it('renders children components', () => {
-    const wrapper = createWrapper();
+    setUp();
 
-    expect(wrapper.find(MainHeader)).toHaveLength(1);
+    expect(screen.getByText('MainHeader')).toBeInTheDocument();
-    expect(wrapper.find(ShlinkVersions)).toHaveLength(1);
+    expect(screen.getByText('ShlinkVersions')).toBeInTheDocument();
-    expect(wrapper.find(AppUpdateBanner)).toHaveLength(1);
+    expect(screen.getByText('This app has just been updated!')).toBeInTheDocument();
   });
 
-  it('renders app main routes', () => {
+  it.each([
-    const wrapper = createWrapper();
+    ['/settings/foo', 'SettingsComp'],
-    const routes = wrapper.find(Route);
+    ['/settings/bar', 'SettingsComp'],
-    const expectedPaths = [
+    ['/manage-servers', 'ManageServers'],
-      undefined,
+    ['/server/create', 'CreateServer'],
-      '/settings/*',
+    ['/server/abc123/edit', 'EditServer'],
-      '/manage-servers',
+    ['/server/def456/edit', 'EditServer'],
-      '/server/create',
+    ['/server/abc123/foo', 'MenuLayout'],
-      '/server/:serverId/edit',
+    ['/server/def456/bar', 'MenuLayout'],
-      '/server/:serverId/*',
+    ['/other', 'Oops! We could not find requested route.'],
-    ];
+  ])('renders expected route', async (activeRoute, expectedComponent) => {
-
+    setUp(activeRoute);
-    expect.assertions(expectedPaths.length + 1);
+    expect(await screen.findByText(expectedComponent)).toBeInTheDocument();
-    expect(routes).toHaveLength(expectedPaths.length + 1);
-    expectedPaths.forEach((path, index) => {
-      expect(routes.at(index).prop('path')).toEqual(path);
-    });
   });
 
   it.each([
@@ -73,11 +63,9 @@ describe('<App />', () => {
     ['/bar', 'shlink-wrapper'],
     ['/', 'shlink-wrapper d-flex d-md-block align-items-center'],
   ])('renders expected classes on shlink-wrapper based on current pathname', (pathname, expectedClasses) => {
-    (useLocation as any).mockReturnValue({ pathname });
+    const { container } = setUp(pathname);
+    const shlinkWrapper = container.querySelector('.shlink-wrapper');
 
-    const wrapper = createWrapper();
+    expect(shlinkWrapper).toHaveAttribute('class', expectedClasses);
-    const shlinkWrapper = wrapper.find('.shlink-wrapper');
-
-    expect(shlinkWrapper.prop('className')).toEqual(expectedClasses);
   });
 });

test/common/NotFound.test.tsx

@@ -1,6 +1,6 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Link } from 'react-router-dom';
-import NotFound from '../../src/common/NotFound';
+import { NotFound } from '../../src/common/NotFound';
 import { SimpleCard } from '../../src/utils/SimpleCard';
 
 describe('<NotFound />', () => {