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.

Author: AbhiPrasad

packages/svelte/test/config.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { withSentryConfig } from '../src/config';
 import { FIRST_PASS_COMPONENT_TRACKING_PREPROC_ID, componentTrackingPreprocessor } from '../src/preprocessors';
 import type { SentryPreprocessorGroup, SentrySvelteConfigOptions, SvelteConfig } from '../src/types';

packages/svelte/test/performance.test.ts

@@ -1,9 +1,15 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { act, render } from '@testing-library/svelte';
 import { getClient, getCurrentScope, getIsolationScope, init, startSpan } from '../src';
 
 import type { TransactionEvent } from '@sentry/types';
-import { vi } from 'vitest';
-// linter doesn't like Svelte component imports
+
+// @ts-expect-error svelte import
 import DummyComponent from './components/Dummy.svelte';
 
 const PUBLIC_DSN = 'https://username@domain/123';
@@ -40,7 +46,7 @@ describe('Sentry.trackComponent()', () => {
     await getClient()?.flush();
 
     expect(transactions).toHaveLength(1);
-    const transaction = transactions[0];
+    const transaction = transactions[0]!;
     expect(transaction.spans).toHaveLength(2);
 
     const rootSpanId = transaction.contexts?.trace?.span_id;
@@ -95,7 +101,7 @@ describe('Sentry.trackComponent()', () => {
     await getClient()?.flush();
 
     expect(transactions).toHaveLength(1);
-    const transaction = transactions[0];
+    const transaction = transactions[0]!;
     expect(transaction.spans).toHaveLength(3);
 
     const rootSpanId = transaction.contexts?.trace?.span_id;
@@ -159,7 +165,7 @@ describe('Sentry.trackComponent()', () => {
     await getClient()?.flush();
 
     expect(transactions).toHaveLength(1);
-    const transaction = transactions[0];
+    const transaction = transactions[0]!;
     expect(transaction.spans).toHaveLength(1);
 
     expect(transaction.spans![0]?.op).toEqual('ui.svelte.init');
@@ -175,7 +181,7 @@ describe('Sentry.trackComponent()', () => {
     await getClient()?.flush();
 
     expect(transactions).toHaveLength(1);
-    const transaction = transactions[0];
+    const transaction = transactions[0]!;
     expect(transaction.spans).toHaveLength(1);
 
     expect(transaction.spans![0]?.op).toEqual('ui.svelte.update');
@@ -191,7 +197,7 @@ describe('Sentry.trackComponent()', () => {
     await getClient()?.flush();
 
     expect(transactions).toHaveLength(1);
-    const transaction = transactions[0];
+    const transaction = transactions[0]!;
     expect(transaction.spans).toHaveLength(0);
   });
 
@@ -207,7 +213,7 @@ describe('Sentry.trackComponent()', () => {
     await getClient()?.flush();
 
     expect(transactions).toHaveLength(1);
-    const transaction = transactions[0];
+    const transaction = transactions[0]!;
     expect(transaction.spans).toHaveLength(2);
 
     expect(transaction.spans![0]?.description).toEqual('<CustomComponentName>');
@@ -238,7 +244,7 @@ describe('Sentry.trackComponent()', () => {
     await getClient()?.flush();
 
     expect(transactions).toHaveLength(1);
-    const transaction = transactions[0];
+    const transaction = transactions[0]!;
 
     // One update span is triggered by the initial rendering, but the second one is not captured
     expect(transaction.spans).toHaveLength(2);

packages/svelte/test/preprocessors.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import * as svelteCompiler from 'svelte/compiler';
 
 import {
@@ -117,9 +119,9 @@ describe('componentTrackingPreprocessor', () => {
         return { ...cmp, newCode: res.code, map: res.map };
       });
 
-      expect(cmp2.newCode).toEqual(cmp2.originalCode);
+      expect(cmp2?.newCode).toEqual(cmp2?.originalCode);
 
-      expectComponentCodeToBeModified([cmp1, cmp3], { trackInit: true, trackUpdates: true });
+      expectComponentCodeToBeModified([cmp1!, cmp3!], { trackInit: true, trackUpdates: true });
     });
 
     it('doesnt inject the function call to the same component more than once', () => {
@@ -155,8 +157,8 @@ describe('componentTrackingPreprocessor', () => {
         return { ...cmp, newCode: res.code, map: res.map };
       });
 
-      expectComponentCodeToBeModified([cmp11, cmp2], { trackInit: true, trackUpdates: true });
-      expect(cmp12.newCode).toEqual(cmp12.originalCode);
+      expectComponentCodeToBeModified([cmp11!, cmp2!], { trackInit: true, trackUpdates: true });
+      expect(cmp12!.newCode).toEqual(cmp12!.originalCode);
     });
 
     it('doesnt inject the function call to a module context script block', () => {

packages/svelte/test/sdk.test.ts

@@ -1,8 +1,13 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { SDK_VERSION } from '@sentry/browser';
 import * as SentryBrowser from '@sentry/browser';
 import type { EventProcessor } from '@sentry/types';
 
-import { vi } from 'vitest';
 import { detectAndReportSvelteKit, init as svelteInit, isSvelteKitApp } from '../src/sdk';
 
 let passedEventProcessor: EventProcessor | undefined;

packages/svelte/tsconfig.test.json

@@ -4,9 +4,6 @@
   "include": ["test/**/*", "vite.config.ts"],
 
   "compilerOptions": {
-    // should include all types from `./tsconfig.json` plus types for all test frameworks used
-    "types": ["vitest/globals"]
-
     // other package-specific, test-specific options
   }
 }

packages/svelte/vite.config.ts

@@ -6,7 +6,6 @@ export default {
   plugins: [svelte({ hot: !process.env.VITEST })],
   test: {
     ...baseConfig.test,
-    environment: 'jsdom',
     alias: [{ find: /^svelte$/, replacement: 'svelte/internal' }],
   },
 };