test: Write tests for auto client perf

Author: AbhiPrasad

packages/nextjs/src/index.client.ts

@@ -4,31 +4,43 @@ import { Integrations } from '@sentry/tracing';
 import { nextRouterInstrumentation } from './performance/client';
 import { MetadataBuilder } from './utils/metadataBuilder';
 import { NextjsOptions } from './utils/nextjsOptions';
-import { addIntegration } from './utils/userIntegrations';
+import { addIntegration, UserIntegrations } from './utils/userIntegrations';
 
 export * from '@sentry/react';
 export { nextRouterInstrumentation } from './performance/client';
 
+const { BrowserTracing } = Integrations;
+
 /** Inits the Sentry NextJS SDK on the browser with the React SDK. */
 export function init(options: NextjsOptions): void {
   const metadataBuilder = new MetadataBuilder(options, ['nextjs', 'react']);
   metadataBuilder.addSdkMetadata();
   options.environment = options.environment || process.env.NODE_ENV;
-  addClientIntegrations(options);
-  reactInit(options);
+  reactInit({
+    ...options,
+    integrations: createClientIntegrations(options.integrations),
+  });
   configureScope(scope => {
     scope.setTag('runtime', 'browser');
   });
 }
 
-const defaultBrowserTracingIntegration = new Integrations.BrowserTracing({
+const defaultBrowserTracingIntegration = new BrowserTracing({
   routingInstrumentation: nextRouterInstrumentation,
 });
 
-function addClientIntegrations(options: NextjsOptions): void {
-  if (options.integrations) {
-    addIntegration(defaultBrowserTracingIntegration, options.integrations);
+function createClientIntegrations(integrations?: UserIntegrations): UserIntegrations {
+  if (integrations) {
+    const newIntegrations = addIntegration(defaultBrowserTracingIntegration, integrations);
+    if (Array.isArray(newIntegrations)) {
+      newIntegrations.forEach(i => {
+        if (i.name === 'BrowserTracing') {
+          (i as InstanceType<typeof BrowserTracing>).options.routingInstrumentation = nextRouterInstrumentation;
+        }
+      });
+    }
+    return newIntegrations;
   } else {
-    options.integrations = [defaultBrowserTracingIntegration];
+    return [defaultBrowserTracingIntegration];
   }
 }

packages/nextjs/src/utils/userIntegrations.ts

@@ -1,7 +1,7 @@
 import { Integration } from '@sentry/types';
 
 export type UserFunctionIntegrations = (integrations: Integration[]) => Integration[];
-type UserIntegrations = Integration[] | UserFunctionIntegrations;
+export type UserIntegrations = Integration[] | UserFunctionIntegrations;
 
 /**
  * Retrieves the patched integrations with the provided integration.

packages/nextjs/test/index.client.test.ts

@@ -0,0 +1,97 @@
+import { Integrations as TracingIntegrations } from '@sentry/tracing';
+import { Integration } from '@sentry/types';
+
+import { init, Integrations, nextRouterInstrumentation, Scope } from '../src/index.client';
+import { NextjsOptions } from '../src/utils/nextjsOptions';
+
+const { BrowserTracing } = TracingIntegrations;
+
+const mockInit = jest.fn();
+let configureScopeCallback: (scope: Scope) => void = () => undefined;
+
+jest.mock('@sentry/react', () => {
+  const actual = jest.requireActual('@sentry/react');
+  return {
+    ...actual,
+    init: (options: NextjsOptions) => {
+      mockInit(options);
+    },
+    configureScope: (callback: (scope: Scope) => void) => {
+      configureScopeCallback = callback;
+    },
+  };
+});
+
+describe('Client init()', () => {
+  afterEach(() => {
+    mockInit.mockClear();
+    configureScopeCallback = () => undefined;
+  });
+
+  it('inits the React SDK', () => {
+    expect(mockInit).toHaveBeenCalledTimes(0);
+    init({});
+    expect(mockInit).toHaveBeenCalledTimes(1);
+    expect(mockInit).toHaveBeenLastCalledWith({
+      _metadata: {
+        sdk: {
+          name: 'sentry.javascript.nextjs',
+          version: expect.any(String),
+          packages: expect.any(Array),
+        },
+      },
+      environment: 'test',
+      integrations: expect.any(Array),
+    });
+  });
+
+  it('sets runtime on scope', () => {
+    const mockScope = new Scope();
+    init({});
+    configureScopeCallback(mockScope);
+    // @ts-ignore need access to protected _tags attribute
+    expect(mockScope._tags).toEqual({ runtime: 'browser' });
+  });
+
+  describe('integrations', () => {
+    it('adds BrowserTracing integration by default', () => {
+      init({});
+
+      const reactInitOptions: NextjsOptions = mockInit.mock.calls[0][0];
+      expect(reactInitOptions.integrations).toHaveLength(1);
+
+      const integrations = reactInitOptions.integrations as Integration[];
+      expect(integrations[0]).toEqual(expect.any(BrowserTracing));
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      expect((integrations[0] as InstanceType<typeof BrowserTracing>).options.routingInstrumentation).toEqual(
+        nextRouterInstrumentation,
+      );
+    });
+
+    it('supports passing integration through options', () => {
+      init({ integrations: [new Integrations.Breadcrumbs({ console: false })] });
+      const reactInitOptions: NextjsOptions = mockInit.mock.calls[0][0];
+      expect(reactInitOptions.integrations).toHaveLength(2);
+
+      const integrations = reactInitOptions.integrations as Integration[];
+      expect(integrations).toEqual([expect.any(Integrations.Breadcrumbs), expect.any(BrowserTracing)]);
+    });
+
+    it('uses custom BrowserTracing but uses nextRouterInstrumentation', () => {
+      init({
+        integrations: [new BrowserTracing({ idleTimeout: 5000, startTransactionOnLocationChange: false })],
+      });
+
+      const reactInitOptions: NextjsOptions = mockInit.mock.calls[0][0];
+      expect(reactInitOptions.integrations).toHaveLength(1);
+      const integrations = reactInitOptions.integrations as Integration[];
+      expect((integrations[0] as InstanceType<typeof BrowserTracing>).options).toEqual(
+        expect.objectContaining({
+          idleTimeout: 5000,
+          startTransactionOnLocationChange: false,
+          routingInstrumentation: nextRouterInstrumentation,
+        }),
+      );
+    });
+  });
+});

packages/nextjs/test/userIntegrations.test.ts renamed to packages/nextjs/test/utils/userIntegrations.test.ts

@@ -1,7 +1,7 @@
 import { RewriteFrames } from '@sentry/integrations';
 import { Integration } from '@sentry/types';
 
-import { addIntegration, UserFunctionIntegrations } from '../src/utils/userIntegrations';
+import { addIntegration, UserFunctionIntegrations } from '../../src/utils/userIntegrations';
 
 const testIntegration = new RewriteFrames();