test(nextjs): Migrate to Vitest (#15546)

- Ref #11084

`constructWebpackConfig.test.ts` still has test failures. The mocks
don't appear to be working or other strange behaviour.

---------

Co-authored-by: Charly Gomez <[email protected]>

Author: timfish

packages/nextjs/jest.config.js

@@ -117,8 +117,8 @@
     "lint": "eslint . --format stylish",
     "test": "yarn test:unit",
     "test:all": "run-s test:unit",
-    "test:unit": "jest",
-    "test:watch": "jest --watch",
+    "test:unit": "vitest run",
+    "test:watch": "vitest --watch",
     "vercel:branch": "source vercel/set-up-branch-for-test-app-use.sh",
     "vercel:project": "source vercel/make-project-use-current-branch.sh",
     "yalc:publish": "yalc publish --push --sig"

packages/nextjs/package.json

@@ -4,11 +4,12 @@ import type { Integration } from '@sentry/core';
 import * as SentryReact from '@sentry/react';
 import { WINDOW, getClient, getCurrentScope } from '@sentry/react';
 import { JSDOM } from 'jsdom';
+import { describe, vi, afterAll, afterEach, it, expect } from 'vitest';
 
 import { breadcrumbsIntegration, browserTracingIntegration, init } from '../src/client';
 
-const reactInit = jest.spyOn(SentryReact, 'init');
-const loggerLogSpy = jest.spyOn(logger, 'log');
+const reactInit = vi.spyOn(SentryReact, 'init');
+const loggerLogSpy = vi.spyOn(logger, 'log');
 
 // We're setting up JSDom here because the Next.js routing instrumentations requires a few things to be present on pageload:
 // 1. Access to window.document API for `window.document.getElementById`
@@ -38,7 +39,7 @@ const TEST_DSN = 'https://[email protected]/1337';
 
 describe('Client init()', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 
     getGlobalScope().clear();
     getIsolationScope().clear();
@@ -83,7 +84,7 @@ describe('Client init()', () => {
       dsn: 'https://[email protected]/12312012',
       tracesSampleRate: 1.0,
     });
-    const transportSend = jest.spyOn(getClient()!.getTransport()!, 'send');
+    const transportSend = vi.spyOn(getClient()!.getTransport()!, 'send');
 
     // Ensure we have no current span, so our next span is a transaction
     SentryReact.withActiveSpan(null, () => {

packages/nextjs/test/clientSdk.test.ts

@@ -1,16 +1,16 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`valueInjectionLoader should correctly insert values for basic config 1`] = `
+exports[`valueInjectionLoader > should correctly insert values for basic config 1`] = `
 "
-      ;globalThis[\\"foo\\"] = \\"bar\\";import * as Sentry from '@sentry/nextjs';
+      ;globalThis["foo"] = "bar";import * as Sentry from '@sentry/nextjs';
       Sentry.init();
     "
 `;
 
-exports[`valueInjectionLoader should correctly insert values with a misplaced directive 1`] = `
+exports[`valueInjectionLoader > should correctly insert values with a misplaced directive 1`] = `
 "
-      ;globalThis[\\"foo\\"] = \\"bar\\";console.log('This will render the directive useless');
-      \\"use client\\";
+      ;globalThis["foo"] = "bar";console.log('This will render the directive useless');
+      "use client";
 
 
 
@@ -19,44 +19,44 @@ exports[`valueInjectionLoader should correctly insert values with a misplaced di
     "
 `;
 
-exports[`valueInjectionLoader should correctly insert values with directive 1`] = `
+exports[`valueInjectionLoader > should correctly insert values with directive 1`] = `
 "
-      \\"use client\\";globalThis[\\"foo\\"] = \\"bar\\";
+      "use client";globalThis["foo"] = "bar";
       import * as Sentry from '@sentry/nextjs';
       Sentry.init();
     "
 `;
 
-exports[`valueInjectionLoader should correctly insert values with directive and block comments 1`] = `
+exports[`valueInjectionLoader > should correctly insert values with directive and block comments 1`] = `
 "
       /* test */
-      \\"use client\\";;globalThis[\\"foo\\"] = \\"bar\\";
+      "use client";;globalThis["foo"] = "bar";
       import * as Sentry from '@sentry/nextjs';
       Sentry.init();
     "
 `;
 
-exports[`valueInjectionLoader should correctly insert values with directive and inline comments 1`] = `
+exports[`valueInjectionLoader > should correctly insert values with directive and inline comments 1`] = `
 "
       // test
-      \\"use client\\";;globalThis[\\"foo\\"] = \\"bar\\";
+      "use client";;globalThis["foo"] = "bar";
       import * as Sentry from '@sentry/nextjs';
       Sentry.init();
     "
 `;
 
-exports[`valueInjectionLoader should correctly insert values with directive and multiline block comments 1`] = `
+exports[`valueInjectionLoader > should correctly insert values with directive and multiline block comments 1`] = `
 "
       /*
         test
       */
-      \\"use client\\";;globalThis[\\"foo\\"] = \\"bar\\";
+      "use client";;globalThis["foo"] = "bar";
       import * as Sentry from '@sentry/nextjs';
       Sentry.init();
     "
 `;
 
-exports[`valueInjectionLoader should correctly insert values with directive and multiline block comments and a bunch of whitespace 1`] = `
+exports[`valueInjectionLoader > should correctly insert values with directive and multiline block comments and a bunch of whitespace 1`] = `
 "
       /*
         test
@@ -65,7 +65,7 @@ exports[`valueInjectionLoader should correctly insert values with directive and
 
 
 
-      \\"use client\\";;globalThis[\\"foo\\"] = \\"bar\\";
+      "use client";;globalThis["foo"] = "bar";
 
 
 
@@ -74,9 +74,9 @@ exports[`valueInjectionLoader should correctly insert values with directive and
     "
 `;
 
-exports[`valueInjectionLoader should correctly insert values with directive and semicolon 1`] = `
+exports[`valueInjectionLoader > should correctly insert values with directive and semicolon 1`] = `
 "
-      \\"use client\\";;globalThis[\\"foo\\"] = \\"bar\\";
+      "use client";;globalThis["foo"] = "bar";
       import * as Sentry from '@sentry/nextjs';
       Sentry.init();
     "

packages/nextjs/test/config/__snapshots__/valueInjectionLoader.test.ts.snap

@@ -2,6 +2,7 @@
 import './mocks';
 
 import * as fs from 'fs';
+import { describe, vi, it, expect } from 'vitest';
 
 import type { ModuleRuleUseProperty, WebpackModuleRule } from '../../src/config/types';
 import {
@@ -13,36 +14,8 @@ import {
 } from './fixtures';
 import { materializeFinalWebpackConfig } from './testUtils';
 
-const existsSyncSpy = jest.spyOn(fs, 'existsSync');
-const lstatSyncSpy = jest.spyOn(fs, 'lstatSync');
-
-type MatcherResult = { pass: boolean; message: () => string };
-
-expect.extend({
-  stringEndingWith(received: string, expectedEnding: string): MatcherResult {
-    const failsTest = !received.endsWith(expectedEnding);
-    const generateErrorMessage = () =>
-      failsTest
-        ? // Regular error message for match failing
-          `expected string ending with '${expectedEnding}', but got '${received}'`
-        : // Error message for the match passing if someone has called it with `expect.not`
-          `expected string not ending with '${expectedEnding}', but got '${received}'`;
-
-    return {
-      pass: !failsTest,
-      message: generateErrorMessage,
-    };
-  },
-});
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace jest {
-    interface Expect {
-      stringEndingWith: (expectedEnding: string) => MatcherResult;
-    }
-  }
-}
+const existsSyncSpy = vi.spyOn(fs, 'existsSync');
+const lstatSyncSpy = vi.spyOn(fs, 'lstatSync');
 
 function applyRuleToResource(rule: WebpackModuleRule, resourcePath: string): ModuleRuleUseProperty[] {
   const applications = [];
@@ -80,7 +53,7 @@ describe('webpack loaders', () => {
         test: expect.any(RegExp),
         use: [
           {
-            loader: expect.stringEndingWith('valueInjectionLoader.js'),
+            loader: expect.stringMatching(/valueInjectionLoader\.js$/),
             // We use `expect.objectContaining({})` rather than `expect.any(Object)` to match any plain object because
             // the latter will also match arrays, regexes, dates, sets, etc. - anything whose `typeof` value is
             // `'object'`.
@@ -272,7 +245,7 @@ describe('webpack loaders', () => {
         test: /sentry\.client\.config\.(jsx?|tsx?)/,
         use: [
           {
-            loader: expect.stringEndingWith('valueInjectionLoader.js'),
+            loader: expect.stringMatching(/valueInjectionLoader\.js$/),
             // We use `expect.objectContaining({})` rather than `expect.any(Object)` to match any plain object because
             // the latter will also match arrays, regexes, dates, sets, etc. - anything whose `typeof` value is
             // `'object'`.
@@ -285,9 +258,10 @@ describe('webpack loaders', () => {
 });
 
 describe('`distDir` value in default server-side `RewriteFrames` integration', () => {
-  describe('`RewriteFrames` ends up with correct `distDir` value', () => {
+  it('`RewriteFrames` ends up with correct `distDir` value', () => {
     // TODO: this, along with any number of other parts of the build process, should be tested with an integration
     // test which actually runs webpack and inspects the resulting bundles (and that integration test should test
-    // custom `distDir` values with and without a `.`, to make sure the regex escaping is working)
+    // custom `distDir` values with and without a `.`, to make sure the regex
+    // escaping is working)
   });
 });

packages/nextjs/test/config/loaders.test.ts

@@ -4,14 +4,21 @@
 import * as fs from 'fs';
 import * as os from 'os';
 import * as path from 'path';
+import { vi, afterAll, afterEach } from 'vitest';
+
+vi.mock('fs');
+vi.mock('os');
 
 import { CLIENT_SDK_CONFIG_FILE, EDGE_SDK_CONFIG_FILE, SERVER_SDK_CONFIG_FILE } from './fixtures';
 
 // We use `fs.existsSync()` in `getUserConfigFile()`. When we're not testing `getUserConfigFile()` specifically, all we
 // need is for it to give us any valid answer, so make it always find what it's looking for. Since this is a core node
 // built-in, though, which jest itself uses, otherwise let it do the normal thing. Storing the real version of the
-// function also lets us restore the original when we do want to test `getUserConfigFile()`.
-export const realExistsSync = jest.requireActual('fs').existsSync;
+// function also lets us restore the original when we do want to test
+// `getUserConfigFile()`.
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+const fsReal = (await vi.importActual('fs')) as typeof import('fs');
+export const realExistsSync = fsReal.existsSync;
 export const mockExistsSync = (path: fs.PathLike): ReturnType<typeof realExistsSync> => {
   if (
     (path as string).endsWith(SERVER_SDK_CONFIG_FILE) ||
@@ -23,20 +30,22 @@ export const mockExistsSync = (path: fs.PathLike): ReturnType<typeof realExistsS
 
   return realExistsSync(path);
 };
-export const exitsSync = jest.spyOn(fs, 'existsSync').mockImplementation(mockExistsSync);
+export const exitsSync = vi.spyOn(fs, 'existsSync').mockImplementation(mockExistsSync);
 
 /** Mocking of temporary directory creation (so that we have a place to stick files (like `sentry.client.config.js`) in
  * order to test that we can find them) */
 
 // Make it so that all temporary folders, either created directly by tests or by the code they're testing, will go into
 // one spot that we know about, which we can then clean up when we're done
-const realTmpdir = jest.requireActual('os').tmpdir;
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+const osReal = (await vi.importActual('os')) as typeof import('os');
+const realTmpdir = osReal.tmpdir;
 
 // Including the random number ensures that even if multiple test files using these mocks are running at once, they have
 // separate temporary folders
 const TEMP_DIR_PATH = path.join(realTmpdir(), `sentry-nextjs-test-${Math.random()}`);
 
-jest.spyOn(os, 'tmpdir').mockReturnValue(TEMP_DIR_PATH);
+vi.spyOn(os, 'tmpdir').mockReturnValue(TEMP_DIR_PATH);
 // In theory, we should always land in the `else` here, but this saves the cases where the prior run got interrupted and
 // the `afterAll` below didn't happen.
 if (fs.existsSync(TEMP_DIR_PATH)) {
@@ -52,7 +61,7 @@ afterAll(() => {
 // In order to know what to expect in the webpack config `entry` property, we need to know the path of the temporary
 // directory created when doing the file injection, so wrap the real `mkdtempSync` and store the resulting path where we
 // can access it
-export const mkdtempSyncSpy = jest.spyOn(fs, 'mkdtempSync');
+export const mkdtempSyncSpy = vi.spyOn(fs, 'mkdtempSync');
 
 afterEach(() => {
   mkdtempSyncSpy.mockClear();

packages/nextjs/test/config/mocks.ts

@@ -1,3 +1,5 @@
+import { describe, it, expect } from 'vitest';
+
 import type { LoaderThis } from '../../src/config/loaders/types';
 import type { ValueInjectionLoaderOptions } from '../../src/config/loaders/valueInjectionLoader';
 import valueInjectionLoader from '../../src/config/loaders/valueInjectionLoader';

packages/nextjs/test/config/valueInjectionLoader.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it, vi } from 'vitest';
+
 // mock helper functions not tested directly in this file
 import '../mocks';
 
@@ -12,9 +14,16 @@ import {
   userNextConfig,
 } from '../fixtures';
 import { materializeFinalNextConfig, materializeFinalWebpackConfig } from '../testUtils';
+import * as core from '@sentry/core';
 
 describe('constructWebpackConfigFunction()', () => {
   it('includes expected properties', async () => {
+    vi.spyOn(core, 'loadModule').mockImplementation(() => ({
+      sentryWebpackPlugin: () => ({
+        _name: 'sentry-webpack-plugin',
+      }),
+    }));
+
     const finalWebpackConfig = await materializeFinalWebpackConfig({
       exportedNextConfig,
       incomingWebpackConfig: serverWebpackConfig,
@@ -46,7 +55,12 @@ describe('constructWebpackConfigFunction()', () => {
   });
 
   it('automatically enables deleteSourcemapsAfterUpload for client builds when not explicitly set', async () => {
-    const getWebpackPluginOptionsSpy = jest.spyOn(getWebpackPluginOptionsModule, 'getWebpackPluginOptions');
+    const getWebpackPluginOptionsSpy = vi.spyOn(getWebpackPluginOptionsModule, 'getWebpackPluginOptions');
+    vi.spyOn(core, 'loadModule').mockImplementation(() => ({
+      sentryWebpackPlugin: () => ({
+        _name: 'sentry-webpack-plugin',
+      }),
+    }));
 
     await materializeFinalWebpackConfig({
       exportedNextConfig,
@@ -112,6 +126,12 @@ describe('constructWebpackConfigFunction()', () => {
   });
 
   it('uses `hidden-source-map` as `devtool` value for client-side builds', async () => {
+    vi.spyOn(core, 'loadModule').mockImplementation(() => ({
+      sentryWebpackPlugin: () => ({
+        _name: 'sentry-webpack-plugin',
+      }),
+    }));
+
     const finalClientWebpackConfig = await materializeFinalWebpackConfig({
       exportedNextConfig: exportedNextConfig,
       incomingWebpackConfig: clientWebpackConfig,

packages/nextjs/test/config/webpack/constructWebpackConfig.test.ts

@@ -1,3 +1,5 @@
+import { describe, it, expect } from 'vitest';
+
 import type { BuildContext, NextConfigObject } from '../../../src/config/types';
 import { getWebpackPluginOptions } from '../../../src/config/webpackPluginOptions';
 

packages/nextjs/test/config/webpack/webpackPluginOptions.test.ts

@@ -1,11 +1,12 @@
 import * as SentryCore from '@sentry/core';
 import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
 import type { NextApiRequest, NextApiResponse } from 'next';
+import { describe, vi, beforeEach, afterEach, it, expect } from 'vitest';
 
 import type { AugmentedNextApiResponse, NextApiHandler } from '../../src/common/types';
 import { wrapApiHandlerWithSentry } from '../../src/server';
 
-const startSpanManualSpy = jest.spyOn(SentryCore, 'startSpanManual');
+const startSpanManualSpy = vi.spyOn(SentryCore, 'startSpanManual');
 
 describe('withSentry', () => {
   let req: NextApiRequest, res: NextApiResponse;
@@ -32,7 +33,7 @@ describe('withSentry', () => {
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('tracing', () => {