chore(deps-dev): bump vitest from 3.2.4 to 4.0.6

packages/toolbar/package.json

@@ -101,7 +101,7 @@
     "storybook-addon-rslib": "^2.1.2",
     "storybook-react-rsbuild": "^2.1.2",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.2"
+    "vitest": "^4.0.7"
   },
   "peerDependencies": {
     "launchdarkly-js-client-sdk": ">=3.9.0 <4.0.0",

packages/toolbar/src/core/tests/DevServerProvider.test.tsx

@@ -1,10 +1,10 @@
+import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { expect, test, describe, vi, beforeEach } from 'vitest';
-
+import { expect, test, describe, vi, beforeEach, Mock } from 'vitest';
 import { DevServerProvider, useDevServerContext } from '../ui/Toolbar/context/DevServerProvider';
 
-// Mock the DevServerClient and FlagStateManager
-const mockDevServerClient = {
+// Create mock instances that we can access in tests
+const mockDevServerClientInstance = {
   getAvailableProjects: vi.fn().mockResolvedValue(['test-project']),
   setProjectKey: vi.fn(),
   getProjectKey: vi.fn().mockReturnValue('test-project'),
@@ -17,23 +17,37 @@ const mockDevServerClient = {
   }),
   setOverride: vi.fn(),
   clearOverride: vi.fn(),
-  healthCheck: vi.fn().mockResolvedValue(true),
 };
 
-const mockFlagStateManager = {
+const mockFlagStateManagerInstance = {
   getEnhancedFlags: vi.fn().mockResolvedValue({}),
   setOverride: vi.fn(),
   clearOverride: vi.fn(),
   subscribe: vi.fn().mockReturnValue(() => {}),
 };
 
-vi.mock('../services/DevServerClient', () => ({
-  DevServerClient: vi.fn().mockImplementation(() => mockDevServerClient),
-}));
+vi.mock('../services/DevServerClient', () => {
+  function MockDevServerClient() {
+    // Assign all methods to this instance
+    Object.assign(this, mockDevServerClientInstance);
+    return this;
+  }
+
+  return {
+    DevServerClient: MockDevServerClient,
+  };
+});
+
+vi.mock('../services/FlagStateManager', () => {
+  function MockFlagStateManager() {
+    Object.assign(this, mockFlagStateManagerInstance);
+    return this;
+  }
 
-vi.mock('../services/FlagStateManager', () => ({
-  FlagStateManager: vi.fn().mockImplementation(() => mockFlagStateManager),
-}));
+  return {
+    FlagStateManager: MockFlagStateManager,
+  };
+});
 
 // Test component that consumes the context
 function TestConsumer() {
@@ -54,6 +68,21 @@ describe('DevServerProvider - Integration Flows', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     localStorage.clear();
+
+    // Reset mock instances to default state
+    mockDevServerClientInstance.getAvailableProjects.mockResolvedValue(['test-project']);
+    mockDevServerClientInstance.setProjectKey.mockClear();
+    mockDevServerClientInstance.getProjectKey.mockReturnValue('test-project');
+    mockDevServerClientInstance.getProjectData.mockResolvedValue({
+      sourceEnvironmentKey: 'test-environment',
+      flagsState: {},
+      overrides: {},
+      availableVariations: {},
+      _lastSyncedFromSource: Date.now(),
+    });
+
+    mockFlagStateManagerInstance.getEnhancedFlags.mockResolvedValue({});
+    mockFlagStateManagerInstance.subscribe.mockReturnValue(() => {});
   });
 
   describe('Developer Setup Flow - Dev Server Mode', () => {
@@ -93,7 +122,7 @@ describe('DevServerProvider - Integration Flows', () => {
 
     test('developer specifies exact project and connects successfully', async () => {
       // GIVEN: Developer knows exactly which project they want to work with
-      mockDevServerClient.getAvailableProjects.mockResolvedValueOnce(['explicit-project', 'test-project']);
+      mockDevServerClientInstance.getAvailableProjects.mockResolvedValueOnce(['explicit-project', 'test-project']);
 
       // WHEN: They configure the toolbar with their specific project
       render(
@@ -114,12 +143,12 @@ describe('DevServerProvider - Integration Flows', () => {
         return connectionStatus.textContent === 'connected';
       });
 
-      expect(mockDevServerClient.setProjectKey).toHaveBeenCalledWith('explicit-project');
+      expect(mockDevServerClientInstance.setProjectKey).toHaveBeenCalledWith('explicit-project');
     });
 
     test('developer handles dev server connection issues gracefully', async () => {
       // GIVEN: Developer's dev server is not running or misconfigured
-      mockDevServerClient.getAvailableProjects.mockRejectedValueOnce(new Error('Connection failed'));
+      mockDevServerClientInstance.getAvailableProjects.mockRejectedValueOnce(new Error('Connection failed'));
 
       // WHEN: They try to connect with the toolbar
       render(
@@ -145,7 +174,7 @@ describe('DevServerProvider - Integration Flows', () => {
 
     test('developer handles network timeout errors during initial connection', async () => {
       // GIVEN: Developer's network connection is slow or unreliable
-      mockDevServerClient.getAvailableProjects.mockRejectedValueOnce(new Error('ETIMEDOUT: connect timeout'));
+      mockDevServerClientInstance.getAvailableProjects.mockRejectedValueOnce(new Error('ETIMEDOUT: connect timeout'));
 
       // WHEN: They attempt to connect with the toolbar
       render(
@@ -198,7 +227,7 @@ describe('DevServerProvider - Integration Flows', () => {
       expect(screen.getByTestId('error')).toHaveTextContent('none');
 
       // AND: Doesn't attempt to make server connections
-      expect(mockDevServerClient.getAvailableProjects).not.toHaveBeenCalled();
+      expect(mockDevServerClientInstance.getAvailableProjects).not.toHaveBeenCalled();
     });
   });
 });

packages/toolbar/src/core/tests/ExpandedToolbarContent.test.tsx

@@ -8,33 +8,51 @@ import { SearchProvider } from '../ui/Toolbar/context/SearchProvider';
 import { AnalyticsProvider } from '../ui/Toolbar/context/AnalyticsProvider';
 import { IEventInterceptionPlugin, IFlagOverridePlugin } from '../../types';
 
+// Create mock instances that we can access in tests
+const mockDevServerClientInstance = {
+  getAvailableProjects: vi.fn().mockResolvedValue(['test-project']),
+  setProjectKey: vi.fn(),
+  getProjectKey: vi.fn().mockReturnValue('test-project'),
+  getProjectData: vi.fn().mockResolvedValue({
+    sourceEnvironmentKey: 'test-environment',
+    flagsState: {},
+    overrides: {},
+    availableVariations: {},
+    _lastSyncedFromSource: Date.now(),
+  }),
+  setOverride: vi.fn(),
+  clearOverride: vi.fn(),
+};
+
+const mockFlagStateManagerInstance = {
+  getEnhancedFlags: vi.fn().mockResolvedValue({}),
+  setOverride: vi.fn(),
+  clearOverride: vi.fn(),
+  subscribe: vi.fn().mockReturnValue(() => {}),
+};
+
 // Mock the DevServerClient and FlagStateManager
-vi.mock('../services/DevServerClient', () => ({
-  DevServerClient: vi.fn().mockImplementation(() => ({
-    getAvailableProjects: vi.fn().mockResolvedValue(['test-project']),
-    setProjectKey: vi.fn(),
-    getProjectKey: vi.fn().mockReturnValue('test-project'),
-    getProjectData: vi.fn().mockResolvedValue({
-      sourceEnvironmentKey: 'test-environment',
-      flagsState: {},
-      overrides: {},
-      availableVariations: {},
-      _lastSyncedFromSource: Date.now(),
-    }),
-    setOverride: vi.fn(),
-    clearOverride: vi.fn(),
-    healthCheck: vi.fn().mockResolvedValue(true),
-  })),
-}));
+vi.mock('../services/DevServerClient', () => {
+  function MockDevServerClient() {
+    Object.assign(this, mockDevServerClientInstance);
+    return this;
+  }
+
+  return {
+    DevServerClient: MockDevServerClient,
+  };
+});
 
-vi.mock('../services/FlagStateManager', () => ({
-  FlagStateManager: vi.fn().mockImplementation(() => ({
-    getEnhancedFlags: vi.fn().mockResolvedValue({}),
-    setOverride: vi.fn(),
-    clearOverride: vi.fn(),
-    subscribe: vi.fn().mockReturnValue(() => {}),
-  })),
-}));
+vi.mock('../services/FlagStateManager', () => {
+  function MockFlagStateManager() {
+    Object.assign(this, mockFlagStateManagerInstance);
+    return this;
+  }
+
+  return {
+    FlagStateManager: MockFlagStateManager,
+  };
+});
 
 // Mock the tab content components
 vi.mock('../ui/Toolbar/TabContent/FlagDevServerTabContent', () => ({
@@ -129,6 +147,21 @@ describe('ExpandedToolbarContent - User Interaction Flows', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+
+    // Reset mock instances to default state
+    mockDevServerClientInstance.getAvailableProjects.mockResolvedValue(['test-project']);
+    mockDevServerClientInstance.setProjectKey.mockClear();
+    mockDevServerClientInstance.getProjectKey.mockReturnValue('test-project');
+    mockDevServerClientInstance.getProjectData.mockResolvedValue({
+      sourceEnvironmentKey: 'test-environment',
+      flagsState: {},
+      overrides: {},
+      availableVariations: {},
+      _lastSyncedFromSource: Date.now(),
+    });
+
+    mockFlagStateManagerInstance.getEnhancedFlags.mockResolvedValue({});
+    mockFlagStateManagerInstance.subscribe.mockReturnValue(() => {});
   });
 
   describe('Dev Server Mode - Server-Side Flag Management Flow', () => {

packages/toolbar/src/core/tests/LaunchDarklyToolbar.test.tsx

@@ -1,36 +1,43 @@
+import React from 'react';
 import { render, screen, fireEvent, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import { expect, test, describe, vi, beforeEach } from 'vitest';
-
 import { LaunchDarklyToolbar } from '../ui/Toolbar/LaunchDarklyToolbar';
 
 // Mock the DevServerClient to avoid actual network calls in tests
-vi.mock('../services/DevServerClient', () => ({
-  DevServerClient: vi.fn().mockImplementation(() => ({
-    getAvailableProjects: vi.fn().mockResolvedValue(['test-project']),
-    setProjectKey: vi.fn(),
-    getProjectKey: vi.fn().mockReturnValue('test-project'),
-    getProjectData: vi.fn().mockResolvedValue({
+vi.mock('../services/DevServerClient', () => {
+  function MockDevServerClient() {
+    this.getAvailableProjects = vi.fn().mockResolvedValue(['test-project']);
+    this.setProjectKey = vi.fn();
+    this.getProjectKey = vi.fn().mockReturnValue('test-project');
+    this.getProjectData = vi.fn().mockResolvedValue({
       sourceEnvironmentKey: 'test-environment',
       flagsState: {},
       overrides: {},
       availableVariations: {},
       _lastSyncedFromSource: Date.now(),
-    }),
-    setOverride: vi.fn(),
-    clearOverride: vi.fn(),
-    healthCheck: vi.fn().mockResolvedValue(true),
-  })),
-}));
+    });
+    this.setOverride = vi.fn();
+    this.clearOverride = vi.fn();
+  }
+
+  return {
+    DevServerClient: MockDevServerClient,
+  };
+});
 
 // Mock the FlagStateManager
-vi.mock('../services/FlagStateManager', () => ({
-  FlagStateManager: vi.fn().mockImplementation(() => ({
-    getEnhancedFlags: vi.fn().mockResolvedValue({}),
-    setOverride: vi.fn(),
-    clearOverride: vi.fn(),
-    subscribe: vi.fn().mockReturnValue(() => {}),
-  })),
-}));
+vi.mock('../services/FlagStateManager', () => {
+  function MockFlagStateManager() {
+    this.getEnhancedFlags = vi.fn().mockResolvedValue({});
+    this.setOverride = vi.fn();
+    this.clearOverride = vi.fn();
+    this.subscribe = vi.fn().mockReturnValue(() => {});
+  }
+
+  return {
+    FlagStateManager: MockFlagStateManager,
+  };
+});
 
 describe('LaunchDarklyToolbar - User Flows', () => {
   beforeEach(() => {

packages/toolbar/vitest.setup.ts

@@ -18,8 +18,10 @@ Object.defineProperty(window, 'scrollBy', {
 });
 
 // Mock ResizeObserver
-global.ResizeObserver = class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-};
+globalThis.ResizeObserver =
+  globalThis.ResizeObserver ||
+  class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };