Remove dependency on enzyme from components/App (#1795)

## Which problem is this PR solving?
- Part of #1668
- Using React Testing Library to remove dependency on enzyme for
index.test.js and TopNav.test.js

## How was this change tested?
- Tested my changes inside packages/jaeger-ui/ using command `npx jest
--testPathPattern=src/components/App/.*\.test\.js`
- Also performed yarn test

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [x] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `yarn lint` and `yarn test`

---------

Signed-off-by: suhail34 <suhailkna@gmail.com>
Signed-off-by: Yuri Shkuro <github@ysh.us>
Co-authored-by: Yuri Shkuro <github@ysh.us>

packages/jaeger-ui/src/components/App/TopNav.test.js

@@ -13,8 +13,9 @@
 // limitations under the License.
 
 import React from 'react';
-import { mount } from 'enzyme';
-import { Link, BrowserRouter as Router } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import '@testing-library/jest-dom';
 
 import { mapStateToProps, TopNavImpl as TopNav } from './TopNav';
 
@@ -55,65 +56,101 @@ describe('<TopNav>', () => {
           label: 'Blog',
           url: blogUrl,
         },
+        {
+          label: 'Docs',
+          url: 'http://jaeger.readthedocs.io/en/latest/',
+        },
         configMenuGroup,
       ],
     },
     router: {
-      location: { location: { pathname: 'some-path ' } },
+      location: { location: { pathname: 'some-path' } },
     },
     traceDiff: {},
   };
 
-  let wrapper;
+  describe('renders the default menu options', () => {
+    let component;
+    beforeEach(() => {
+      component = render(
+        <BrowserRouter>
+          <TopNav {...defaultProps} />
+        </BrowserRouter>
+      );
+    });
 
-  beforeEach(() => {
-    wrapper = mount(
-      <Router>
-        <TopNav {...defaultProps} />
-      </Router>
-    );
-  });
+    afterEach(() => {
+      component.unmount();
+    });
 
-  describe('renders the default menu options', () => {
     it('renders the "JAEGER UI" link', () => {
-      const items = wrapper.find(Link).findWhere(link => link.prop('to') === '/');
-      expect(items.length).toBe(1);
+      const items = screen.getByRole('link', { name: 'JAEGER UI' });
+      expect(items).toBeInTheDocument();
     });
+
     it('renders the "Search" button', () => {
-      const items = wrapper.find(Link).findWhere(link => link.prop('to') === '/search');
-      expect(items.length).toBe(1);
+      const items = screen.getByRole('link', { name: 'Search' });
+      expect(items).toBeInTheDocument();
     });
 
     it('renders the "System Architecture" button', () => {
-      const items = wrapper.find(Link).findWhere(link => link.prop('to') === '/dependencies');
-      expect(items.length).toBe(1);
+      const items = screen.getByRole('link', { name: 'System Architecture' });
+      expect(items).toBeInTheDocument();
     });
   });
 
   describe('renders the custom menu', () => {
+    let component;
+    beforeEach(() => {
+      component = render(
+        <BrowserRouter>
+          <TopNav {...defaultProps} />
+        </BrowserRouter>
+      );
+    });
+
+    afterEach(() => {
+      component.unmount();
+    });
+
     it('renders the top-level item', () => {
-      const item = wrapper.find(`[href="${githubUrl}"]`);
-      expect(item.length).toBe(1);
-      expect(item.text()).toMatch(labelGitHub);
+      const item = screen.getByRole('link', { name: labelGitHub });
+      expect(item).toBeInTheDocument();
+      expect(item.href).toBe(githubUrl);
     });
 
     it('renders the nested menu items', () => {
-      const item = wrapper.find(TopNav.CustomNavDropdown);
-      expect(item.length).toBe(1);
-      expect(item.prop('label')).toBe(labelAbout);
-      expect(item.prop('items')).toBe(dropdownItems);
+      const item = screen.getAllByText(labelAbout)[0];
+      expect(item).toBeInTheDocument();
     });
 
     it('adds target=_self to top-level item', () => {
-      const item = wrapper.find(`[href="${githubUrl}"]`);
-      expect(item.length).toBe(1);
-      expect(item.find(`[target="_self"]`).length).toBe(1);
+      const item = screen.getByRole('link', { name: labelGitHub });
+      expect(item.target).toBe('_self');
     });
 
     it('sets target=_blank by default', () => {
-      const item = wrapper.find(`[href="${blogUrl}"]`);
-      expect(item.length).toBe(1);
-      expect(item.find(`[target="_blank"]`).length).toBe(1);
+      const item = screen.getByRole('link', { name: 'Blog' });
+      expect(item.target).toBe('_blank');
+    });
+
+    describe('<CustomNavDropdown>', () => {
+      it('renders sub-menu text', () => {
+        dropdownItems.slice(0, 0).forEach(itemConfig => {
+          const item = screen.getByText(itemConfig.label);
+          expect(item).toBeInTheDocument();
+          expect(item.disabled).toBe(true);
+        });
+      });
+
+      it('renders sub-menu links', () => {
+        dropdownItems.slice(1, 2).forEach(itemConfig => {
+          const item = screen.getByRole('link', { name: itemConfig.label });
+          expect(item).toBeInTheDocument();
+          expect(item.href).toBe(itemConfig.url);
+          expect(item.target).toBe(itemConfig.anchorTarget || '_blank');
+        });
+      });
     });
   });
 });

packages/jaeger-ui/src/components/App/__snapshots__/index.test.js.snap

@@ -62,7 +62,7 @@ exports[`JaegerUIApp does not explode 1`] = `
         }
       }
     >
-      <Connect(WithRouteProps)>
+      <Memo(Connect(WithRouteProps))>
         <Switch>
           <Route
             path="/search"
@@ -127,7 +127,7 @@ exports[`JaegerUIApp does not explode 1`] = `
             <NotFound />
           </Route>
         </Switch>
-      </Connect(WithRouteProps)>
+      </Memo(Connect(WithRouteProps))>
     </Router>
   </HistoryProvider>
 </Provider>

packages/jaeger-ui/src/components/App/index.test.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import shallow from '../../utils/ReactShallowRenderer.test';
 
 import JaegerUIApp from './index';