test(replay): Switch to explicit vitest imports (#13027)

As per https://vitest.dev/config/#globals

> By default, vitest does not provide global APIs for explicitness

I think we should follow vitest defaults here and explicitly import in
the APIs that we need. This refactors our Replay SDK tests to do so.

This change also removes `environment: 'jsdom'` from the vite config in
favour of explicitly adding jsdom environment via the
`@vitest-environment` pragma to the specific test file that needs it.
This should means that our non-browser tests are not polluted with jsdom
globals, and that future writers have to explicitly opt-in to the
behaviour.

Author: AbhiPrasad

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

@@ -1,4 +1,8 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, describe, expect, test, vi } from 'vitest';
 
 import { EventType } from '@sentry-internal/rrweb';
 

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

@@ -1,5 +1,9 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
 import type { MockInstance, MockedFunction } from 'vitest';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import * as SentryBrowserUtils from '@sentry-internal/browser-utils';
 import * as SentryCore from '@sentry/core';

packages/replay-internal/test/integration/coreHandlers/handleAfterSendEvent.test.ts

@@ -1,5 +1,10 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
 import type { MockInstance } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
 import { useFakeTimers } from '../../utils/use-fake-timers';
 
 useFakeTimers();

packages/replay-internal/test/integration/coreHandlers/handleBeforeSendEvent.test.ts

@@ -1,4 +1,8 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { handleBeforeSendEvent } from '../../../src/coreHandlers/handleBeforeSendEvent';
 import type { ReplayContainer } from '../../../src/replay';

packages/replay-internal/test/integration/coreHandlers/handleGlobalEvent.test.ts

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { getClient } from '@sentry/core';
 import type { Event } from '@sentry/types';
 

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

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { BASE_TIMESTAMP } from '..';
 import { resetSdkMock } from '../mocks/resetSdkMock';
 import { useFakeTimers } from '../utils/use-fake-timers';

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

@@ -1,5 +1,10 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { captureException, getClient } from '@sentry/core';
-import { vi } from 'vitest';
 
 import {
   BUFFER_CHECKOUT_TIME,

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

@@ -1,4 +1,8 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { getClient, getCurrentScope } from '@sentry/core';
 import type { Event } from '@sentry/types';

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

@@ -1,3 +1,10 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import type { MockInstance } from 'vitest';
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { getClient } from '@sentry/core';
 
 import { WINDOW } from '../../src/constants';

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

@@ -1,5 +1,9 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
 import type { MockedFunction } from 'vitest';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useFakeTimers } from '../utils/use-fake-timers';
 

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

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
 import { mockSdk } from '../mocks/mockSdk';
 import { useFakeTimers } from '../utils/use-fake-timers';
 

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

@@ -1,4 +1,9 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import type { MockInstance } from 'vitest';
 
 import { mockSdk } from '../index';

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

@@ -1,3 +1,10 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import type { MockedFunction } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { getClient } from '@sentry/core';
 import type { Transport, TransportMakeRequestResponse } from '@sentry/types';
 
@@ -14,7 +21,7 @@ async function advanceTimers(time: number) {
   await new Promise(process.nextTick);
 }
 
-type MockTransportSend = vi.MockedFunction<Transport['send']>;
+type MockTransportSend = MockedFunction<Transport['send']>;
 
 describe('Integration | rate-limiting behaviour', () => {
   let replay: ReplayContainer;

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

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
 import { resetSdkMock } from '../mocks/resetSdkMock';
 import { useFakeTimers } from '../utils/use-fake-timers';
 
@@ -15,7 +21,7 @@ describe('Integration | rrweb', () => {
         stickySession: false,
       },
     });
-    expect(mockRecord.mock.calls[0][0]).toMatchInlineSnapshot(`
+    expect(mockRecord.mock.calls[0]?.[0]).toMatchInlineSnapshot(`
       {
         "blockSelector": ".sentry-block,[data-sentry-block],base[href="/"],img,image,svg,video,object,picture,embed,map,audio,link[rel="icon"],link[rel="apple-touch-icon"]",
         "collectFonts": true,

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

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { getClient } from '@sentry/core';
 import { resetSdkMock } from '../mocks/resetSdkMock';
 import { useFakeTimers } from '../utils/use-fake-timers';

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

@@ -1,5 +1,9 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
 import type { MockInstance, MockedFunction } from 'vitest';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import * as SentryBrowserUtils from '@sentry-internal/browser-utils';
 import * as SentryCore from '@sentry/core';

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

@@ -1,4 +1,8 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { getClient } from '@sentry/core';
 import type { Transport } from '@sentry/types';

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

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { shouldFilterRequest } from '../../src/util/shouldFilterRequest';
 import { mockSdk } from '../index';
 

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

@@ -1,4 +1,8 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { getClient } from '@sentry/core';
 import type { Transport } from '@sentry/types';

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

@@ -1,5 +1,9 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
 import type { MockInstance, MockedFunction } from 'vitest';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import * as SentryBrowserUtils from '@sentry-internal/browser-utils';
 

packages/replay-internal/test/unit/coreHandlers/handleBreadcrumbs.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { CONSOLE_ARG_MAX_SIZE } from '../../../src/constants';
 import { normalizeBreadcrumb, normalizeConsoleBreadcrumb } from '../../../src/coreHandlers/handleBreadcrumbs';
 

packages/replay-internal/test/unit/coreHandlers/handleClick.test.ts

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
+
 import { useFakeTimers } from '../../utils/use-fake-timers';
 
 useFakeTimers();

packages/replay-internal/test/unit/coreHandlers/handleDom.test.ts

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, expect, test } from 'vitest';
+
 import type { HandlerDataDom } from '@sentry/types';
 
 import { handleDom } from '../../../src/coreHandlers/handleDom';

packages/replay-internal/test/unit/coreHandlers/handleKeyboardEvent.test.ts

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, expect, it } from 'vitest';
+
 import { getKeyboardBreadcrumb } from '../../../src/coreHandlers/handleKeyboardEvent';
 
 describe('Unit | coreHandlers | handleKeyboardEvent', () => {

packages/replay-internal/test/unit/coreHandlers/handleNetworkBreadcrumbs.test.ts

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { SENTRY_XHR_DATA_KEY } from '@sentry-internal/browser-utils';
 import type {
   Breadcrumb,

packages/replay-internal/test/unit/coreHandlers/util/addBreadcrumbEvent.test.ts

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { BASE_TIMESTAMP } from '../../..';
 import { addBreadcrumbEvent } from '../../../../src/coreHandlers/util/addBreadcrumbEvent';
 import type { EventBufferArray } from '../../../../src/eventBuffer/EventBufferArray';

packages/replay-internal/test/unit/coreHandlers/util/fetchUtils.test.ts

@@ -1,9 +1,9 @@
+import { describe, expect, it, vi } from 'vitest';
+
 import { useFakeTimers } from '../../../utils/use-fake-timers';
 
 useFakeTimers();
 
-import { vi } from 'vitest';
-
 import { _getResponseInfo } from '../../../../src/coreHandlers/util/fetchUtils';
 
 describe('Unit | coreHandlers | util | fetchUtils', () => {

packages/replay-internal/test/unit/coreHandlers/util/getAttributesToRecord.test.ts

@@ -1,3 +1,5 @@
+import { expect, it } from 'vitest';
+
 import { getAttributesToRecord } from '../../../../src/coreHandlers/util/getAttributesToRecord';
 
 it('records only included attributes', function () {

packages/replay-internal/test/unit/coreHandlers/util/networkUtils.test.ts

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, expect, it } from 'vitest';
+
 import { NETWORK_BODY_MAX_SIZE } from '../../../../src/constants';
 import {
   buildNetworkRequestOrResponse,

packages/replay-internal/test/unit/coreHandlers/util/xhrUtils.test.ts

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, expect, it } from 'vitest';
+
 import { _parseXhrResponse } from '../../../../src/coreHandlers/util/xhrUtils';
 
 describe('Unit | coreHandlers | util | xhrUtils', () => {

packages/replay-internal/test/unit/eventBuffer/EventBufferArray.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { REPLAY_MAX_EVENT_BUFFER_SIZE } from '../../../src/constants';
 import { createEventBuffer } from '../../../src/eventBuffer';
 import { EventBufferSizeExceededError } from '../../../src/eventBuffer/error';

packages/replay-internal/test/unit/eventBuffer/EventBufferCompressionWorker.test.ts

@@ -1,5 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 import 'jsdom-worker';
 
+import { describe, expect, it, vi } from 'vitest';
+
 import { BASE_TIMESTAMP } from '../..';
 import { REPLAY_MAX_EVENT_BUFFER_SIZE } from '../../../src/constants';
 import { createEventBuffer } from '../../../src/eventBuffer';

packages/replay-internal/test/unit/eventBuffer/EventBufferProxy.test.ts

@@ -1,5 +1,12 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 import 'jsdom-worker';
 
+import type { MockInstance } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { BASE_TIMESTAMP } from '../..';
 import { EventBufferProxy } from '../../../src/eventBuffer/EventBufferProxy';
 import { decompress } from '../../utils/compression';

packages/replay-internal/test/unit/multipleInstances.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { replayIntegration } from '../../src/integration';
 
 describe('Unit | multipleInstances', () => {

packages/replay-internal/test/unit/session/createSession.test.ts

@@ -1,4 +1,9 @@
-import { vi } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+
+import type { MockedFunction } from 'vitest';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
 import * as Sentry from '@sentry/core';
 
@@ -16,7 +21,7 @@ vi.mock('@sentry/utils', async () => {
   };
 });
 
-type CaptureEventMockType = vi.MockedFunction<typeof Sentry.captureEvent>;
+type CaptureEventMockType = MockedFunction<typeof Sentry.captureEvent>;
 
 describe('Unit | session | createSession', () => {
   const captureEventMock: CaptureEventMockType = vi.fn();

packages/replay-internal/test/unit/session/fetchSession.test.ts

@@ -1,3 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+
 import { REPLAY_SESSION_KEY, WINDOW } from '../../../src/constants';
 import { fetchSession } from '../../../src/session/fetchSession';