Add tests

Author: andreiborza

packages/solid/test/errorboundary.test.tsx

@@ -44,6 +44,7 @@ describe('withSentryErrorBoundary', () => {
   it('calls `captureException` when an error occurs`', () => {
     render(() => (
       <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
         <NonExistentComponent />
       </SentryErrorBoundary>
     ));
@@ -55,6 +56,7 @@ describe('withSentryErrorBoundary', () => {
   it('renders the fallback component', async () => {
     const { findByText } = render(() => (
       <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
         <NonExistentComponent />
       </SentryErrorBoundary>
     ));
@@ -65,11 +67,12 @@ describe('withSentryErrorBoundary', () => {
   it('passes the `error` and `reset` function to the fallback component', () => {
     const mockFallback = vi.fn();
 
-    render(() => {
+    render(() => (
       <SentryErrorBoundary fallback={mockFallback}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
         <NonExistentComponent />
-      </SentryErrorBoundary>;
-    });
+      </SentryErrorBoundary>
+    ));
 
     expect(mockFallback).toHaveBeenCalledTimes(1);
     expect(mockFallback).toHaveBeenCalledWith(
@@ -81,6 +84,7 @@ describe('withSentryErrorBoundary', () => {
   it('calls `captureException` again after resetting', async () => {
     const { findByRole } = render(() => (
       <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
         <NonExistentComponent />
       </SentryErrorBoundary>
     ));

packages/solid/test/sdk.test.ts

@@ -6,7 +6,7 @@ import { init as solidInit } from '../src/sdk';
 
 const browserInit = vi.spyOn(SentryBrowser, 'init');
 
-describe('Initialize Solid SDk', () => {
+describe('Initialize Solid SDK', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });

packages/solidstart/README.md

@@ -11,10 +11,9 @@
 [![npm dt](https://img.shields.io/npm/dt/@sentry/solidstart.svg)](https://www.npmjs.com/package/@sentry/solidstart)
 
 This SDK is considered ⚠️ **experimental and in an alpha state**. It may experience breaking changes. Please reach out
-on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns.
-This SDK is for [Solid Start](https://start.solidjs.com/).
-If you're using [Solid](https://www.solidjs.com/) see our Solid SDK here.
-
+on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. This
+SDK is for [Solid Start](https://start.solidjs.com/). If you're using [Solid](https://www.solidjs.com/) see our Solid
+SDK here.
 
 ## Links
 
@@ -33,41 +32,41 @@ If the setup through the wizard doesn't work for you, you can also set up the SD
 
 Install the Sentry Solid Start SDK:
 
-   ```bash
-   # Using npm
-   npm install @sentry/solidstart
+```bash
+# Using npm
+npm install @sentry/solidstart
 
-   # Using yarn
-   yarn add @sentry/solidstart
-   ```
+# Using yarn
+yarn add @sentry/solidstart
+```
 
 ### 2. Client-side Setup
 
 Initialize the SDK in `entry-client.jsx`
 
 ```jsx
 import * as Sentry from '@sentry/solidstart';
-import { mount, StartClient } from "@solidjs/start/client";
+import { mount, StartClient } from '@solidjs/start/client';
 
 Sentry.init({
   dsn: '__PUBLIC_DSN__',
   tracesSampleRate: 1.0, //  Capture 100% of the transactions
 });
 
-mount(() => <StartClient />, document.getElementById("app"));
+mount(() => <StartClient />, document.getElementById('app'));
 ```
 
 ### 3. Server-side Setup
 
 Create an instrumentation file named `instrument.server.mjs` and add your initialization code for the server-side SDK.
 
 ```javascript
-import * as Sentry from "@sentry/solidstart";
+import * as Sentry from '@sentry/solidstart';
 
 Sentry.init({
-    dsn: "https://[email protected]/4507459091824640",
-    tracesSampleRate: 1.0, //  Capture 100% of the transactions
-})
+  dsn: 'https://[email protected]/4507459091824640',
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+});
 ```
 
 ### 4. Run your application

packages/solidstart/test/client/errorboundary.test.tsx

@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import type * as SentryBrowser from '@sentry/browser';
+import { createTransport, getCurrentScope, setCurrentClient } from '@sentry/core';
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { ErrorBoundary } from 'solid-js';
+import { BrowserClient, withSentryErrorBoundary } from '../../src/client';
+
+const mockCaptureException = vi.fn();
+vi.mock('@sentry/browser', async () => {
+  const actual = await vi.importActual<typeof SentryBrowser>('@sentry/browser');
+  return {
+    ...actual,
+    captureException: (...args) => mockCaptureException(...args),
+  } as typeof SentryBrowser;
+});
+
+const user = userEvent.setup();
+const SentryErrorBoundary = withSentryErrorBoundary(ErrorBoundary);
+
+describe('withSentryErrorBoundary', () => {
+  function createMockBrowserClient(): BrowserClient {
+    return new BrowserClient({
+      integrations: [],
+      tracesSampleRate: 1,
+      transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+      stackParser: () => [],
+    });
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+  });
+
+  afterEach(() => {
+    getCurrentScope().setClient(undefined);
+  });
+
+  it('calls `captureException` when an error occurs`', () => {
+    render(() => (
+      <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
+        <NonExistentComponent />
+      </SentryErrorBoundary>
+    ));
+
+    expect(mockCaptureException).toHaveBeenCalledTimes(1);
+    expect(mockCaptureException).toHaveBeenLastCalledWith(new ReferenceError('NonExistentComponent is not defined'));
+  });
+
+  it('renders the fallback component', async () => {
+    const { findByText } = render(() => (
+      <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
+        <NonExistentComponent />
+      </SentryErrorBoundary>
+    ));
+
+    expect(await findByText('Ooops, an error occurred.')).toBeInTheDocument();
+  });
+
+  it('passes the `error` and `reset` function to the fallback component', () => {
+    const mockFallback = vi.fn();
+
+    render(() => (
+      <SentryErrorBoundary fallback={mockFallback}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
+        <NonExistentComponent />
+      </SentryErrorBoundary>
+    ));
+
+    expect(mockFallback).toHaveBeenCalledTimes(1);
+    expect(mockFallback).toHaveBeenCalledWith(
+      new ReferenceError('NonExistentComponent is not defined'),
+      expect.any(Function),
+    );
+  });
+
+  it('calls `captureException` again after resetting', async () => {
+    const { findByRole } = render(() => (
+      <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
+        <NonExistentComponent />
+      </SentryErrorBoundary>
+    ));
+
+    expect(mockCaptureException).toHaveBeenCalledTimes(1);
+    expect(mockCaptureException).toHaveBeenNthCalledWith(1, new ReferenceError('NonExistentComponent is not defined'));
+
+    const button = await findByRole('button');
+    await user.click(button);
+
+    expect(mockCaptureException).toHaveBeenCalledTimes(2);
+    expect(mockCaptureException).toHaveBeenNthCalledWith(2, new ReferenceError('NonExistentComponent is not defined'));
+  });
+
+  it('renders children when there is no error', async () => {
+    const { queryByText } = render(() => (
+      <SentryErrorBoundary fallback={<div>Oops, an error occurred.</div>}>
+        <div>Adopt a cat</div>
+      </SentryErrorBoundary>
+    ));
+
+    expect(await queryByText('Adopt a cat')).toBeInTheDocument();
+    expect(await queryByText('Ooops, an error occurred')).not.toBeInTheDocument();
+  });
+});

packages/solidstart/test/client/sdk.test.ts

@@ -0,0 +1,42 @@
+import { SDK_VERSION } from '@sentry/solid';
+import * as SentrySolid from '@sentry/solid';
+
+import { vi } from 'vitest';
+import { init as solidStartInit } from '../../src/client';
+
+const browserInit = vi.spyOn(SentrySolid, 'init');
+
+describe('Initialize Solid Start SDK', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('has the correct metadata', () => {
+    const client = solidStartInit({
+      dsn: 'https://[email protected]/1337',
+    });
+
+    const expectedMetadata = {
+      _metadata: {
+        sdk: {
+          name: 'sentry.javascript.solidstart',
+          packages: [
+            { name: 'npm:@sentry/solidstart', version: SDK_VERSION },
+            { name: 'npm:@sentry/solid', version: SDK_VERSION },
+          ],
+          version: SDK_VERSION,
+        },
+      },
+    };
+
+    expect(client).not.toBeUndefined();
+    expect(browserInit).toHaveBeenCalledTimes(1);
+    expect(browserInit).toHaveBeenLastCalledWith(expect.objectContaining(expectedMetadata));
+  });
+
+  it('sets the runtime tag on the isolation scope', () => {
+    solidStartInit({ dsn: 'https://[email protected]/1337' });
+
+    expect(SentrySolid.getIsolationScope().getScopeData().tags).toEqual({ runtime: 'browser' });
+  });
+});