chore(deps): Downgrade typescript & jest to versions used in sentry-javascript (getsentry/sentry-replay#310)

For reasons™️ we are stuck with an old version of typescript (3.8) in
sentry-javascript.
In order to prepare the migration there, this PR downgrades typescript
to that version as well.
With it, that required some other changes, mainly also downgrading jest,
which required adapting some tests... 😢 not ideal, but I tried to make
it work with as little changes as possible.

The two biggest issues were:

* jest 27 does not support `jest.useFakeTimers({ autoAdvance: true })`,
so needed to work around that somehow. I tried to replicate this
manually
* jest 27 does not support `expect.closeTo()`. This was used once, I
commented this out for now.

Other things:

* `@ts-expect-error` is not supported, so instead we use `@ts-ignore`
* eslint also needed downgrading
* I had issues with `@jest/globals` (which we also don't use in
sentry-javascript), so I changed this to use the globals everywhere

Co-authored-by: Billy Vong <[email protected]>

Author: mydea

.eslintrc.js

@@ -20,6 +20,16 @@ module.exports = {
       { vars: 'all', varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
     ],
 
+    '@typescript-eslint/no-explicit-any': 'off',
+
+    // Make sure that all ts-ignore comments are given a description.
+    '@typescript-eslint/ban-ts-comment': [
+      'warn',
+      {
+        'ts-ignore': 'allow-with-description',
+      },
+    ],
+
     'simple-import-sort/imports': [
       'error',
       {

.vscode/settings.json

@@ -29,5 +29,6 @@
   "typescript.preferences.quoteStyle": "single",
   "javascript.preferences.quoteStyle": "single",
   "prettier.jsxSingleQuote": true,
-  "prettier.singleQuote": true
+  "prettier.singleQuote": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

config/rollup.config.core.ts

@@ -31,7 +31,7 @@ const config = defineConfig({
       preventAssignment: false,
       values: {
         __SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version),
-        // @ts-expect-error not gonna deal with types here
+        // @ts-ignore not gonna deal with types here
         __SENTRY_DEBUG__: !IS_PRODUCTION,
       },
     }),

config/tsconfig.worker.json

@@ -4,6 +4,7 @@
     "declaration": false,
     "lib": ["webworker", "scripthost"],
     "baseUrl": "../worker/src",
+    "rootDir": "../worker/src",
     "outDir": "../src/worker"
   },
   "include": ["../worker/src/worker.ts", "../src/types.ts"]

demo/src/App.js

@@ -2,47 +2,46 @@ import React from 'react';
 import './App.css';
 
 function App() {
-  const [state, setState] = React.useState(99);
+  const [state] = React.useState(99);
   React.useEffect(() => {
     async function test() {
-
       try {
-      await fetch('/testing');
+        await fetch('/testing');
       } catch {}
     }
 
     test();
 
     return () => {};
-  }, [])
+  }, []);
 
   return (
-    <div className='App'>
-      <header className='App-header'>
-        <img src={ `/logo${state}.png` } />
+    <div className="App">
+      <header className="App-header">
+        <img src={`/logo${state}.png`} alt="" />
         <h1>Our cool React app</h1>
       </header>
 
       <form>
         <div>
           <label>Email:</label>
-          <input type='email' name='email' placehodler='email' />
+          <input type="email" name="email" placehodler="email" />
         </div>
         <div>
           <label>Password:</label>
-          <input type='password' name='password' placehodler='password' />
+          <input type="password" name="password" placehodler="password" />
         </div>
         <div>
           <label>Secret:</label>
           <input
-            type='email'
-            name='email'
-            placehodler='email'
-            className='sr-ignore'
+            type="email"
+            name="email"
+            placehodler="email"
+            className="sr-ignore"
           />
         </div>
 
-        <div className='sr-block'>
+        <div className="sr-block">
           <p>Secret Block</p>
         </div>
       </form>

jest.setup.ts

@@ -4,7 +4,7 @@ import { Transport } from '@sentry/types';
 import { Session } from './src/session/Session';
 import { Replay } from './src';
 
-// @ts-expect-error TS error, this is replaced in prod builds bc of rollup
+// @ts-ignore TS error, this is replaced in prod builds bc of rollup
 global.__SENTRY_REPLAY_VERSION__ = 'version:Test';
 
 type MockTransport = jest.MockedFunction<Transport['send']>;
@@ -88,17 +88,17 @@ const toHaveSentReplay = function (
     [recordingHeader, recordingPayload] = [],
   ] = envelopeItems;
 
-  // @ts-expect-error recordingPayload is always a string in our tests
+  // @ts-ignore recordingPayload is always a string in our tests
   const [recordingPayloadHeader, events] = recordingPayload?.split('\n') || [];
 
   const actualObj: Required<SentReplayExpected> = {
-    // @ts-expect-error Custom envelope
+    // @ts-ignore Custom envelope
     envelopeHeader: envelopeHeader,
-    // @ts-expect-error Custom envelope
+    // @ts-ignore Custom envelope
     replayEventHeader: replayEventHeader,
-    // @ts-expect-error Custom envelope
+    // @ts-ignore Custom envelope
     replayEventPayload: replayEventPayload,
-    // @ts-expect-error Custom envelope
+    // @ts-ignore Custom envelope
     recordingHeader: recordingHeader,
     recordingPayloadHeader:
       recordingPayloadHeader && JSON.parse(recordingPayloadHeader),
@@ -107,7 +107,9 @@ const toHaveSentReplay = function (
 
   const isObjectContaining =
     expected && 'sample' in expected && 'inverse' in expected;
-  const expectedObj = isObjectContaining ? expected.sample : expected;
+  const expectedObj = isObjectContaining
+    ? (expected as { sample: SentReplayExpected }).sample
+    : (expected as SentReplayExpected);
 
   if (isObjectContaining) {
     console.warn(
@@ -117,7 +119,7 @@ const toHaveSentReplay = function (
 
   const results = expected
     ? Object.entries(actualObj)
-        .map(([key, val]: [key: keyof SentReplayExpected, val: any]) => {
+        .map(([key, val]: [keyof SentReplayExpected, any]) => {
           return [
             !expectedObj?.[key] || this.equals(expectedObj[key], val),
             key,

package.json

@@ -42,30 +42,30 @@
     "@sentry/browser": "^7.7.0",
     "@size-limit/file": "^8.1.0",
     "@size-limit/time": "^8.1.0",
-    "@types/jest": "^29.2.1",
+    "@types/jest": "27.5.1",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.throttle": "^4.1.7",
     "@types/node": "^18.11.0",
     "@types/pako": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
-    "eslint": "^8.10.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "jest": "^29.2.1",
-    "jest-environment-jsdom": "^29.2.1",
+    "jest": "27.5.1",
+    "jest-environment-jsdom": "27.5.1",
     "jsdom-worker": "^0.2.1",
     "pako": "^2.0.4",
     "prettier": "^2.5.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.70.0",
     "rollup-plugin-terser": "^7.0.2",
     "size-limit": "^8.1.0",
-    "ts-jest": "^29.0.3",
-    "ts-node": "^10.9.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.8.4"
+    "ts-jest": "27.1.4",
+    "ts-node": "10.9.1",
+    "tslib": "2.3.1",
+    "typescript": "3.8.3"
   },
   "dependencies": {
     "@sentry/core": "^7.7.0",

src/coreHandlers/handleFetch.test.ts

@@ -46,9 +46,9 @@ it('ignores fetches that have not completed yet', function () {
     ...DEFAULT_DATA,
   };
 
-  // @ts-expect-error: The operand of a 'delete' operator must be optional.ts(2790)
+  // @ts-ignore: The operand of a 'delete' operator must be optional.ts(2790)
   delete data.endTimestamp;
-  // @ts-expect-error: The operand of a 'delete' operator must be optional.ts(2790)
+  // @ts-ignore: The operand of a 'delete' operator must be optional.ts(2790)
   delete data.response;
 
   expect(handleFetch(data)).toEqual(null);

src/coreHandlers/handleScope.test.ts

@@ -13,7 +13,7 @@ it('returns a breadcrumb only if last breadcrumb has changed (unit)', function (
   } as unknown as Scope;
 
   function addBreadcrumb(breadcrumb: Breadcrumb) {
-    // @ts-expect-error using private member
+    // @ts-ignore using private member
     scope._breadcrumbs.push(breadcrumb);
   }
 

src/coreHandlers/handleScope.ts

@@ -5,7 +5,7 @@ import { createBreadcrumb } from '../util/createBreadcrumb';
 let _LAST_BREADCRUMB: null | Breadcrumb = null;
 
 export function handleScope(scope: Scope) {
-  //@ts-expect-error using private val
+  //@ts-ignore using private val
   const newBreadcrumb = scope._breadcrumbs[scope._breadcrumbs.length - 1];
 
   // Listener can be called when breadcrumbs have not changed, so we store the