Skip to content

Commit 3c7e220

Browse files
authored
test(svelte): Switch to explicit vitest imports (#13026)
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 Svelte SDK tests to do so. ref #11084 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 server tests are not polluted with jsdom globals, and that future writers have to explicitly opt-in to the behaviour. I was also getting some ts errors in the tests, so addressed those as well.
1 parent ea07ec7 commit 3c7e220

File tree

6 files changed

+29
-18
lines changed

6 files changed

+29
-18
lines changed

packages/svelte/test/config.test.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { describe, expect, it } from 'vitest';
2+
13
import { withSentryConfig } from '../src/config';
24
import { FIRST_PASS_COMPONENT_TRACKING_PREPROC_ID, componentTrackingPreprocessor } from '../src/preprocessors';
35
import type { SentryPreprocessorGroup, SentrySvelteConfigOptions, SvelteConfig } from '../src/types';

packages/svelte/test/performance.test.ts

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
5+
import { beforeEach, describe, expect, it, vi } from 'vitest';
6+
17
import { act, render } from '@testing-library/svelte';
28
import { getClient, getCurrentScope, getIsolationScope, init, startSpan } from '../src';
39

410
import type { TransactionEvent } from '@sentry/types';
5-
import { vi } from 'vitest';
6-
// linter doesn't like Svelte component imports
11+
12+
// @ts-expect-error svelte import
713
import DummyComponent from './components/Dummy.svelte';
814

915
const PUBLIC_DSN = 'https://username@domain/123';
@@ -40,7 +46,7 @@ describe('Sentry.trackComponent()', () => {
4046
await getClient()?.flush();
4147

4248
expect(transactions).toHaveLength(1);
43-
const transaction = transactions[0];
49+
const transaction = transactions[0]!;
4450
expect(transaction.spans).toHaveLength(2);
4551

4652
const rootSpanId = transaction.contexts?.trace?.span_id;
@@ -95,7 +101,7 @@ describe('Sentry.trackComponent()', () => {
95101
await getClient()?.flush();
96102

97103
expect(transactions).toHaveLength(1);
98-
const transaction = transactions[0];
104+
const transaction = transactions[0]!;
99105
expect(transaction.spans).toHaveLength(3);
100106

101107
const rootSpanId = transaction.contexts?.trace?.span_id;
@@ -159,7 +165,7 @@ describe('Sentry.trackComponent()', () => {
159165
await getClient()?.flush();
160166

161167
expect(transactions).toHaveLength(1);
162-
const transaction = transactions[0];
168+
const transaction = transactions[0]!;
163169
expect(transaction.spans).toHaveLength(1);
164170

165171
expect(transaction.spans![0]?.op).toEqual('ui.svelte.init');
@@ -175,7 +181,7 @@ describe('Sentry.trackComponent()', () => {
175181
await getClient()?.flush();
176182

177183
expect(transactions).toHaveLength(1);
178-
const transaction = transactions[0];
184+
const transaction = transactions[0]!;
179185
expect(transaction.spans).toHaveLength(1);
180186

181187
expect(transaction.spans![0]?.op).toEqual('ui.svelte.update');
@@ -191,7 +197,7 @@ describe('Sentry.trackComponent()', () => {
191197
await getClient()?.flush();
192198

193199
expect(transactions).toHaveLength(1);
194-
const transaction = transactions[0];
200+
const transaction = transactions[0]!;
195201
expect(transaction.spans).toHaveLength(0);
196202
});
197203

@@ -207,7 +213,7 @@ describe('Sentry.trackComponent()', () => {
207213
await getClient()?.flush();
208214

209215
expect(transactions).toHaveLength(1);
210-
const transaction = transactions[0];
216+
const transaction = transactions[0]!;
211217
expect(transaction.spans).toHaveLength(2);
212218

213219
expect(transaction.spans![0]?.description).toEqual('<CustomComponentName>');
@@ -238,7 +244,7 @@ describe('Sentry.trackComponent()', () => {
238244
await getClient()?.flush();
239245

240246
expect(transactions).toHaveLength(1);
241-
const transaction = transactions[0];
247+
const transaction = transactions[0]!;
242248

243249
// One update span is triggered by the initial rendering, but the second one is not captured
244250
expect(transaction.spans).toHaveLength(2);

packages/svelte/test/preprocessors.test.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { describe, expect, it } from 'vitest';
2+
13
import * as svelteCompiler from 'svelte/compiler';
24

35
import {
@@ -117,9 +119,9 @@ describe('componentTrackingPreprocessor', () => {
117119
return { ...cmp, newCode: res.code, map: res.map };
118120
});
119121

120-
expect(cmp2.newCode).toEqual(cmp2.originalCode);
122+
expect(cmp2?.newCode).toEqual(cmp2?.originalCode);
121123

122-
expectComponentCodeToBeModified([cmp1, cmp3], { trackInit: true, trackUpdates: true });
124+
expectComponentCodeToBeModified([cmp1!, cmp3!], { trackInit: true, trackUpdates: true });
123125
});
124126

125127
it('doesnt inject the function call to the same component more than once', () => {
@@ -155,8 +157,8 @@ describe('componentTrackingPreprocessor', () => {
155157
return { ...cmp, newCode: res.code, map: res.map };
156158
});
157159

158-
expectComponentCodeToBeModified([cmp11, cmp2], { trackInit: true, trackUpdates: true });
159-
expect(cmp12.newCode).toEqual(cmp12.originalCode);
160+
expectComponentCodeToBeModified([cmp11!, cmp2!], { trackInit: true, trackUpdates: true });
161+
expect(cmp12!.newCode).toEqual(cmp12!.originalCode);
160162
});
161163

162164
it('doesnt inject the function call to a module context script block', () => {

packages/svelte/test/sdk.test.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
5+
import { beforeEach, describe, expect, it, vi } from 'vitest';
6+
17
import { SDK_VERSION } from '@sentry/browser';
28
import * as SentryBrowser from '@sentry/browser';
39
import type { EventProcessor } from '@sentry/types';
410

5-
import { vi } from 'vitest';
611
import { detectAndReportSvelteKit, init as svelteInit, isSvelteKitApp } from '../src/sdk';
712

813
let passedEventProcessor: EventProcessor | undefined;

packages/svelte/tsconfig.test.json

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@
44
"include": ["test/**/*", "vite.config.ts"],
55

66
"compilerOptions": {
7-
// should include all types from `./tsconfig.json` plus types for all test frameworks used
8-
"types": ["vitest/globals"]
9-
107
// other package-specific, test-specific options
118
}
129
}

packages/svelte/vite.config.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export default {
66
plugins: [svelte({ hot: !process.env.VITEST })],
77
test: {
88
...baseConfig.test,
9-
environment: 'jsdom',
109
alias: [{ find: /^svelte$/, replacement: 'svelte/internal' }],
1110
},
1211
};

0 commit comments

Comments
 (0)