feat(replay): Use vitest instead of jest [WIP]

WIP, use vitest instead of jest. Some notes:

* Using jsdom 24 to deal with `TextEncoder` issues
* Use vi/jest `*Async` fake timer functions instead of `process.nextTick`
* Our `useFakeTimers` module was setting an interval which was causing all sorts of flakes in tests with the updated fake timers library

Author: billyvg

packages/replay-internal/package.json

@@ -53,8 +53,8 @@
     "clean": "rimraf build sentry-replay-*.tgz",
     "fix": "eslint . --format stylish --fix",
     "lint": "eslint . --format stylish",
-    "test": "jest",
-    "test:watch": "jest --watch",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
     "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push --sig"
   },
   "repository": {
@@ -73,7 +73,10 @@
     "@sentry-internal/rrweb": "2.15.0",
     "@sentry-internal/rrweb-snapshot": "2.15.0",
     "fflate": "^0.8.1",
-    "jsdom-worker": "^0.2.1"
+    "jest-matcher-utils": "^29.0.0",
+    "jsdom": "^24.0.0",
+    "jsdom-worker": "^0.2.1",
+    "vitest": "^1.5.3"
   },
   "dependencies": {
     "@sentry-internal/browser-utils": "8.0.0-beta.5",

packages/replay-internal/jest.setup.ts renamed to packages/replay-internal/test.setup.ts

@@ -1,17 +1,17 @@
-import { TextEncoder } from 'util';
+import { vi } from 'vitest';
+import type { Assertion, AsymmetricMatchersContaining, Mocked, MockedFunction } from 'vitest';
+import { printDiffOrStringify } from 'jest-matcher-utils';
+
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { getClient } from '@sentry/core';
 import type { ReplayRecordingData, Transport } from '@sentry/types';
 import * as SentryUtils from '@sentry/utils';
 
 import type { ReplayContainer, Session } from './src/types';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(global as any).TextEncoder = TextEncoder;
-
-type MockTransport = jest.MockedFunction<Transport['send']>;
+type MockTransport = MockedFunction<Transport['send']>;
 
-jest.spyOn(SentryUtils, 'isBrowser').mockImplementation(() => true);
+vi.spyOn(SentryUtils, 'isBrowser').mockImplementation(() => true);
 
 type EnvelopeHeader = {
   event_id: string;
@@ -36,7 +36,7 @@ type SentReplayExpected = {
 };
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-const toHaveSameSession = function (received: jest.Mocked<ReplayContainer>, expected: undefined | Session) {
+const toHaveSameSession = function (received: Mocked<ReplayContainer>, expected: undefined | Session) {
   const pass = this.equals(received.session?.id, expected?.id) as boolean;
 
   const options = {
@@ -47,12 +47,12 @@ const toHaveSameSession = function (received: jest.Mocked<ReplayContainer>, expe
   return {
     pass,
     message: () =>
-      `${this.utils.matcherHint(
-        'toHaveSameSession',
-        undefined,
-        undefined,
-        options,
-      )}\n\n${this.utils.printDiffOrStringify(expected, received.session, 'Expected', 'Received')}`,
+      `${this.utils.matcherHint('toHaveSameSession', undefined, undefined, options)}\n\n${printDiffOrStringify(
+        expected,
+        received.session,
+        'Expected',
+        'Received',
+      )}`,
   };
 };
 
@@ -152,7 +152,7 @@ function getReplayCalls(calls: any[][][]): any[][][] {
  */
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 const toHaveSentReplay = function (
-  _received: jest.Mocked<ReplayContainer>,
+  _received: Mocked<ReplayContainer>,
   expected?: SentReplayExpected | { sample: SentReplayExpected; inverse: boolean },
 ) {
   const { calls } = (getClient()?.getTransport()?.send as MockTransport).mock;
@@ -194,12 +194,7 @@ const toHaveSentReplay = function (
           : 'Expected Replay to have been sent, but a request was not attempted'
         : `${this.utils.matcherHint('toHaveSentReplay', undefined, undefined, options)}\n\n${results
             .map(({ key, expectedVal, actualVal }: Result) =>
-              this.utils.printDiffOrStringify(
-                expectedVal,
-                actualVal,
-                `Expected (key: ${key})`,
-                `Received (key: ${key})`,
-              ),
+              printDiffOrStringify(expectedVal, actualVal, `Expected (key: ${key})`, `Received (key: ${key})`),
             )
             .join('\n')}`,
   };
@@ -211,7 +206,7 @@ const toHaveSentReplay = function (
  */
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 const toHaveLastSentReplay = function (
-  _received: jest.Mocked<ReplayContainer>,
+  _received: Mocked<ReplayContainer>,
   expected?: SentReplayExpected | { sample: SentReplayExpected; inverse: boolean },
 ) {
   const { calls } = (getClient()?.getTransport()?.send as MockTransport).mock;
@@ -235,12 +230,7 @@ const toHaveLastSentReplay = function (
           : 'Expected Replay to have last been sent, but a request was not attempted'
         : `${this.utils.matcherHint('toHaveSentReplay', undefined, undefined, options)}\n\n${results
             .map(({ key, expectedVal, actualVal }: Result) =>
-              this.utils.printDiffOrStringify(
-                expectedVal,
-                actualVal,
-                `Expected (key: ${key})`,
-                `Received (key: ${key})`,
-              ),
+              printDiffOrStringify(expectedVal, actualVal, `Expected (key: ${key})`, `Received (key: ${key})`),
             )
             .join('\n')}`,
   };
@@ -254,7 +244,7 @@ expect.extend({
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace jest {
+  namespace vi {
     interface AsymmetricMatchers {
       toHaveSentReplay(expected?: SentReplayExpected): void;
       toHaveLastSentReplay(expected?: SentReplayExpected): void;

packages/replay-internal/test/integration/autoSaveSession.test.ts

@@ -1,41 +1,42 @@
+import { vi } from 'vitest';
+
 import { EventType } from '@sentry-internal/rrweb';
 
 import type { RecordingEvent } from '../../src/types';
 import { addEvent } from '../../src/util/addEvent';
 import { resetSdkMock } from '../mocks/resetSdkMock';
 import { useFakeTimers } from '../utils/use-fake-timers';
+import { saveSession } from '../../src/session/saveSession';
 
 useFakeTimers();
 
+vi.mock('../../src/session/saveSession', () => {
+  return {
+    saveSession: vi.fn(),
+  };
+});
+
 describe('Integration | autoSaveSession', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   test.each([
     ['with stickySession=true', true, 1],
     ['with stickySession=false', false, 0],
   ])('%s', async (_: string, stickySession: boolean, addSummand: number) => {
-    const saveSessionSpy = jest.fn();
-
-    jest.mock('../../src/session/saveSession', () => {
-      return {
-        saveSession: saveSessionSpy,
-      };
-    });
-
     const { replay } = await resetSdkMock({
       replayOptions: {
         stickySession,
       },
     });
 
     // Initially called up to three times: once for start, then once for replay.updateSessionActivity & once for segmentId increase
-    expect(saveSessionSpy).toHaveBeenCalledTimes(addSummand * 3);
+    expect(saveSession).toHaveBeenCalledTimes(addSummand * 3);
 
     replay['_updateSessionActivity']();
 
-    expect(saveSessionSpy).toHaveBeenCalledTimes(addSummand * 4);
+    expect(saveSession).toHaveBeenCalledTimes(addSummand * 4);
 
     // In order for runFlush to actually do something, we need to add an event
     const event = {
@@ -48,8 +49,8 @@ describe('Integration | autoSaveSession', () => {
 
     addEvent(replay, event);
 
-    await replay['_runFlush']();
+    await Promise.all([replay['_runFlush'](), vi.runAllTimersAsync()]);
 
-    expect(saveSessionSpy).toHaveBeenCalledTimes(addSummand * 5);
+    expect(saveSession).toHaveBeenCalledTimes(addSummand * 5);
   });
 });

packages/replay-internal/test/integration/beforeAddRecordingEvent.test.ts

@@ -1,3 +1,6 @@
+import { vi } from 'vitest';
+import type { MockedFunction, MockInstance } from 'vitest';
+
 import * as SentryBrowserUtils from '@sentry-internal/browser-utils';
 import * as SentryCore from '@sentry/core';
 import type { Transport } from '@sentry/types';
@@ -14,24 +17,19 @@ import { useFakeTimers } from '../utils/use-fake-timers';
 
 useFakeTimers();
 
-async function advanceTimers(time: number) {
-  jest.advanceTimersByTime(time);
-  await new Promise(process.nextTick);
-}
-
-type MockTransportSend = jest.MockedFunction<Transport['send']>;
+type MockTransportSend = MockedFunction<Transport['send']>;
 
 describe('Integration | beforeAddRecordingEvent', () => {
   let replay: ReplayContainer;
   let integration: Replay;
   let mockTransportSend: MockTransportSend;
-  let mockSendReplayRequest: jest.SpyInstance<any>;
+  let mockSendReplayRequest: MockInstance<any>;
   let domHandler: DomHandler;
   const { record: mockRecord } = mockRrweb();
 
   beforeAll(async () => {
-    jest.setSystemTime(new Date(BASE_TIMESTAMP));
-    jest.spyOn(SentryBrowserUtils, 'addClickKeypressInstrumentationHandler').mockImplementation(handler => {
+    vi.setSystemTime(new Date(BASE_TIMESTAMP));
+    vi.spyOn(SentryBrowserUtils, 'addClickKeypressInstrumentationHandler').mockImplementation(handler => {
       domHandler = handler;
     });
 
@@ -69,14 +67,14 @@ describe('Integration | beforeAddRecordingEvent', () => {
       },
     }));
 
-    mockSendReplayRequest = jest.spyOn(SendReplayRequest, 'sendReplayRequest');
+    mockSendReplayRequest = vi.spyOn(SendReplayRequest, 'sendReplayRequest');
 
-    jest.runAllTimers();
+    vi.runAllTimers();
     mockTransportSend = SentryCore.getClient()?.getTransport()?.send as MockTransportSend;
   });
 
   beforeEach(() => {
-    jest.setSystemTime(new Date(BASE_TIMESTAMP));
+    vi.setSystemTime(new Date(BASE_TIMESTAMP));
     mockRecord.takeFullSnapshot.mockClear();
     mockTransportSend.mockClear();
 
@@ -90,9 +88,9 @@ describe('Integration | beforeAddRecordingEvent', () => {
   });
 
   afterEach(async () => {
-    jest.runAllTimers();
+    vi.runAllTimers();
     await new Promise(process.nextTick);
-    jest.setSystemTime(new Date(BASE_TIMESTAMP));
+    vi.setSystemTime(new Date(BASE_TIMESTAMP));
     clearSession(replay);
   });
 
@@ -106,7 +104,7 @@ describe('Integration | beforeAddRecordingEvent', () => {
       event: new Event('click'),
     });
 
-    await advanceTimers(5000);
+    await vi.runAllTimersAsync();
 
     expect(replay).toHaveLastSentReplay({
       recordingPayloadHeader: { segment_id: 0 },
@@ -135,8 +133,7 @@ describe('Integration | beforeAddRecordingEvent', () => {
 
     integration.start();
 
-    jest.runAllTimers();
-    await new Promise(process.nextTick);
+    await vi.runAllTimersAsync();
     expect(replay).toHaveLastSentReplay({
       recordingPayloadHeader: { segment_id: 0 },
       recordingData: JSON.stringify([{ data: { isCheckout: true }, timestamp: BASE_TIMESTAMP, type: 2 }]),
@@ -174,7 +171,7 @@ describe('Integration | beforeAddRecordingEvent', () => {
       ]),
     );
 
-    jest.runAllTimers();
+    vi.runAllTimers();
     await new Promise(process.nextTick);
 
     expect(replay).not.toHaveLastSentReplay();