feat(react): enhance testing and add new dependencies

- Added @testing-library/jest-dom and @testing-library/react for improved testing capabilities.
- Introduced jsdom for better DOM manipulation in tests.
- Updated EmojiRandomizer component to clean up unnecessary code.
- Refactored live-editing tests to improve structure and clarity.
- Enhanced StoryblokLiveEditing component with better visual editor detection.

This update improves the testing framework and overall code quality in the React package.

Author: imranolas

packages/react/package.json

@@ -72,6 +72,8 @@
     "@cypress/react": "^9.0.1",
     "@cypress/vite-dev-server": "^6.0.3",
     "@storyblok/eslint-config": "workspace:*",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@tsconfig/recommended": "^1.0.8",
     "@types/node": "^22.15.18",
     "@types/react": "19.1.4",
@@ -81,6 +83,7 @@
     "eslint": "^9.26.0",
     "eslint-plugin-cypress": "^4.3.0",
     "eslint-plugin-jest": "^28.11.0",
+    "jsdom": "^26.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rollup-plugin-preserve-directives": "^0.4.0",

packages/react/playground/next15/src/app/components/EmojiRandomizer.tsx

@@ -7,14 +7,12 @@ const useIsClient = () => {
   const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
-    
     setIsClient(true);
   }, []);
 
   return isClient;
 };
 
-
 interface EmojiRandomizerProps {
   blok: SbBlokData & {
     label?: string;
@@ -25,7 +23,6 @@ interface EmojiRandomizerProps {
  * A component that displays a label and a random emoji that changes on click
  */
 const EmojiRandomizer: FC<EmojiRandomizerProps> = ({ blok }) => {
-
   // List of fun emojis to randomly choose from
   const emojis = ['😊', '🎉', '🚀', '✨', '🌈', '🎨', '🎸', '🎮', '🍕', '🌺'];
 

packages/react/playground/next15/src/app/page.tsx

@@ -2,7 +2,7 @@ import type {
   ISbStoriesParams,
   StoryblokClient,
 } from '@storyblok/react/rsc';
-import { MarkTypes, StoryblokLiveEditing, StoryblokRichText, StoryblokServerComponent } from '@storyblok/react/rsc';
+import { StoryblokLiveEditing, StoryblokServerComponent } from '@storyblok/react/rsc';
 import { getStoryblokApi } from '@/lib/storyblok';
 import Link from 'next/link';
 

packages/react/src/__tests__/live-editing.test.ts

@@ -1,61 +1,112 @@
-import { describe, expect, it, vi } from 'vitest';
-import StoryblokLiveEditing from '../rsc/live-editing';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
 import type { ISbStoryData } from '@storyblok/js';
 
-// Mock dependencies
+// Import after mocks
+import StoryblokLiveEditing from '../rsc/live-editing';
+import { isBridgeLoaded, isVisualEditor } from '../utils';
+import { loadStoryblokBridge } from '@storyblok/js';
+
+// Mock dependencies - need to define functions inline to avoid hoisting issues
 vi.mock('../rsc/live-edit-update-action', () => ({
   liveEditUpdateAction: vi.fn(),
 }));
 
 vi.mock('@storyblok/js', () => ({
   registerStoryblokBridge: vi.fn(),
+  loadStoryblokBridge: vi.fn(() => Promise.resolve()),
 }));
 
-// Mock window for testing
-const originalWindow = globalThis.window;
-beforeEach(() => {
-  // Reset the window mock
-  vi.stubGlobal('window', {
-    storyblokRegisterEvent: undefined,
-    location: {
-      search: '',
-      pathname: '/',
-    },
+vi.mock('../utils', () => ({
+  isVisualEditor: vi.fn(() => false),
+  isBridgeLoaded: vi.fn(() => false),
+}));
+
+describe('storyblokLiveEditing', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(isVisualEditor).mockReturnValue(false);
+    vi.mocked(isBridgeLoaded).mockReturnValue(false);
+
+    // Mock window
+    vi.stubGlobal('window', {
+      storyblokRegisterEvent: undefined,
+      location: {
+        search: '',
+        pathname: '/',
+      },
+      self: {},
+      top: {},
+    });
   });
-});
 
-afterEach(() => {
-  // Restore original window
-  vi.stubGlobal('window', originalWindow);
-});
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
 
-describe('storyblokLiveEditing', () => {
   it('should return null when not in visual editor', () => {
-    const component = StoryblokLiveEditing({
-      story: { uuid: '123', id: 456 } as ISbStoryData,
-      bridgeOptions: {},
-    });
-    expect(component).toBeNull();
+    vi.mocked(isVisualEditor).mockReturnValue(false);
+
+    const { container } = render(
+      React.createElement(StoryblokLiveEditing, {
+        story: { uuid: '123', id: 456 } as ISbStoryData,
+        bridgeOptions: {},
+      }),
+    );
+
+    expect(container.firstChild).toBeNull();
+    expect(loadStoryblokBridge).not.toHaveBeenCalled();
   });
 
-  it('should pass story id to useEffect dependencies', () => {
+  it('should load bridge and register when in visual editor', async () => {
+    vi.mocked(isVisualEditor).mockReturnValue(true);
+    vi.mocked(isBridgeLoaded).mockReturnValue(false);
+
     const story = { id: 789, uuid: 'test-uuid' } as ISbStoryData;
 
-    // This test is minimal because we can't easily test React hooks in unit tests
-    // Instead, we just verify the component doesn't throw errors with valid props
-    const renderFn = () => {
-      StoryblokLiveEditing({ story, bridgeOptions: { resolveRelations: ['test.relation'] } });
-    };
+    const { container } = render(
+      React.createElement(StoryblokLiveEditing, {
+        story,
+        bridgeOptions: { resolveRelations: ['test.relation'] },
+      }),
+    );
+
+    // Component should return null but load bridge
+    expect(container.firstChild).toBeNull();
 
-    expect(renderFn).not.toThrow();
+    // Wait for async bridge loading
+    await vi.waitFor(() => {
+      expect(loadStoryblokBridge).toHaveBeenCalled();
+    });
   });
 
   it('should handle null story gracefully', () => {
-    // @ts-expect-error - Testing invalid input
-    const renderFn = () => StoryblokLiveEditing({ story: null, bridgeOptions: {} });
+    vi.mocked(isVisualEditor).mockReturnValue(false);
+
+    const { container } = render(
+      React.createElement(StoryblokLiveEditing, {
+        // @ts-expect-error - Testing invalid input
+        story: null,
+        bridgeOptions: {},
+      }),
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should not load bridge when already loaded', () => {
+    vi.mocked(isVisualEditor).mockReturnValue(true);
+    vi.mocked(isBridgeLoaded).mockReturnValue(true);
+
+    render(
+      React.createElement(StoryblokLiveEditing, {
+        story: { id: 123, uuid: 'test' } as ISbStoryData,
+        bridgeOptions: {},
+      }),
+    );
 
-    // Should not throw an error with null story
-    expect(renderFn).not.toThrow();
-    expect(renderFn()).toBeNull();
+    // Since bridge is already loaded, we should not call loadStoryblokBridge
+    expect(loadStoryblokBridge).not.toHaveBeenCalled();
   });
 });

packages/react/src/__tests__/setup.ts

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+// Mock the browser environment
+Object.defineProperty(window, 'location', {
+  value: {
+    href: 'http://localhost:3000',
+    origin: 'http://localhost:3000',
+    protocol: 'http:',
+    hostname: 'localhost',
+    port: '3000',
+    pathname: '/',
+    search: '',
+    hash: '',
+    assign: vi.fn(),
+    replace: vi.fn(),
+    reload: vi.fn(),
+  },
+  writable: true,
+});
+
+Object.defineProperty(window, 'self', {
+  value: window,
+  writable: true,
+});
+
+Object.defineProperty(window, 'top', {
+  value: window,
+  writable: true,
+});
+
+// Mock console methods to reduce noise in tests
+globalThis.console = {
+  ...console,
+  warn: vi.fn(),
+  error: vi.fn(),
+};

packages/react/src/rsc/live-editing.tsx

@@ -6,6 +6,12 @@ import { liveEditUpdateAction } from './live-edit-update-action';
 import { isBridgeLoaded, isVisualEditor } from '../utils';
 
 const StoryblokLiveEditing = ({ story = null, bridgeOptions = {} }: { story: ISbStoryData; bridgeOptions?: StoryblokBridgeConfigV2 }) => {
+  const inVisualEditor = isVisualEditor();
+
+  if (!inVisualEditor) {
+    return null;
+  }
+
   const storyId = story?.id ?? 0;
   useEffect(() => {
     (async () => {

packages/react/vitest.config.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/__tests__/setup.ts'],
+    globals: true,
+  },
+});