getsentry · AbhiPrasad · Feb 25, 2025 · Feb 25, 2025
diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -85,8 +85,8 @@
     "clean": "rimraf build coverage sentry-react-*.tgz",
     "fix": "eslint . --format stylish --fix",
     "lint": "eslint . --format stylish",
-    "test": "jest",
-    "test:watch": "jest --watch",
+    "test": "vitest run",
+    "test:watch": "vitest --watch",
     "yalc:publish": "yalc publish --push --sig"
   },
   "volta": {

diff --git a/packages/react/test/error.test.ts b/packages/react/test/error.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, test } from 'vitest';
+
 import { isAtLeastReact17 } from '../src/error';
 
 describe('isAtLeastReact17', () => {

diff --git a/packages/react/test/errorboundary.test.tsx b/packages/react/test/errorboundary.test.tsx
@@ -1,3 +1,8 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
 import { Scope, getClient, setCurrentClient } from '@sentry/browser';
 import type { Client } from '@sentry/core';
 import { fireEvent, render, screen } from '@testing-library/react';
@@ -7,15 +12,14 @@ import { useState } from 'react';
 import type { ErrorBoundaryProps, FallbackRender } from '../src/errorboundary';
 import { ErrorBoundary, UNKNOWN_COMPONENT, withErrorBoundary } from '../src/errorboundary';
 
-const mockCaptureException = jest.fn();
-const mockShowReportDialog = jest.fn();
-const mockClientOn = jest.fn();
+const mockCaptureException = vi.fn();
+const mockShowReportDialog = vi.fn();
+const mockClientOn = vi.fn();
 const EVENT_ID = 'test-id-123';
 
-jest.mock('@sentry/browser', () => {
-  const actual = jest.requireActual('@sentry/browser');
+vi.mock('@sentry/browser', async requireActual => {
   return {
-    ...actual,
+    ...(await requireActual()),
     captureException: (...args: unknown[]) => {
       mockCaptureException(...args);
       return EVENT_ID;
@@ -92,7 +96,7 @@ describe('withErrorBoundary', () => {
 });
 
 describe('ErrorBoundary', () => {
-  jest.spyOn(console, 'error').mockImplementation();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
 
   afterEach(() => {
     mockCaptureException.mockClear();
@@ -141,7 +145,7 @@ describe('ErrorBoundary', () => {
   });
 
   it('calls `onMount` when mounted', () => {
-    const mockOnMount = jest.fn();
+    const mockOnMount = vi.fn();
     render(
       <ErrorBoundary fallback={<h1>Error Component</h1>} onMount={mockOnMount}>
         <h1>children</h1>
@@ -152,7 +156,7 @@ describe('ErrorBoundary', () => {
   });
 
   it('calls `onUnmount` when unmounted', () => {
-    const mockOnUnmount = jest.fn();
+    const mockOnUnmount = vi.fn();
     const { unmount } = render(
       <ErrorBoundary fallback={<h1>Error Component</h1>} onUnmount={mockOnUnmount}>
         <h1>children</h1>
@@ -243,7 +247,7 @@ describe('ErrorBoundary', () => {
 
   describe('error', () => {
     it('calls `componentDidCatch() when an error occurs`', () => {
-      const mockOnError = jest.fn();
+      const mockOnError = vi.fn();
       render(
         <TestApp fallback={<p>You have hit an error</p>} onError={mockOnError}>
           <h1>children</h1>
@@ -267,12 +271,14 @@ describe('ErrorBoundary', () => {
         mechanism: { handled: true },
       });
 
-      expect(mockOnError.mock.calls[0][0]).toEqual(mockCaptureException.mock.calls[0][0]);
+      expect(mockOnError.mock.calls[0]?.[0]).toEqual(mockCaptureException.mock.calls[0]?.[0]);
 
       // Check if error.cause -> react component stack
-      const error = mockCaptureException.mock.calls[0][0];
+      const error = mockCaptureException.mock.calls[0]?.[0];
       const cause = error.cause;
-      expect(cause.stack).toEqual(mockCaptureException.mock.calls[0][1]?.captureContext.contexts.react.componentStack);
+      expect(cause.stack).toEqual(
+        mockCaptureException.mock.calls[0]?.[1]?.captureContext.contexts.react.componentStack,
+      );
       expect(cause.name).toContain('React ErrorBoundary');
       expect(cause.message).toEqual(error.message);
     });
@@ -326,12 +332,12 @@ describe('ErrorBoundary', () => {
       });
 
       // Check if error.cause -> react component stack
-      const error = mockCaptureException.mock.calls[0][0];
+      const error = mockCaptureException.mock.calls[0]?.[0];
       expect(error.cause).not.toBeDefined();
     });
 
     it('handles when `error.cause` is nested', () => {
-      const mockOnError = jest.fn();
+      const mockOnError = vi.fn();
 
       function CustomBam(): JSX.Element {
         const firstError = new Error('bam');
@@ -364,19 +370,21 @@ describe('ErrorBoundary', () => {
         mechanism: { handled: true },
       });
 
-      expect(mockOnError.mock.calls[0][0]).toEqual(mockCaptureException.mock.calls[0][0]);
+      expect(mockOnError.mock.calls[0]?.[0]).toEqual(mockCaptureException.mock.calls[0]?.[0]);
 
-      const thirdError = mockCaptureException.mock.calls[0][0];
+      const thirdError = mockCaptureException.mock.calls[0]?.[0];
       const secondError = thirdError.cause;
       const firstError = secondError.cause;
       const cause = firstError.cause;
-      expect(cause.stack).toEqual(mockCaptureException.mock.calls[0][1]?.captureContext.contexts.react.componentStack);
+      expect(cause.stack).toEqual(
+        mockCaptureException.mock.calls[0]?.[1]?.captureContext.contexts.react.componentStack,
+      );
       expect(cause.name).toContain('React ErrorBoundary');
       expect(cause.message).toEqual(thirdError.message);
     });
 
     it('handles when `error.cause` is recursive', () => {
-      const mockOnError = jest.fn();
+      const mockOnError = vi.fn();
 
       function CustomBam(): JSX.Element {
         const firstError = new Error('bam');
@@ -408,19 +416,19 @@ describe('ErrorBoundary', () => {
         mechanism: { handled: true },
       });
 
-      expect(mockOnError.mock.calls[0][0]).toEqual(mockCaptureException.mock.calls[0][0]);
+      expect(mockOnError.mock.calls[0]?.[0]).toEqual(mockCaptureException.mock.calls[0]?.[0]);
 
-      const error = mockCaptureException.mock.calls[0][0];
+      const error = mockCaptureException.mock.calls[0]?.[0];
       const cause = error.cause;
       // We need to make sure that recursive error.cause does not cause infinite loop
       expect(cause.stack).not.toEqual(
-        mockCaptureException.mock.calls[0][1]?.captureContext.contexts.react.componentStack,
+        mockCaptureException.mock.calls[0]?.[1]?.captureContext.contexts.react.componentStack,
       );
       expect(cause.name).not.toContain('React ErrorBoundary');
     });
 
     it('calls `beforeCapture()` when an error occurs', () => {
-      const mockBeforeCapture = jest.fn();
+      const mockBeforeCapture = vi.fn();
 
       const testBeforeCapture = (...args: any[]) => {
         expect(mockCaptureException).toHaveBeenCalledTimes(0);
@@ -516,7 +524,7 @@ describe('ErrorBoundary', () => {
     });
 
     it('calls `onReset()` when reset', () => {
-      const mockOnReset = jest.fn();
+      const mockOnReset = vi.fn();
       render(
         <TestApp
           onReset={mockOnReset}

diff --git a/packages/react/test/profiler.test.tsx b/packages/react/test/profiler.test.tsx
@@ -1,15 +1,19 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { SentrySpan } from '@sentry/core';
 import type { StartSpanOptions } from '@sentry/core';
 import { render } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
-// biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
 import * as React from 'react';
 
 import { REACT_MOUNT_OP, REACT_RENDER_OP, REACT_UPDATE_OP } from '../src/constants';
 import { UNKNOWN_COMPONENT, useProfiler, withProfiler } from '../src/profiler';
 
-const mockStartInactiveSpan = jest.fn((spanArgs: StartSpanOptions) => ({ ...spanArgs }));
-const mockFinish = jest.fn();
+const mockStartInactiveSpan = vi.fn((spanArgs: StartSpanOptions) => ({ ...spanArgs }));
+const mockFinish = vi.fn();
 
 class MockSpan extends SentrySpan {
   public end(): void {
@@ -19,8 +23,8 @@ class MockSpan extends SentrySpan {
 
 let activeSpan: Record<string, any>;
 
-jest.mock('@sentry/browser', () => ({
-  ...jest.requireActual('@sentry/browser'),
+vi.mock('@sentry/browser', async requireActual => ({
+  ...(await requireActual()),
   getActiveSpan: () => activeSpan,
   startInactiveSpan: (ctx: StartSpanOptions) => {
     mockStartInactiveSpan(ctx);

diff --git a/packages/react/test/reactrouter-descendant-routes.test.tsx b/packages/react/test/reactrouter-descendant-routes.test.tsx
@@ -1,3 +1,8 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import {
   SEMANTIC_ATTRIBUTE_SENTRY_OP,
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
@@ -28,19 +33,19 @@ import {
   wrapUseRoutesV6,
 } from '../src/reactrouterv6';
 
-const mockStartBrowserTracingPageLoadSpan = jest.fn();
-const mockStartBrowserTracingNavigationSpan = jest.fn();
+const mockStartBrowserTracingPageLoadSpan = vi.fn();
+const mockStartBrowserTracingNavigationSpan = vi.fn();
 
 const mockRootSpan = {
-  updateName: jest.fn(),
-  setAttribute: jest.fn(),
+  updateName: vi.fn(),
+  setAttribute: vi.fn(),
   getSpanJSON() {
     return { op: 'pageload' };
   },
 };
 
-jest.mock('@sentry/browser', () => {
-  const actual = jest.requireActual('@sentry/browser');
+vi.mock('@sentry/browser', async requireActual => {
+  const actual = (await requireActual()) as any;
   return {
     ...actual,
     startBrowserTracingNavigationSpan: (...args: unknown[]) => {
@@ -54,10 +59,9 @@ jest.mock('@sentry/browser', () => {
   };
 });
 
-jest.mock('@sentry/core', () => {
-  const actual = jest.requireActual('@sentry/core');
+vi.mock('@sentry/core', async requireActual => {
   return {
-    ...actual,
+    ...(await requireActual()),
     getRootSpan: () => {
       return mockRootSpan;
     },
@@ -75,7 +79,7 @@ describe('React Router Descendant Routes', () => {
   }
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     getCurrentScope().setClient(undefined);
   });
 

diff --git a/packages/react/test/reactrouterv3.test.tsx b/packages/react/test/reactrouterv3.test.tsx
@@ -1,3 +1,8 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { BrowserClient } from '@sentry/browser';
 import {
   SEMANTIC_ATTRIBUTE_SENTRY_OP,
@@ -13,18 +18,18 @@ import * as React from 'react';
 import { IndexRoute, Route, Router, createMemoryHistory, createRoutes, match } from 'react-router-3';
 import { reactRouterV3BrowserTracingIntegration } from '../src/reactrouterv3';
 
-const mockStartBrowserTracingPageLoadSpan = jest.fn();
-const mockStartBrowserTracingNavigationSpan = jest.fn();
+const mockStartBrowserTracingPageLoadSpan = vi.fn();
+const mockStartBrowserTracingNavigationSpan = vi.fn();
 
 const mockRootSpan = {
-  setAttribute: jest.fn(),
+  setAttribute: vi.fn(),
   getSpanJSON() {
     return { op: 'pageload' };
   },
 };
 
-jest.mock('@sentry/browser', () => {
-  const actual = jest.requireActual('@sentry/browser');
+vi.mock('@sentry/browser', async requireActual => {
+  const actual = (await requireActual()) as any;
   return {
     ...actual,
     startBrowserTracingNavigationSpan: (...args: unknown[]) => {
@@ -38,10 +43,9 @@ jest.mock('@sentry/browser', () => {
   };
 });
 
-jest.mock('@sentry/core', () => {
-  const actual = jest.requireActual('@sentry/core');
+vi.mock('@sentry/core', async requireActual => {
   return {
-    ...actual,
+    ...(await requireActual()),
     getRootSpan: () => {
       return mockRootSpan;
     },
@@ -78,7 +82,7 @@ describe('browserTracingReactRouterV3', () => {
   }
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     getCurrentScope().setClient(undefined);
   });
 

diff --git a/packages/react/test/reactrouterv4.test.tsx b/packages/react/test/reactrouterv4.test.tsx
@@ -1,3 +1,8 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import {
   SEMANTIC_ATTRIBUTE_SENTRY_OP,
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
@@ -15,19 +20,19 @@ import { Route, Router, Switch, matchPath } from 'react-router-4';
 import { BrowserClient, reactRouterV4BrowserTracingIntegration, withSentryRouting } from '../src';
 import type { RouteConfig } from '../src/reactrouter';
 
-const mockStartBrowserTracingPageLoadSpan = jest.fn();
-const mockStartBrowserTracingNavigationSpan = jest.fn();
+const mockStartBrowserTracingPageLoadSpan = vi.fn();
+const mockStartBrowserTracingNavigationSpan = vi.fn();
 
 const mockRootSpan = {
-  updateName: jest.fn(),
-  setAttribute: jest.fn(),
+  updateName: vi.fn(),
+  setAttribute: vi.fn(),
   getSpanJSON() {
     return { op: 'pageload' };
   },
 };
 
-jest.mock('@sentry/browser', () => {
-  const actual = jest.requireActual('@sentry/browser');
+vi.mock('@sentry/browser', async requireActual => {
+  const actual = (await requireActual()) as any;
   return {
     ...actual,
     startBrowserTracingNavigationSpan: (...args: unknown[]) => {
@@ -41,10 +46,9 @@ jest.mock('@sentry/browser', () => {
   };
 });
 
-jest.mock('@sentry/core', () => {
-  const actual = jest.requireActual('@sentry/core');
+vi.mock('@sentry/core', async requireActual => {
   return {
-    ...actual,
+    ...(await requireActual()),
     getRootSpan: () => {
       return mockRootSpan;
     },
@@ -62,7 +66,7 @@ describe('browserTracingReactRouterV4', () => {
   }
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     getCurrentScope().setClient(undefined);
   });