Skip to content

Commit f4acf9d

Browse files
AbhiPrasadAbhiPrasad
authored
test(react): Migrate to vitest (#15492)
Before: `7.549 s` After: `Duration 3.10s (transform 2.32s, setup 0ms, collect 13.39s, tests 599ms, environment 4.11s, prepare 945ms)`
1 parent a6bf3e6 commit f4acf9d

15 files changed

+146
-113
lines changed

‎packages/react/jest.config.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎packages/react/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@
8585
"clean": "rimraf build coverage sentry-react-*.tgz",
8686
"fix": "eslint . --format stylish --fix",
8787
"lint": "eslint . --format stylish",
88-
"test": "jest",
89-
"test:watch": "jest --watch",
88+
"test": "vitest run",
89+
"test:watch": "vitest --watch",
9090
"yalc:publish": "yalc publish --push --sig"
9191
},
9292
"volta": {

‎packages/react/test/error.test.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { describe, expect, test } from 'vitest';
2+
13
import { isAtLeastReact17 } from '../src/error';
24

35
describe('isAtLeastReact17', () => {

‎packages/react/test/errorboundary.test.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
import { afterEach, describe, expect, it, vi } from 'vitest';
5+
16
import { Scope, getClient, setCurrentClient } from '@sentry/browser';
27
import type { Client } from '@sentry/core';
38
import { fireEvent, render, screen } from '@testing-library/react';
@@ -7,15 +12,14 @@ import { useState } from 'react';
712
import type { ErrorBoundaryProps, FallbackRender } from '../src/errorboundary';
813
import { ErrorBoundary, UNKNOWN_COMPONENT, withErrorBoundary } from '../src/errorboundary';
914

10-
const mockCaptureException = jest.fn();
11-
const mockShowReportDialog = jest.fn();
12-
const mockClientOn = jest.fn();
15+
const mockCaptureException = vi.fn();
16+
const mockShowReportDialog = vi.fn();
17+
const mockClientOn = vi.fn();
1318
const EVENT_ID = 'test-id-123';
1419

15-
jest.mock('@sentry/browser', () => {
16-
const actual = jest.requireActual('@sentry/browser');
20+
vi.mock('@sentry/browser', async requireActual => {
1721
return {
18-
...actual,
22+
...(await requireActual()),
1923
captureException: (...args: unknown[]) => {
2024
mockCaptureException(...args);
2125
return EVENT_ID;
@@ -92,7 +96,7 @@ describe('withErrorBoundary', () => {
9296
});
9397

9498
describe('ErrorBoundary', () => {
95-
jest.spyOn(console, 'error').mockImplementation();
99+
vi.spyOn(console, 'error').mockImplementation(() => {});
96100

97101
afterEach(() => {
98102
mockCaptureException.mockClear();
@@ -141,7 +145,7 @@ describe('ErrorBoundary', () => {
141145
});
142146

143147
it('calls `onMount` when mounted', () => {
144-
const mockOnMount = jest.fn();
148+
const mockOnMount = vi.fn();
145149
render(
146150
<ErrorBoundary fallback={<h1>Error Component</h1>} onMount={mockOnMount}>
147151
<h1>children</h1>
@@ -152,7 +156,7 @@ describe('ErrorBoundary', () => {
152156
});
153157

154158
it('calls `onUnmount` when unmounted', () => {
155-
const mockOnUnmount = jest.fn();
159+
const mockOnUnmount = vi.fn();
156160
const { unmount } = render(
157161
<ErrorBoundary fallback={<h1>Error Component</h1>} onUnmount={mockOnUnmount}>
158162
<h1>children</h1>
@@ -243,7 +247,7 @@ describe('ErrorBoundary', () => {
243247

244248
describe('error', () => {
245249
it('calls `componentDidCatch() when an error occurs`', () => {
246-
const mockOnError = jest.fn();
250+
const mockOnError = vi.fn();
247251
render(
248252
<TestApp fallback={<p>You have hit an error</p>} onError={mockOnError}>
249253
<h1>children</h1>
@@ -267,12 +271,14 @@ describe('ErrorBoundary', () => {
267271
mechanism: { handled: true },
268272
});
269273

270-
expect(mockOnError.mock.calls[0][0]).toEqual(mockCaptureException.mock.calls[0][0]);
274+
expect(mockOnError.mock.calls[0]?.[0]).toEqual(mockCaptureException.mock.calls[0]?.[0]);
271275

272276
// Check if error.cause -> react component stack
273-
const error = mockCaptureException.mock.calls[0][0];
277+
const error = mockCaptureException.mock.calls[0]?.[0];
274278
const cause = error.cause;
275-
expect(cause.stack).toEqual(mockCaptureException.mock.calls[0][1]?.captureContext.contexts.react.componentStack);
279+
expect(cause.stack).toEqual(
280+
mockCaptureException.mock.calls[0]?.[1]?.captureContext.contexts.react.componentStack,
281+
);
276282
expect(cause.name).toContain('React ErrorBoundary');
277283
expect(cause.message).toEqual(error.message);
278284
});
@@ -326,12 +332,12 @@ describe('ErrorBoundary', () => {
326332
});
327333

328334
// Check if error.cause -> react component stack
329-
const error = mockCaptureException.mock.calls[0][0];
335+
const error = mockCaptureException.mock.calls[0]?.[0];
330336
expect(error.cause).not.toBeDefined();
331337
});
332338

333339
it('handles when `error.cause` is nested', () => {
334-
const mockOnError = jest.fn();
340+
const mockOnError = vi.fn();
335341

336342
function CustomBam(): JSX.Element {
337343
const firstError = new Error('bam');
@@ -364,19 +370,21 @@ describe('ErrorBoundary', () => {
364370
mechanism: { handled: true },
365371
});
366372

367-
expect(mockOnError.mock.calls[0][0]).toEqual(mockCaptureException.mock.calls[0][0]);
373+
expect(mockOnError.mock.calls[0]?.[0]).toEqual(mockCaptureException.mock.calls[0]?.[0]);
368374

369-
const thirdError = mockCaptureException.mock.calls[0][0];
375+
const thirdError = mockCaptureException.mock.calls[0]?.[0];
370376
const secondError = thirdError.cause;
371377
const firstError = secondError.cause;
372378
const cause = firstError.cause;
373-
expect(cause.stack).toEqual(mockCaptureException.mock.calls[0][1]?.captureContext.contexts.react.componentStack);
379+
expect(cause.stack).toEqual(
380+
mockCaptureException.mock.calls[0]?.[1]?.captureContext.contexts.react.componentStack,
381+
);
374382
expect(cause.name).toContain('React ErrorBoundary');
375383
expect(cause.message).toEqual(thirdError.message);
376384
});
377385

378386
it('handles when `error.cause` is recursive', () => {
379-
const mockOnError = jest.fn();
387+
const mockOnError = vi.fn();
380388

381389
function CustomBam(): JSX.Element {
382390
const firstError = new Error('bam');
@@ -408,19 +416,19 @@ describe('ErrorBoundary', () => {
408416
mechanism: { handled: true },
409417
});
410418

411-
expect(mockOnError.mock.calls[0][0]).toEqual(mockCaptureException.mock.calls[0][0]);
419+
expect(mockOnError.mock.calls[0]?.[0]).toEqual(mockCaptureException.mock.calls[0]?.[0]);
412420

413-
const error = mockCaptureException.mock.calls[0][0];
421+
const error = mockCaptureException.mock.calls[0]?.[0];
414422
const cause = error.cause;
415423
// We need to make sure that recursive error.cause does not cause infinite loop
416424
expect(cause.stack).not.toEqual(
417-
mockCaptureException.mock.calls[0][1]?.captureContext.contexts.react.componentStack,
425+
mockCaptureException.mock.calls[0]?.[1]?.captureContext.contexts.react.componentStack,
418426
);
419427
expect(cause.name).not.toContain('React ErrorBoundary');
420428
});
421429

422430
it('calls `beforeCapture()` when an error occurs', () => {
423-
const mockBeforeCapture = jest.fn();
431+
const mockBeforeCapture = vi.fn();
424432

425433
const testBeforeCapture = (...args: any[]) => {
426434
expect(mockCaptureException).toHaveBeenCalledTimes(0);
@@ -516,7 +524,7 @@ describe('ErrorBoundary', () => {
516524
});
517525

518526
it('calls `onReset()` when reset', () => {
519-
const mockOnReset = jest.fn();
527+
const mockOnReset = vi.fn();
520528
render(
521529
<TestApp
522530
onReset={mockOnReset}

‎packages/react/test/profiler.test.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
import { beforeEach, describe, expect, it, vi } from 'vitest';
5+
16
import { SentrySpan } from '@sentry/core';
27
import type { StartSpanOptions } from '@sentry/core';
38
import { render } from '@testing-library/react';
49
import { renderHook } from '@testing-library/react-hooks';
5-
// biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
610
import * as React from 'react';
711

812
import { REACT_MOUNT_OP, REACT_RENDER_OP, REACT_UPDATE_OP } from '../src/constants';
913
import { UNKNOWN_COMPONENT, useProfiler, withProfiler } from '../src/profiler';
1014

11-
const mockStartInactiveSpan = jest.fn((spanArgs: StartSpanOptions) => ({ ...spanArgs }));
12-
const mockFinish = jest.fn();
15+
const mockStartInactiveSpan = vi.fn((spanArgs: StartSpanOptions) => ({ ...spanArgs }));
16+
const mockFinish = vi.fn();
1317

1418
class MockSpan extends SentrySpan {
1519
public end(): void {
@@ -19,8 +23,8 @@ class MockSpan extends SentrySpan {
1923

2024
let activeSpan: Record<string, any>;
2125

22-
jest.mock('@sentry/browser', () => ({
23-
...jest.requireActual('@sentry/browser'),
26+
vi.mock('@sentry/browser', async requireActual => ({
27+
...(await requireActual()),
2428
getActiveSpan: () => activeSpan,
2529
startInactiveSpan: (ctx: StartSpanOptions) => {
2630
mockStartInactiveSpan(ctx);

‎packages/react/test/reactrouter-descendant-routes.test.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
import { beforeEach, describe, expect, it, vi } from 'vitest';
5+
16
import {
27
SEMANTIC_ATTRIBUTE_SENTRY_OP,
38
SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
@@ -28,19 +33,19 @@ import {
2833
wrapUseRoutesV6,
2934
} from '../src/reactrouterv6';
3035

31-
const mockStartBrowserTracingPageLoadSpan = jest.fn();
32-
const mockStartBrowserTracingNavigationSpan = jest.fn();
36+
const mockStartBrowserTracingPageLoadSpan = vi.fn();
37+
const mockStartBrowserTracingNavigationSpan = vi.fn();
3338

3439
const mockRootSpan = {
35-
updateName: jest.fn(),
36-
setAttribute: jest.fn(),
40+
updateName: vi.fn(),
41+
setAttribute: vi.fn(),
3742
getSpanJSON() {
3843
return { op: 'pageload' };
3944
},
4045
};
4146

42-
jest.mock('@sentry/browser', () => {
43-
const actual = jest.requireActual('@sentry/browser');
47+
vi.mock('@sentry/browser', async requireActual => {
48+
const actual = (await requireActual()) as any;
4449
return {
4550
...actual,
4651
startBrowserTracingNavigationSpan: (...args: unknown[]) => {
@@ -54,10 +59,9 @@ jest.mock('@sentry/browser', () => {
5459
};
5560
});
5661

57-
jest.mock('@sentry/core', () => {
58-
const actual = jest.requireActual('@sentry/core');
62+
vi.mock('@sentry/core', async requireActual => {
5963
return {
60-
...actual,
64+
...(await requireActual()),
6165
getRootSpan: () => {
6266
return mockRootSpan;
6367
},
@@ -75,7 +79,7 @@ describe('React Router Descendant Routes', () => {
7579
}
7680

7781
beforeEach(() => {
78-
jest.clearAllMocks();
82+
vi.clearAllMocks();
7983
getCurrentScope().setClient(undefined);
8084
});
8185

‎packages/react/test/reactrouterv3.test.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
import { beforeEach, describe, expect, it, vi } from 'vitest';
5+
16
import { BrowserClient } from '@sentry/browser';
27
import {
38
SEMANTIC_ATTRIBUTE_SENTRY_OP,
@@ -13,18 +18,18 @@ import * as React from 'react';
1318
import { IndexRoute, Route, Router, createMemoryHistory, createRoutes, match } from 'react-router-3';
1419
import { reactRouterV3BrowserTracingIntegration } from '../src/reactrouterv3';
1520

16-
const mockStartBrowserTracingPageLoadSpan = jest.fn();
17-
const mockStartBrowserTracingNavigationSpan = jest.fn();
21+
const mockStartBrowserTracingPageLoadSpan = vi.fn();
22+
const mockStartBrowserTracingNavigationSpan = vi.fn();
1823

1924
const mockRootSpan = {
20-
setAttribute: jest.fn(),
25+
setAttribute: vi.fn(),
2126
getSpanJSON() {
2227
return { op: 'pageload' };
2328
},
2429
};
2530

26-
jest.mock('@sentry/browser', () => {
27-
const actual = jest.requireActual('@sentry/browser');
31+
vi.mock('@sentry/browser', async requireActual => {
32+
const actual = (await requireActual()) as any;
2833
return {
2934
...actual,
3035
startBrowserTracingNavigationSpan: (...args: unknown[]) => {
@@ -38,10 +43,9 @@ jest.mock('@sentry/browser', () => {
3843
};
3944
});
4045

41-
jest.mock('@sentry/core', () => {
42-
const actual = jest.requireActual('@sentry/core');
46+
vi.mock('@sentry/core', async requireActual => {
4347
return {
44-
...actual,
48+
...(await requireActual()),
4549
getRootSpan: () => {
4650
return mockRootSpan;
4751
},
@@ -78,7 +82,7 @@ describe('browserTracingReactRouterV3', () => {
7882
}
7983

8084
beforeEach(() => {
81-
jest.clearAllMocks();
85+
vi.clearAllMocks();
8286
getCurrentScope().setClient(undefined);
8387
});
8488

‎packages/react/test/reactrouterv4.test.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
import { beforeEach, describe, expect, it, vi } from 'vitest';
5+
16
import {
27
SEMANTIC_ATTRIBUTE_SENTRY_OP,
38
SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
@@ -15,19 +20,19 @@ import { Route, Router, Switch, matchPath } from 'react-router-4';
1520
import { BrowserClient, reactRouterV4BrowserTracingIntegration, withSentryRouting } from '../src';
1621
import type { RouteConfig } from '../src/reactrouter';
1722

18-
const mockStartBrowserTracingPageLoadSpan = jest.fn();
19-
const mockStartBrowserTracingNavigationSpan = jest.fn();
23+
const mockStartBrowserTracingPageLoadSpan = vi.fn();
24+
const mockStartBrowserTracingNavigationSpan = vi.fn();
2025

2126
const mockRootSpan = {
22-
updateName: jest.fn(),
23-
setAttribute: jest.fn(),
27+
updateName: vi.fn(),
28+
setAttribute: vi.fn(),
2429
getSpanJSON() {
2530
return { op: 'pageload' };
2631
},
2732
};
2833

29-
jest.mock('@sentry/browser', () => {
30-
const actual = jest.requireActual('@sentry/browser');
34+
vi.mock('@sentry/browser', async requireActual => {
35+
const actual = (await requireActual()) as any;
3136
return {
3237
...actual,
3338
startBrowserTracingNavigationSpan: (...args: unknown[]) => {
@@ -41,10 +46,9 @@ jest.mock('@sentry/browser', () => {
4146
};
4247
});
4348

44-
jest.mock('@sentry/core', () => {
45-
const actual = jest.requireActual('@sentry/core');
49+
vi.mock('@sentry/core', async requireActual => {
4650
return {
47-
...actual,
51+
...(await requireActual()),
4852
getRootSpan: () => {
4953
return mockRootSpan;
5054
},
@@ -62,7 +66,7 @@ describe('browserTracingReactRouterV4', () => {
6266
}
6367

6468
beforeEach(() => {
65-
jest.clearAllMocks();
69+
vi.clearAllMocks();
6670
getCurrentScope().setClient(undefined);
6771
});
6872

0 commit comments

Comments
 (0)