feat: supports reloading beforeSend for next/react/remix

packages/web/jest.setup.ts

@@ -1,8 +1,13 @@
+import { beforeEach } from '@jest/globals';
 import '@testing-library/jest-dom';
+// Adds helpers like `.toHaveAttribute`
+import '@testing-library/jest-dom/jest-globals';
 
 beforeEach(() => {
   if ('document' in global) {
-    /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- there is an HTML element */
-    document.querySelector('html')!.innerHTML = '';
+    const html = document.querySelector('html');
+    if (html) {
+      html.innerHTML = '';
+    }
   }
 });

packages/web/package.json

@@ -94,9 +94,8 @@
     "@sveltejs/kit": "^2.7",
     "@swc/core": "^1.3.103",
     "@swc/jest": "^0.2.29",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^20.11.4",
     "@types/react": "^18.2.48",
     "copyfiles": "^2.4.1",

packages/web/src/generic.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from '@jest/globals';
-import { injectSpeedInsights } from './generic';
+import { injectSpeedInsights, type SpeedInsightsProps } from './generic';
 
 describe('injectSpeedInsights()', () => {
   it('allows no parameters', () => {
@@ -16,6 +16,15 @@ describe('injectSpeedInsights()', () => {
     });
     expectInjectedScript({ framework });
   });
+
+  it('can set beforeSend', () => {
+    const beforeSend: Required<SpeedInsightsProps>['beforeSend'] = (event) =>
+      event;
+    injectSpeedInsights({ beforeSend });
+
+    expect(window.siq?.[0]).toEqual(['beforeSend', beforeSend]);
+    expect(window.siq).toHaveLength(1);
+  });
 });
 
 function expectInjectedScript({

packages/web/src/react/index.test.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { afterEach, beforeEach, describe, it, expect } from '@jest/globals';
+import { cleanup, render } from '@testing-library/react';
+import type { SpeedInsightsProps } from '../types';
+import { SpeedInsights } from '.';
+
+describe('<SpeedInsights />', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe.each([
+    {
+      mode: 'development',
+      file: 'https://va.vercel-scripts.com/v1/speed-insights/script.debug.js',
+    },
+    {
+      mode: 'production',
+      file: 'http://localhost/_vercel/speed-insights/script.js',
+    },
+  ])('in $mode mode', ({ mode, file }) => {
+    const env = process.env.NODE_ENV;
+    beforeEach(() => {
+      process.env.NODE_ENV = mode;
+      window.si = undefined;
+      window.siq = undefined;
+    });
+
+    afterEach(() => {
+      process.env.NODE_ENV = env;
+    });
+
+    it('adds the script tag correctly', () => {
+      render(<SpeedInsights />);
+
+      const scripts = document.getElementsByTagName('script');
+      expect(scripts).toHaveLength(1);
+
+      const script = document.head.querySelector('script');
+      expect(script).toBeDefined();
+      expect(script?.src).toEqual(file);
+      expect(script).toHaveAttribute('defer');
+    });
+
+    it('sets and changes beforeSend', () => {
+      const beforeSend: Required<SpeedInsightsProps>['beforeSend'] = (event) =>
+        event;
+      const beforeSend2: Required<SpeedInsightsProps>['beforeSend'] = (event) =>
+        event;
+      const { rerender } = render(<SpeedInsights beforeSend={beforeSend} />);
+
+      expect(window.siq?.[0]).toEqual(['beforeSend', beforeSend]);
+      expect(window.siq).toHaveLength(1);
+      window.siq?.splice(0, 1);
+
+      rerender(<SpeedInsights beforeSend={beforeSend} />);
+      expect(window.siq).toHaveLength(0);
+
+      rerender(<SpeedInsights beforeSend={beforeSend2} />);
+      expect(window.siq?.[0]).toEqual(['beforeSend', beforeSend2]);
+      expect(window.siq).toHaveLength(1);
+    });
+  });
+});

packages/web/src/react/index.tsx

@@ -8,6 +8,10 @@ export function SpeedInsights(
     framework?: string;
   },
 ): JSX.Element | null {
+  useEffect(() => {
+    window.si?.('beforeSend', props.beforeSend);
+  }, [props.beforeSend]);
+
   const setScriptRoute = useRef<((path: string) => void) | null>(null);
   useEffect(() => {
     if (!setScriptRoute.current) {

packages/web/tsconfig.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "module": "esnext"
   },
-  "include": ["src"]
+  "include": ["src", "./jest.setup.ts"]
 }