Merge pull request #109 from getsentry/feat/update-node-16

feat: use node 16 for local dev

Author: JonasBa

.nvmrc

@@ -1 +1 @@
-v12.22.12
+v16.14.2

client/jest.config.js

@@ -23,5 +23,5 @@ const config = createJestConfig(
 );
 
 module.exports = Object.assign(config, {
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jest-environment-jsdom-sixteen'
 });

client/package-lock.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "dependencies": {
+    "jest-environment-jsdom-sixteen": "^2.0.0",
     "@sentry/browser": "^7.7.0",
     "@sentry/react": "^7.7.0",
     "@sentry/replay": "^0.6.0",
@@ -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": {
@@ -35,10 +38,10 @@
     ]
   },
   "engines": {
-    "node": "12.22.12"
+    "node": "16.14.2"
   },
   "volta": {
-    "node": "12.22.12",
-    "npm": "6.14.16"
+    "node": "16.14.2",
+    "npm": "8.5.0"
   }
 }

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';
@@ -14,10 +14,15 @@ const exampleReport = {
 
 it('should fetch the report URL corresponding to the route param', (done) => {
   fetchMock.get('http://example.com/storage/report.json', () => {
-    done();
     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="sr-mask"
+      href=""
+    />
+  </h2>
+  <div>
+    <h3>
+      URL
+    </h3>
+    <ul>
+      <li>
+        <a
+          class="sr-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>
+`;