Skip to content

Commit f2ef53e

Browse files
AbhiPrasadAbhiPrasad
authored
test(vue): Switch to using vitest (#12955)
Before: `Time: 3.935 s` After: `Duration 1.55s (transform 961ms, setup 0ms, collect 3.56s, tests 127ms, environment 1.73s, prepare 367ms)` If we remove the jsdom based tests it'll probably get even faster.
1 parent 7d7164a commit f2ef53e

File tree

9 files changed

+79
-62
lines changed

9 files changed

+79
-62
lines changed

‎packages/vue/jest.config.js‎

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

‎packages/vue/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@
6666
"clean": "rimraf build coverage sentry-vue-*.tgz",
6767
"fix": "eslint . --format stylish --fix",
6868
"lint": "eslint . --format stylish",
69-
"test": "jest",
70-
"test:watch": "jest --watch",
69+
"test": "vitest run",
70+
"test:watch": "vitest --watch",
7171
"yalc:publish": "yalc publish --push --sig"
7272
},
7373
"volta": {

‎packages/vue/test/errorHandler.test.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { afterEach, describe, expect, test, vi } from 'vitest';
2+
13
import { setCurrentClient } from '@sentry/browser';
24

35
import { attachErrorHandler } from '../src/errorhandler';
@@ -7,7 +9,7 @@ import { generateComponentTrace } from '../src/vendor/components';
79
describe('attachErrorHandler', () => {
810
describe('attachProps', () => {
911
afterEach(() => {
10-
jest.resetAllMocks();
12+
vi.resetAllMocks();
1113
});
1214

1315
describe("given I don't want to `attachProps`", () => {
@@ -325,21 +327,21 @@ const testHarness = ({
325327
enableConsole,
326328
vm,
327329
}: TestHarnessOpts) => {
328-
jest.useFakeTimers();
329-
const providedErrorHandlerSpy = jest.fn();
330-
const warnHandlerSpy = jest.fn();
331-
const consoleErrorSpy = jest.fn();
330+
vi.useFakeTimers();
331+
const providedErrorHandlerSpy = vi.fn();
332+
const warnHandlerSpy = vi.fn();
333+
const consoleErrorSpy = vi.fn();
332334

333335
const client: any = {
334-
captureException: jest.fn(async () => Promise.resolve()),
336+
captureException: vi.fn(async () => Promise.resolve()),
335337
};
336338
setCurrentClient(client);
337339

338340
const app: Vue = {
339341
config: {
340342
silent: !!silent,
341343
},
342-
mixin: jest.fn(),
344+
mixin: vi.fn(),
343345
};
344346

345347
if (enableErrorHandler) {
@@ -380,7 +382,7 @@ const testHarness = ({
380382
app.config.errorHandler(new DummyError(), vm, 'stub-lifecycle-hook');
381383

382384
// and waits for internal timers
383-
jest.runAllTimers();
385+
vi.runAllTimers();
384386
},
385387
expect: {
386388
errorHandlerSpy: expect(providedErrorHandlerSpy),

‎packages/vue/test/integration/VueIntegration.test.ts‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
5+
import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
6+
17
import type { Client } from '@sentry/types';
28
import { logger } from '@sentry/utils';
39
import { createApp } from 'vue';
@@ -15,10 +21,10 @@ describe('Sentry.VueIntegration', () => {
1521
const globalRequest = globalThis.Request;
1622

1723
beforeAll(() => {
18-
globalThis.fetch = jest.fn();
24+
globalThis.fetch = vi.fn();
1925
// @ts-expect-error This is a mock
20-
globalThis.Response = jest.fn();
21-
globalThis.Request = jest.fn();
26+
globalThis.Response = vi.fn();
27+
globalThis.Request = vi.fn();
2228
});
2329

2430
afterAll(() => {
@@ -31,17 +37,17 @@ describe('Sentry.VueIntegration', () => {
3137
warnings = [];
3238
loggerWarnings = [];
3339

34-
jest.spyOn(logger, 'warn').mockImplementation((message: unknown) => {
40+
vi.spyOn(logger, 'warn').mockImplementation((message: unknown) => {
3541
loggerWarnings.push(message);
3642
});
3743

38-
jest.spyOn(console, 'warn').mockImplementation((message: unknown) => {
44+
vi.spyOn(console, 'warn').mockImplementation((message: unknown) => {
3945
warnings.push(message);
4046
});
4147
});
4248

4349
afterEach(() => {
44-
jest.resetAllMocks();
50+
vi.resetAllMocks();
4551
});
4652

4753
it('allows to initialize integration later', () => {

‎packages/vue/test/integration/init.test.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
5+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
6+
17
import { createApp } from 'vue';
28

39
import type { Client } from '@sentry/types';
@@ -11,13 +17,13 @@ describe('Sentry.init', () => {
1117

1218
beforeEach(() => {
1319
warnings = [];
14-
jest.spyOn(console, 'warn').mockImplementation((message: unknown) => {
20+
vi.spyOn(console, 'warn').mockImplementation((message: unknown) => {
1521
warnings.push(message);
1622
});
1723
});
1824

1925
afterEach(() => {
20-
jest.clearAllMocks();
26+
vi.clearAllMocks();
2127
});
2228

2329
it('does not warn when correctly setup (Vue 3)', () => {

‎packages/vue/test/router.test.ts‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { afterEach, describe, expect, it, vi } from 'vitest';
2+
13
import * as SentryBrowser from '@sentry/browser';
24
import * as SentryCore from '@sentry/core';
35
import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
@@ -6,21 +8,21 @@ import type { Span, SpanAttributes } from '@sentry/types';
68
import type { Route } from '../src/router';
79
import { instrumentVueRouter } from '../src/router';
810

9-
const captureExceptionSpy = jest.spyOn(SentryBrowser, 'captureException');
10-
jest.mock('@sentry/core', () => {
11-
const actual = jest.requireActual('@sentry/core');
11+
const captureExceptionSpy = vi.spyOn(SentryBrowser, 'captureException');
12+
vi.mock('@sentry/core', async () => {
13+
const actual = await vi.importActual('@sentry/core');
1214
return {
1315
...actual,
14-
getActiveSpan: jest.fn().mockReturnValue({}),
16+
getActiveSpan: vi.fn().mockReturnValue({}),
1517
};
1618
});
1719

1820
const mockVueRouter = {
19-
onError: jest.fn<void, [(error: Error) => void]>(),
20-
beforeEach: jest.fn<void, [(from: Route, to: Route, next?: () => void) => void]>(),
21+
onError: vi.fn<[(error: Error) => void]>(),
22+
beforeEach: vi.fn<[(from: Route, to: Route, next?: () => void) => void]>(),
2123
};
2224

23-
const mockNext = jest.fn();
25+
const mockNext = vi.fn();
2426

2527
const testRoutes: Record<string, Route> = {
2628
initialPageloadRoute: { matched: [], params: {}, path: '', query: {} },
@@ -68,11 +70,11 @@ const testRoutes: Record<string, Route> = {
6870

6971
describe('instrumentVueRouter()', () => {
7072
afterEach(() => {
71-
jest.clearAllMocks();
73+
vi.clearAllMocks();
7274
});
7375

7476
it('should return instrumentation that instruments VueRouter.onError', () => {
75-
const mockStartSpan = jest.fn();
77+
const mockStartSpan = vi.fn();
7678
instrumentVueRouter(
7779
mockVueRouter,
7880
{ routeLabel: 'name', instrumentPageLoad: true, instrumentNavigation: true },
@@ -99,7 +101,7 @@ describe('instrumentVueRouter()', () => {
99101
])(
100102
'should return instrumentation that instruments VueRouter.beforeEach(%s, %s) for navigations',
101103
(fromKey, toKey, transactionName, transactionSource) => {
102-
const mockStartSpan = jest.fn();
104+
const mockStartSpan = vi.fn();
103105
instrumentVueRouter(
104106
mockVueRouter,
105107
{ routeLabel: 'name', instrumentPageLoad: true, instrumentNavigation: true },
@@ -138,15 +140,15 @@ describe('instrumentVueRouter()', () => {
138140
'should return instrumentation that instruments VueRouter.beforeEach(%s, %s) for pageloads',
139141
(fromKey, toKey, transactionName, transactionSource) => {
140142
const mockRootSpan = {
141-
getSpanJSON: jest.fn().mockReturnValue({ op: 'pageload' }),
142-
updateName: jest.fn(),
143-
setAttribute: jest.fn(),
144-
setAttributes: jest.fn(),
143+
getSpanJSON: vi.fn().mockReturnValue({ op: 'pageload' }),
144+
updateName: vi.fn(),
145+
setAttribute: vi.fn(),
146+
setAttributes: vi.fn(),
145147
};
146148

147-
jest.spyOn(SentryCore, 'getRootSpan').mockImplementation(() => mockRootSpan as unknown as Span);
149+
vi.spyOn(SentryCore, 'getRootSpan').mockImplementation(() => mockRootSpan as unknown as Span);
148150

149-
const mockStartSpan = jest.fn().mockImplementation(_ => {
151+
const mockStartSpan = vi.fn().mockImplementation(_ => {
150152
return mockRootSpan;
151153
});
152154
instrumentVueRouter(
@@ -178,7 +180,7 @@ describe('instrumentVueRouter()', () => {
178180
);
179181

180182
it('allows to configure routeLabel=path', () => {
181-
const mockStartSpan = jest.fn();
183+
const mockStartSpan = vi.fn();
182184
instrumentVueRouter(
183185
mockVueRouter,
184186
{ routeLabel: 'path', instrumentPageLoad: true, instrumentNavigation: true },
@@ -205,7 +207,7 @@ describe('instrumentVueRouter()', () => {
205207
});
206208

207209
it('allows to configure routeLabel=name', () => {
208-
const mockStartSpan = jest.fn();
210+
const mockStartSpan = vi.fn();
209211
instrumentVueRouter(
210212
mockVueRouter,
211213
{ routeLabel: 'name', instrumentPageLoad: true, instrumentNavigation: true },
@@ -233,9 +235,9 @@ describe('instrumentVueRouter()', () => {
233235

234236
it("doesn't overwrite a pageload transaction name it was set to custom before the router resolved the route", () => {
235237
const mockRootSpan = {
236-
updateName: jest.fn(),
237-
setAttribute: jest.fn(),
238-
setAttributes: jest.fn(),
238+
updateName: vi.fn(),
239+
setAttribute: vi.fn(),
240+
setAttributes: vi.fn(),
239241
name: '',
240242
getSpanJSON: () => ({
241243
op: 'pageload',
@@ -244,10 +246,10 @@ describe('instrumentVueRouter()', () => {
244246
},
245247
}),
246248
};
247-
const mockStartSpan = jest.fn().mockImplementation(_ => {
249+
const mockStartSpan = vi.fn().mockImplementation(_ => {
248250
return mockRootSpan;
249251
});
250-
jest.spyOn(SentryCore, 'getRootSpan').mockImplementation(() => mockRootSpan as unknown as Span);
252+
vi.spyOn(SentryCore, 'getRootSpan').mockImplementation(() => mockRootSpan as unknown as Span);
251253

252254
instrumentVueRouter(
253255
mockVueRouter,
@@ -287,14 +289,14 @@ describe('instrumentVueRouter()', () => {
287289
});
288290

289291
it("updates the scope's `transactionName` when a route is resolved", () => {
290-
const mockStartSpan = jest.fn().mockImplementation(_ => {
292+
const mockStartSpan = vi.fn().mockImplementation(_ => {
291293
return {};
292294
});
293295

294-
const scopeSetTransactionNameSpy = jest.fn();
296+
const scopeSetTransactionNameSpy = vi.fn();
295297

296298
// @ts-expect-error - only creating a partial scope but that's fine
297-
jest.spyOn(SentryCore, 'getCurrentScope').mockImplementation(() => ({
299+
vi.spyOn(SentryCore, 'getCurrentScope').mockImplementation(() => ({
298300
setTransactionName: scopeSetTransactionNameSpy,
299301
}));
300302

@@ -315,17 +317,17 @@ describe('instrumentVueRouter()', () => {
315317
expect(scopeSetTransactionNameSpy).toHaveBeenCalledWith('/books/:bookId/chapter/:chapterId');
316318
});
317319

318-
test.each([
320+
it.each([
319321
[false, 0],
320322
[true, 1],
321323
])(
322324
'should return instrumentation that considers the instrumentPageLoad = %p',
323325
(instrumentPageLoad, expectedCallsAmount) => {
324326
const mockRootSpan = {
325-
updateName: jest.fn(),
326-
setData: jest.fn(),
327-
setAttribute: jest.fn(),
328-
setAttributes: jest.fn(),
327+
updateName: vi.fn(),
328+
setData: vi.fn(),
329+
setAttribute: vi.fn(),
330+
setAttributes: vi.fn(),
329331
name: '',
330332
getSpanJSON: () => ({
331333
op: 'pageload',
@@ -334,9 +336,9 @@ describe('instrumentVueRouter()', () => {
334336
},
335337
}),
336338
};
337-
jest.spyOn(SentryCore, 'getRootSpan').mockImplementation(() => mockRootSpan as unknown as Span);
339+
vi.spyOn(SentryCore, 'getRootSpan').mockImplementation(() => mockRootSpan as unknown as Span);
338340

339-
const mockStartSpan = jest.fn();
341+
const mockStartSpan = vi.fn();
340342
instrumentVueRouter(
341343
mockVueRouter,
342344
{ routeLabel: 'name', instrumentPageLoad, instrumentNavigation: true },
@@ -354,13 +356,13 @@ describe('instrumentVueRouter()', () => {
354356
},
355357
);
356358

357-
test.each([
359+
it.each([
358360
[false, 0],
359361
[true, 1],
360362
])(
361363
'should return instrumentation that considers the instrumentNavigation = %p',
362364
(instrumentNavigation, expectedCallsAmount) => {
363-
const mockStartSpan = jest.fn();
365+
const mockStartSpan = vi.fn();
364366
instrumentVueRouter(
365367
mockVueRouter,
366368
{ routeLabel: 'name', instrumentPageLoad: true, instrumentNavigation },
@@ -378,7 +380,7 @@ describe('instrumentVueRouter()', () => {
378380
);
379381

380382
it("doesn't throw when `next` is not available in the beforeEach callback (Vue Router 4)", () => {
381-
const mockStartSpan = jest.fn();
383+
const mockStartSpan = vi.fn();
382384
instrumentVueRouter(
383385
mockVueRouter,
384386
{ routeLabel: 'path', instrumentPageLoad: true, instrumentNavigation: true },

‎packages/vue/test/vendor/components.test.ts‎

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

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

‎packages/vue/tsconfig.test.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"extends": "./tsconfig.json",
33

4-
"include": ["test/**/*"],
4+
"include": ["test/**/*", "vite.config.ts"],
55

66
"compilerOptions": {
77
// should include all types from `./tsconfig.json` plus types for all test frameworks used
8-
"types": ["jest"]
8+
"types": []
99

1010
// other package-specific, test-specific options
1111
}

‎packages/vue/vite.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import baseConfig from '../../vite/vite.config';
2+
3+
export default {
4+
...baseConfig,
5+
};

0 commit comments

Comments
 (0)