fix tests

Author: billyvg

client/package-lock.json

@@ -5,6 +5,7 @@
     "@sentry/react": "^6.19.3",
     "@sentry/replay": "^0.2.0-18",
     "@sentry/tracing": "^6.19.3",
+    "jest-environment-jsdom-sixteen": "^2.0.0",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
@@ -13,13 +14,15 @@
     "react-tooltip": "^3.8.1"
   },
   "devDependencies": {
+    "@testing-library/react": "^12.1.5",
     "fetch-mock": "^5.12.2",
-    "react-scripts": "^3.3.0"
+    "react-scripts": "^3.3.0",
+    "react-test-renderer": "^15.6.1"
   },
   "scripts": {
     "start": "REACT_APP_GIT_SHA=`git rev-parse HEAD` react-scripts start",
     "build": "REACT_APP_GIT_SHA=`git rev-parse HEAD` react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
     "eject": "react-scripts eject"
   },
   "browserslist": {
@@ -39,6 +42,6 @@
   },
   "volta": {
     "node": "16.14.2",
-    "npm": "8.7.0"
+    "npm": "6.14.6"
   }
 }

client/package.json

@@ -3,7 +3,7 @@ import Spinner from 'react-spinkit';
 
 function Loader() {
   return (
-    <div style={{height: '200px'}}>
+    <div data-testid="loader" style={{height: '200px'}}>
       <Spinner
         name="cube-grid"
         style={{position: 'relative', margin: '0 auto', top: '90px'}}

client/src/views/Loader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {render, waitFor, screen, waitForElementToBeRemoved} from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 
 import Report from '../Report';
@@ -13,11 +13,16 @@ const exampleReport = {
 };
 
 it('should fetch the report URL corresponding to the route param', (done) => {
-  fetchMock.get('http://example.com/storage/report.json', () => {
-    done();
+  fetchMock.get('undefined/report.json', () => {
     fetchMock.restore();
     return JSON.stringify(exampleReport);
   });
-  const div = document.createElement('div');
-  ReactDOM.render(<Report match={{params: { report: 'report.json' }}}/>, div);
+
+  const {container} = render(<Report match={{params: { report: 'report.json' }}}/>);
+  waitFor(() => screen.getByTestId('loader')).then(() => {
+    waitForElementToBeRemoved(() => screen.getByTestId('loader')).then(() => {
+      expect(container.firstChild).toMatchSnapshot();
+      done();
+    });
+  });
 });

client/src/views/__tests__/Report.spec.js

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should fetch the report URL corresponding to the route param 1`] = `
+<div
+  data-reactroot=""
+>
+  <div
+    class="alert alert-success"
+  >
+    <strong>
+      Bingo.
+    </strong>
+    <!-- react-text: 15 -->
+     Everything looks good.
+    <!-- /react-text -->
+  </div>
+  <h2>
+    <!-- react-text: 17 -->
+    Report for 
+    <!-- /react-text -->
+    <a
+      class="rr-mask"
+      href=""
+    />
+  </h2>
+  <div>
+    <h3>
+      URL
+    </h3>
+    <ul>
+      <li>
+        <a
+          class="rr-mask"
+          href=""
+        />
+      </li>
+    </ul>
+    <!-- react-text: 24 -->
+    <!-- /react-text -->
+    <h3>
+      <!-- react-text: 26 -->
+      Errors
+      <!-- /react-text -->
+      <!-- react-text: 27 -->
+       
+      <!-- /react-text -->
+      <span
+        class="badge"
+      >
+        0
+      </span>
+    </h3>
+    <ul />
+    <h3>
+      <!-- react-text: 31 -->
+      Warnings
+      <!-- /react-text -->
+      <!-- react-text: 32 -->
+       
+      <!-- /react-text -->
+      <span
+        class="badge"
+      >
+        0
+      </span>
+    </h3>
+    <ul />
+  </div>
+</div>
+`;