ref(test): Break up nextjs config tests

packages/nextjs/test/config/fixtures.ts

@@ -0,0 +1,101 @@
+import {
+  BuildContext,
+  EntryPropertyFunction,
+  ExportedNextConfig,
+  NextConfigObject,
+  NextConfigObjectWithSentry,
+  WebpackConfigObject,
+} from '../../src/config/types';
+
+export const SERVER_SDK_CONFIG_FILE = 'sentry.server.config.js';
+export const CLIENT_SDK_CONFIG_FILE = 'sentry.client.config.js';
+
+/** Mock next config object */
+export const userNextConfig: NextConfigObject = {
+  publicRuntimeConfig: { location: 'dogpark', activities: ['fetch', 'chasing', 'digging'] },
+  webpack: (incomingWebpackConfig: WebpackConfigObject, _options: BuildContext) => ({
+    ...incomingWebpackConfig,
+    mode: 'universal-sniffing',
+    entry: async () =>
+      Promise.resolve({
+        ...(await (incomingWebpackConfig.entry as EntryPropertyFunction)()),
+        simulatorBundle: './src/simulator/index.ts',
+      }),
+  }),
+};
+
+/** Mocks of the arguments passed to `withSentryConfig` */
+export const exportedNextConfig = userNextConfig as NextConfigObjectWithSentry;
+export const userSentryWebpackPluginConfig = { org: 'squirrelChasers', project: 'simulator' };
+process.env.SENTRY_AUTH_TOKEN = 'dogsarebadatkeepingsecrets';
+process.env.SENTRY_RELEASE = 'doGsaREgReaT';
+
+/** Mocks of the arguments passed to the result of `withSentryConfig` (when it's a function). */
+export const runtimePhase = 'ball-fetching';
+// `defaultConfig` is the defaults for all nextjs options (we don't use these at all in the tests, so for our purposes
+// here the values don't matter)
+export const defaultsObject = { defaultConfig: {} as NextConfigObject };
+
+/** mocks of the arguments passed to `nextConfig.webpack` */
+export const serverWebpackConfig: WebpackConfigObject = {
+  entry: () =>
+    Promise.resolve({
+      'pages/_error': 'private-next-pages/_error.js',
+      'pages/_app': ['./node_modules/smellOVision/index.js', 'private-next-pages/_app.js'],
+      'pages/api/_middleware': 'private-next-pages/api/_middleware.js',
+      'pages/api/simulator/dogStats/[name]': { import: 'private-next-pages/api/simulator/dogStats/[name].js' },
+      'pages/api/simulator/leaderboard': {
+        import: ['./node_modules/dogPoints/converter.js', 'private-next-pages/api/simulator/leaderboard.js'],
+      },
+      'pages/api/tricks/[trickName]': {
+        import: 'private-next-pages/api/tricks/[trickName].js',
+        dependOn: 'treats',
+      },
+      treats: './node_modules/dogTreats/treatProvider.js',
+    }),
+  output: { filename: '[name].js', path: '/Users/Maisey/projects/squirrelChasingSimulator/.next' },
+  target: 'node',
+  context: '/Users/Maisey/projects/squirrelChasingSimulator',
+};
+export const clientWebpackConfig: WebpackConfigObject = {
+  entry: () =>
+    Promise.resolve({
+      main: './src/index.ts',
+      'pages/_app': 'next-client-pages-loader?page=%2F_app',
+      'pages/_error': 'next-client-pages-loader?page=%2F_error',
+    }),
+  output: { filename: 'static/chunks/[name].js', path: '/Users/Maisey/projects/squirrelChasingSimulator/.next' },
+  target: 'web',
+  context: '/Users/Maisey/projects/squirrelChasingSimulator',
+};
+
+/**
+ * Return a mock build context, including the user's next config (which nextjs copies in in real life).
+ *
+ * @param buildTarget 'server' or 'client'
+ * @param materializedNextConfig The user's next config
+ * @param webpackVersion
+ * @returns A mock build context for the given target
+ */
+export function getBuildContext(
+  buildTarget: 'server' | 'client',
+  materializedNextConfig: ExportedNextConfig,
+  webpackVersion: string = '5.4.15',
+): BuildContext {
+  return {
+    dev: false,
+    buildId: 'sItStAyLiEdOwN',
+    dir: '/Users/Maisey/projects/squirrelChasingSimulator',
+    config: {
+      // nextjs's default values
+      target: 'server',
+      distDir: '.next',
+      ...materializedNextConfig,
+    } as NextConfigObject,
+    webpack: { version: webpackVersion },
+    isServer: buildTarget === 'server',
+  };
+}
+
+export const serverBuildContext = getBuildContext('server', exportedNextConfig);
+export const clientBuildContext = getBuildContext('client', exportedNextConfig);

packages/nextjs/test/config/index.test.ts

@@ -0,0 +1,62 @@
+import { defaultsObject, exportedNextConfig, runtimePhase, userNextConfig } from './fixtures';
+import { materializeFinalNextConfig } from './testUtils';
+
+describe('withSentryConfig', () => {
+  it('includes expected properties', () => {
+    const finalConfig = materializeFinalNextConfig(exportedNextConfig);
+
+    expect(finalConfig).toEqual(
+      expect.objectContaining({
+        webpack: expect.any(Function), // `webpack` is tested specifically elsewhere
+      }),
+    );
+  });
+
+  it('preserves unrelated next config options', () => {
+    const finalConfig = materializeFinalNextConfig(exportedNextConfig);
+
+    expect(finalConfig.publicRuntimeConfig).toEqual(userNextConfig.publicRuntimeConfig);
+  });
+
+  it("works when user's overall config is an object", () => {
+    const finalConfig = materializeFinalNextConfig(exportedNextConfig);
+
+    expect(finalConfig).toEqual(
+      expect.objectContaining({
+        ...userNextConfig,
+        webpack: expect.any(Function), // `webpack` is tested specifically elsewhere
+      }),
+    );
+  });
+
+  it("works when user's overall config is a function", () => {
+    const exportedNextConfigFunction = () => userNextConfig;
+
+    const finalConfig = materializeFinalNextConfig(exportedNextConfigFunction);
+
+    expect(finalConfig).toEqual(
+      expect.objectContaining({
+        ...exportedNextConfigFunction(),
+        webpack: expect.any(Function), // `webpack` is tested specifically elsewhere
+      }),
+    );
+  });
+
+  it('correctly passes `phase` and `defaultConfig` through to functional `userNextConfig`', () => {
+    const exportedNextConfigFunction = jest.fn().mockReturnValue(userNextConfig);
+
+    materializeFinalNextConfig(exportedNextConfigFunction);
+
+    expect(exportedNextConfigFunction).toHaveBeenCalledWith(runtimePhase, defaultsObject);
+  });
+
+  it('removes `sentry` property', () => {
+    // It's unclear why we need this cast -
+    const finalConfig = materializeFinalNextConfig({ ...exportedNextConfig, sentry: {} });
+    // const finalConfig = materializeFinalNextConfig({ ...exportedNextConfig, sentry: {} } as ExportedNextConfig);
+
+    // We have to check using `in` because TS knows it shouldn't be there and throws a type error if we try to access it
+    // directly
+    expect('sentry' in finalConfig).toBe(false);
+  });
+});

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

@@ -0,0 +1,55 @@
+// mock helper functions not tested directly in this file
+import './mocks';
+
+import {
+  clientBuildContext,
+  clientWebpackConfig,
+  exportedNextConfig,
+  serverBuildContext,
+  serverWebpackConfig,
+} from './fixtures';
+import { materializeFinalWebpackConfig } from './testUtils';
+
+describe('webpack loaders', () => {
+  it('adds loader to server config', async () => {
+    const finalWebpackConfig = await materializeFinalWebpackConfig({
+      exportedNextConfig,
+      incomingWebpackConfig: serverWebpackConfig,
+      incomingWebpackBuildContext: serverBuildContext,
+    });
+
+    expect(finalWebpackConfig.module!.rules).toEqual(
+      expect.arrayContaining([
+        {
+          test: expect.any(RegExp),
+          use: [
+            {
+              loader: expect.any(String),
+              // Having no criteria for what the object contains is better than using `expect.any(Object)`, because that
+              // could be anything
+              options: expect.objectContaining({}),
+            },
+          ],
+        },
+      ]),
+    );
+  });
+
+  it("doesn't add loader to client config", async () => {
+    const finalWebpackConfig = await materializeFinalWebpackConfig({
+      exportedNextConfig,
+      incomingWebpackConfig: clientWebpackConfig,
+      incomingWebpackBuildContext: clientBuildContext,
+    });
+
+    expect(finalWebpackConfig.module).toBeUndefined();
+  });
+});
+
+describe('`distDir` value in default server-side `RewriteFrames` integration', () => {
+  describe('`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)
+  });
+});

packages/nextjs/test/config/mocks.ts

@@ -0,0 +1,56 @@
+// TODO: This mocking is why we have to use `--runInBand` when we run tests, since there's only a single temp directory
+// created
+
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import * as rimraf from 'rimraf';
+
+import { CLIENT_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;
+export const mockExistsSync = (path: fs.PathLike): ReturnType<typeof realExistsSync> => {
+  if ((path as string).endsWith(SERVER_SDK_CONFIG_FILE) || (path as string).endsWith(CLIENT_SDK_CONFIG_FILE)) {
+    return true;
+  }
+
+  return realExistsSync(path);
+};
+export const exitsSync = jest.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;
+
+// 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);
+// 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)) {
+  rimraf.sync(path.join(TEMP_DIR_PATH, '*'));
+} else {
+  fs.mkdirSync(TEMP_DIR_PATH);
+}
+
+afterAll(() => {
+  rimraf.sync(TEMP_DIR_PATH);
+});
+
+// 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');
+
+afterEach(() => {
+  mkdtempSyncSpy.mockClear();
+});

packages/nextjs/test/config/testUtils.ts

@@ -0,0 +1,120 @@
+import { WebpackPluginInstance } from 'webpack';
+
+import { withSentryConfig } from '../../src/config';
+import {
+  BuildContext,
+  EntryPropertyFunction,
+  ExportedNextConfig,
+  NextConfigObject,
+  SentryWebpackPluginOptions,
+  WebpackConfigObject,
+} from '../../src/config/types';
+import { constructWebpackConfigFunction, SentryWebpackPlugin } from '../../src/config/webpack';
+import { defaultsObject, runtimePhase } from './fixtures';
+
+/**
+ * Derive the final values of all next config options, by first applying `withSentryConfig` and then, if it returns a
+ *  function, running that function.
+ *
+ * @param exportedNextConfig Next config options provided by the user
+ * @param userSentryWebpackPluginConfig SentryWebpackPlugin options provided by the user
+ *
+ * @returns The config values next will receive directly from `withSentryConfig` or when it calls the function returned
+ * by `withSentryConfig`
+ */
+export function materializeFinalNextConfig(
+  exportedNextConfig: ExportedNextConfig,
+  userSentryWebpackPluginConfig?: Partial<SentryWebpackPluginOptions>,
+): NextConfigObject {
+  const sentrifiedConfig = withSentryConfig(exportedNextConfig, userSentryWebpackPluginConfig);
+  let finalConfigValues = sentrifiedConfig;
+
+  if (typeof sentrifiedConfig === 'function') {
+    // for some reason TS won't recognize that `finalConfigValues` is now a NextConfigObject, which is why the cast
+    // below is necessary
+    finalConfigValues = sentrifiedConfig(runtimePhase, defaultsObject);
+  }
+
+  return finalConfigValues as NextConfigObject;
+}
+
+/**
+ * Derive the final values of all webpack config options, by first applying `constructWebpackConfigFunction` and then
+ * running the resulting function. Since the `entry` property of the resulting object is itself a function, also call
+ * that.
+ *
+ * @param options An object including the following:
+ *   - `exportedNextConfig` Next config options provided by the user
+ *   - `userSentryWebpackPluginConfig` SentryWebpackPlugin options provided by the user
+ *   - `incomingWebpackConfig` The existing webpack config, passed to the function as `config`
+ *   - `incomingWebpackBuildContext` The existing webpack build context, passed to the function as `options`
+ *
+ * @returns The webpack config values next will use when it calls the function that `createFinalWebpackConfig` returns
+ */
+export async function materializeFinalWebpackConfig(options: {
+  exportedNextConfig: ExportedNextConfig;
+  userSentryWebpackPluginConfig?: Partial<SentryWebpackPluginOptions>;
+  incomingWebpackConfig: WebpackConfigObject;
+  incomingWebpackBuildContext: BuildContext;
+}): Promise<WebpackConfigObject> {
+  const { exportedNextConfig, userSentryWebpackPluginConfig, incomingWebpackConfig, incomingWebpackBuildContext } =
+    options;
+
+  // if the user's next config is a function, run it so we have access to the values
+  const materializedUserNextConfig =
+    typeof exportedNextConfig === 'function'
+      ? exportedNextConfig('phase-production-build', defaultsObject)
+      : exportedNextConfig;
+
+  // extract the `sentry` property as we do in `withSentryConfig`
+  const { sentry: sentryConfig } = materializedUserNextConfig;
+  delete materializedUserNextConfig.sentry;
+
+  // get the webpack config function we'd normally pass back to next
+  const webpackConfigFunction = constructWebpackConfigFunction(
+    materializedUserNextConfig,
+    userSentryWebpackPluginConfig,
+    sentryConfig,
+  );
+
+  // call it to get concrete values for comparison
+  const finalWebpackConfigValue = webpackConfigFunction(incomingWebpackConfig, incomingWebpackBuildContext);
+  const webpackEntryProperty = finalWebpackConfigValue.entry as EntryPropertyFunction;
+  finalWebpackConfigValue.entry = await webpackEntryProperty();
+
+  return finalWebpackConfigValue;
+}
+
+// helper function to make sure we're checking the correct plugin's data
+
+/**
+ * Given a webpack config, find a plugin (or the plugins) with the given name.
+ *
+ * Note that this function will error if more than one instance is found, unless the `allowMultiple` flag is passed.
+ *
+ * @param webpackConfig The webpack config object
+ * @param pluginName The name of the plugin's constructor
+ * @returns The plugin instance(s), or undefined if it's not found.
+ */
+export function findWebpackPlugin(
+  webpackConfig: WebpackConfigObject,
+  pluginName: string,
+  multipleAllowed: boolean = false,
+): WebpackPluginInstance | SentryWebpackPlugin | WebpackPluginInstance[] | SentryWebpackPlugin[] | undefined {
+  const plugins = webpackConfig.plugins || [];
+  const matchingPlugins = plugins.filter(plugin => plugin.constructor.name === pluginName);
+
+  if (matchingPlugins.length > 1 && !multipleAllowed) {
+    throw new Error(
+      `More than one ${pluginName} instance found. Please use the \`multipleAllowed\` flag if this is intentional.\nExisting plugins: ${plugins.map(
+        plugin => plugin.constructor.name,
+      )}`,
+    );
+  }
+
+  if (matchingPlugins.length > 0) {
+    return multipleAllowed ? matchingPlugins : matchingPlugins[0];
+  }
+
+  return undefined;
+}