@shopify/ui-extensions-server-kit 5.4.0 → 5.4.1

package/node_modules/@vitejs/plugin-react/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@vitejs/plugin-react",
+  "version": "5.1.4",
+  "description": "The default Vite plugin for React projects",
+  "keywords": [
+    "babel",
+    "fast refresh",
+    "react",
+    "react-refresh",
+    "vite",
+    "vite-plugin"
+  ],
+  "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
+  "bugs": {
+    "url": "https://github.com/vitejs/vite-plugin-react/issues"
+  },
+  "license": "MIT",
+  "author": "Evan You",
+  "contributors": [
+    "Alec Larson",
+    "Arnaud Barré"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitejs/vite-plugin-react.git",
+    "directory": "packages/plugin-react"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./preamble": "./types/preamble.d.ts"
+  },
+  "scripts": {
+    "dev": "tsdown --watch ./src --watch ../common",
+    "build": "tsdown",
+    "prepublishOnly": "npm run build",
+    "test-unit": "vitest run"
+  },
+  "dependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+    "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+    "@rolldown/pluginutils": "1.0.0-rc.3",
+    "@types/babel__core": "^7.20.5",
+    "react-refresh": "^0.18.0"
+  },
+  "devDependencies": {
+    "@vitejs/react-common": "workspace:*",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "rolldown": "1.0.0-rc.3",
+    "tsdown": "^0.20.3"
+  },
+  "peerDependencies": {
+    "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "compatiblePackages": {
+    "schemaVersion": 1,
+    "rolldown": {
+      "type": "compatible",
+      "versions": "^1.0.0-beta.44",
+      "note": "You can use Rolldown's built-in feature directly."
+    },
+    "rollup": {
+      "type": "incompatible",
+      "reason": "Uses Rolldown-specific APIs or Vite-specific APIs"
+    }
+  }
+}

package/node_modules/@vitejs/plugin-react/types/preamble.d.ts

@@ -0,0 +1 @@
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/ui-extensions-server-kit",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -43,17 +43,16 @@
     }
   },
   "devDependencies": {
-    "@shopify/react-testing": "^3.0.0",
-    "@shopify/ui-extensions-test-utils": "3.26.0",
-    "@types/react": "17.0.2",
-    "@vitejs/plugin-react-refresh": "^1.3.6",
-    "jsdom": "^20.0.3",
-    "react": "^17.0.2",
-    "vi-fetch": "^0.8.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.2.0",
+    "@vitejs/plugin-react": "^5.1.4",
+    "jsdom": "^25.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "vite": "6.4.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": ">=17.0.2"
   },
   "scripts": {
     "build": "nx build",

package/project.json

@@ -17,7 +17,7 @@
       "executor": "nx:run-commands",
       "outputs": ["{workspaceRoot}/dist"],
       "options": {
-        "command": "pnpm vite build --config vite.config.ts",
+        "command": "pnpm vite build --config vite.config.mts",
         "cwd": "packages/ui-extensions-server-kit"
       }
     },

package/src/ExtensionServerClient/ExtensionServerClient.test.ts

@@ -1,8 +1,9 @@
 import {ExtensionServerClient} from './ExtensionServerClient'
 import {DeepPartial} from '../types'
 import {mockApp} from '../testing'
-import {beforeEach, expect, test, vi, describe} from 'vitest'
+
 import {Localization} from 'i18n.js'
+import {beforeEach, expect, test, vi, describe} from 'vitest'
 
 // Mock React's act function because jest-websocket-mock tries to use it
 vi.mock('react-dom/test-utils', () => ({
@@ -51,7 +52,7 @@ class MockWebSocket implements Partial<WebSocket> {
   onmessage: ((ev: MessageEvent) => any) | null = null
   onclose: ((ev: CloseEvent) => any) | null = null
   server: MockWebSocketServer
-  private eventListeners: {[key: string]: Set<EventListener>} = {
+  private eventListeners: Record<string, Set<EventListener>> = {
     open: new Set(),
     message: new Set(),
     close: new Set(),
@@ -1032,7 +1033,7 @@ describe('ExtensionServerClient', () => {
       mockSocketServer.connect(mockSocket)
 
       // Persist data
-      const extensionData = {extensions: [{uuid: '123'}]}
+      const extensionData = {extensions: [{uuid: '123'}]} as any
       client.persist('update', extensionData)
 
       // Verify the correct message was sent
@@ -1092,7 +1093,7 @@ describe('ExtensionServerClient', () => {
             extensionPoints: [{localization: {}, name: 'いらっしゃいませ!', description: '拡張子の説明'}],
           },
         ],
-      }
+      } as any
 
       // Persist the data
       client.persist('update', extensionData)
@@ -1125,7 +1126,7 @@ describe('ExtensionServerClient', () => {
       // Create data with localization fields
       const extensionData = {
         extensions: [{uuid: '123', type: 'ui_extension', localization: {}, extensionPoints: [{localization: {}}]}],
-      }
+      } as any
 
       // Persist the data
       client.persist('update', extensionData)

package/src/ExtensionServerClient/ExtensionServerClient.ts

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/no-dynamic-delete */
 /* eslint-disable no-console */
-import {Surface} from './types.js'
 import {ExtensionServer} from './server-types.js'
+import {Surface} from './types.js'
 import {
   FlattenedLocalization,
   Localization,
@@ -21,12 +20,16 @@ export class ExtensionServerClient implements ExtensionServer.Client {
 
   protected EVENT_THAT_WILL_MUTATE_THE_SERVER = ['update']
 
-  protected listeners: {[key: string]: Set<any>} = {}
-  protected connectionListeners: {close: Set<any>; open: Set<any>} = {close: new Set(), open: new Set()}
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  protected listeners: Record<string, Set<(payload: any) => void>> = {}
+  protected connectionListeners: {close: Set<(event: Event) => void>; open: Set<(event: Event) => void>} = {
+    close: new Set(),
+    open: new Set(),
+  }
 
   protected connected = false
 
-  private uiExtensionsByUuid: {[key: string]: ExtensionServer.UIExtension} = {}
+  private uiExtensionsByUuid: Record<string, ExtensionServer.UIExtension> = {}
 
   constructor(options: DeepPartial<ExtensionServer.Options> = {}) {
     this.id = (Math.random() + 1).toString(36).substring(7)
@@ -47,7 +50,7 @@ export class ExtensionServerClient implements ExtensionServer.Client {
     const optionsChanged = JSON.stringify(newOptions) !== JSON.stringify(this.options)
 
     if (optionsChanged) {
-      this.options = newOptions
+      this.options = newOptions as ExtensionServer.Options
       this.setupConnection(true)
     }
 
@@ -102,14 +105,17 @@ export class ExtensionServerClient implements ExtensionServer.Client {
        * }
        * ```
        */
-      data.extensions?.forEach((extension: any) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ;(data as any).extensions?.forEach((extension: ExtensionPayload) => {
         TRANSLATED_KEYS.forEach((key) => {
           if (isUIExtension(extension)) {
             extension.extensionPoints?.forEach((extensionPoint) => {
-              delete extensionPoint[key as keyof ExtensionPoint]
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              delete (extensionPoint as any)[key]
             })
           }
-          delete extension[key as keyof ExtensionPayload]
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          delete (extension as any)[key]
         })
       })
       return this.connection?.send(JSON.stringify({event, data}))
@@ -119,7 +125,8 @@ export class ExtensionServerClient implements ExtensionServer.Client {
   }
 
   public emit<TEvent extends keyof ExtensionServer.DispatchEvents>(...args: ExtensionServer.EmitArgs<TEvent>): void {
-    const [event, data] = args
+    const event = args[0]
+    const data = args.length > 1 ? args[1] : undefined
 
     if (this.EVENT_THAT_WILL_MUTATE_THE_SERVER.includes(event as string)) {
       return console.warn(
@@ -156,19 +163,20 @@ export class ExtensionServerClient implements ExtensionServer.Client {
     this.connection?.addEventListener('message', (message) => {
       try {
         const {event, data} = JSON.parse(message.data) as ExtensionServer.ServerEvents
+        const typedData = data
 
         if (event === 'dispatch') {
-          const {type, payload} = data
+          const {type, payload} = typedData as {type: string; payload: unknown}
           this.listeners[type]?.forEach((listener) => listener(payload))
           return
         }
 
-        const filteredExtensions = data.extensions
-          ? filterExtensionsBySurface(data.extensions, this.options.surface)
-          : data.extensions
+        const filteredExtensions = typedData.extensions
+          ? filterExtensionsBySurface(typedData.extensions, this.options.surface)
+          : typedData.extensions
 
         this.listeners[event]?.forEach((listener) => {
-          listener({...data, extensions: this._getLocalizedExtensions(filteredExtensions)})
+          listener({...typedData, extensions: this._getLocalizedExtensions(filteredExtensions)})
         })
         // eslint-disable-next-line no-catch-all/no-catch-all
       } catch (err) {
@@ -213,9 +221,9 @@ export class ExtensionServerClient implements ExtensionServer.Client {
 
       const localization = shouldUpdateTranslations
         ? getFlattenedLocalization(extension.localization, this.options.locales)
-        : this.uiExtensionsByUuid[extension.uuid]?.localization ?? extension.localization
+        : (this.uiExtensionsByUuid[extension.uuid]?.localization ?? extension.localization)
 
-      const parsedTranslation: {[key: string]: string} =
+      const parsedTranslation: Record<string, string> =
         localization && isFlattenedTranslations(localization) ? JSON.parse(localization.translations) : localization
 
       const localizedExtension = {
@@ -260,7 +268,7 @@ export class ExtensionServerClient implements ExtensionServer.Client {
     })
   }
 
-  private _getLocalizedValue(translations: {[x: string]: string}, value: string): string {
+  private _getLocalizedValue(translations: Record<string, string>, value: string): string {
     const translationKey = value.replace('t:', '')
     return translations[translationKey] || value
   }
@@ -295,7 +303,7 @@ function filterExtensionsBySurface(extensions: ExtensionPayload[], surface: Surf
     }
 
     if (Array.isArray(extension.extensionPoints)) {
-      const extensionPoints: (string | {surface: Surface; [key: string]: any})[] = extension.extensionPoints
+      const extensionPoints = extension.extensionPoints as (string | {surface: Surface; [key: string]: unknown})[]
       const extensionPointMatchingSurface = extensionPoints.filter((extensionPoint) => {
         if (typeof extensionPoint === 'string') {
           return false

package/src/ExtensionServerClient/server-types.ts

@@ -1,7 +1,8 @@
 import {Surface} from './types.js'
-import {ExtensionPayload, ExtensionPoint} from '../types'
-import {FlattenedLocalization, Localization} from '../i18n'
+import {ExtensionPayload, ExtensionPoint, App} from '../types'
+import {FlattenedLocalization, LocalesOptions, Localization} from '../i18n'
 
+// Re-export and augment the global ExtensionServer namespace
 export namespace ExtensionServer {
   export interface UIExtension extends ExtensionPayload {
     extensionPoints: ExtensionPoint[]
@@ -29,24 +30,33 @@ export namespace ExtensionServer {
       protocols?: string | string[]
     }
     surface?: Surface
-    locales?: any
+    locales?: LocalesOptions
   }
 
   export interface ServerEvents {
     event: string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     data: any
   }
 
-  export interface InboundEvents {
-    [key: string]: any
+  export interface InboundEvents extends DispatchEvents {
+    dispatch: {type: keyof DispatchEvents; payload: DispatchEvents[keyof DispatchEvents]}
+    connected: {extensions: ExtensionPayload[]; app?: App; store: string}
+    update: {extensions?: ExtensionPayload[]; app?: App}
   }
 
   export interface OutboundPersistEvents {
-    [key: string]: any
+    update: {
+      extensions?: ExtensionPayload[]
+      app?: App
+    }
   }
 
   export interface DispatchEvents {
-    [key: string]: any
+    refresh: {uuid: string}[]
+    focus: {uuid: string}[]
+    unfocus: void
+    navigate: {url: string}
   }
 
   export type EmitArgs<TEvent extends keyof DispatchEvents> = undefined extends DispatchEvents[TEvent]

package/src/ExtensionServerClient/types.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-invalid-void-type */
-/* eslint-disable @typescript-eslint/no-empty-interface */
 import type {LocalesOptions} from '../i18n'
 
 declare global {

package/src/context/ExtensionServerProvider.test.tsx

@@ -1,17 +1,16 @@
 import {ExtensionServerProvider} from './ExtensionServerProvider'
-import {mockApp, mockExtension} from '../testing'
 import {useExtensionServerContext} from '../hooks'
 import {createConnectedAction} from '../state'
-import {renderHook, withProviders} from '@shopify/ui-extensions-test-utils'
+import {mockApp, mockExtension} from '../testing'
+import React from 'react'
 import {beforeEach, afterEach, expect} from 'vitest'
+import {renderHook, act} from '@testing-library/react'
 
-// Create a custom mock WebSocket implementation to avoid using jest-websocket-mock
 class MockWebSocketServer {
   clients: MockWebSocket[] = []
   messages: any[] = []
 
   connect(socket: MockWebSocket) {
-    // Make socket connection active
     this.clients.push(socket)
     socket.readyState = 1
     socket.onopen?.({} as Event)
@@ -28,7 +27,6 @@ class MockWebSocketServer {
   }
 
   close() {
-    // Close all socket connections
     this.clients.forEach((client) => {
       client.readyState = 3
       client.onclose?.({} as CloseEvent)
@@ -45,7 +43,7 @@ class MockWebSocket implements Partial<WebSocket> {
   onmessage: ((ev: MessageEvent) => any) | null = null
   onclose: ((ev: CloseEvent) => any) | null = null
   server: MockWebSocketServer
-  private eventListeners: {[key: string]: Set<EventListener>} = {
+  private eventListeners: Record<string, Set<EventListener>> = {
     open: new Set(),
     message: new Set(),
     close: new Set(),
@@ -63,7 +61,6 @@ class MockWebSocket implements Partial<WebSocket> {
     }
     this.eventListeners[type].add(listener)
 
-    // Map standard event handlers to addEventListener
     if (type === 'open' && this.onopen === null) {
       this.onopen = (event) => {
         this.eventListeners.open.forEach((listener) => listener(event))
@@ -113,27 +110,27 @@ class MockWebSocket implements Partial<WebSocket> {
   }
 }
 
-// Set up mock socket server and prepare for test environment
 let mockSocketServer: MockWebSocketServer
 let originalWebSocket: typeof WebSocket
 
-// Clear sockets before each test
+function createWrapper(options: {connection: {url?: string}}) {
+  return function Wrapper({children}: {children: React.ReactNode}) {
+    return <ExtensionServerProvider options={options}>{children}</ExtensionServerProvider>
+  }
+}
+
 beforeEach(() => {
   mockSocketServer = new MockWebSocketServer()
 
-  // Store original WebSocket and replace with our mock
   originalWebSocket = globalThis.WebSocket
 
-  // Mock WebSocket global
   globalThis.WebSocket = function (url: string) {
     const socket = new MockWebSocket(url, mockSocketServer)
     return socket as unknown as WebSocket
   } as unknown as typeof WebSocket
 })
 
-// Restore original WebSocket after each test
 afterEach(() => {
-  // Restore the original WebSocket
   globalThis.WebSocket = originalWebSocket
 })
 
@@ -142,17 +139,17 @@ describe('ExtensionServerProvider tests', () => {
     test('creates a new ExtensionServerClient instance', async () => {
       const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
 
-      const wrapper = renderHook(useExtensionServerContext, withProviders(ExtensionServerProvider), {options})
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
 
-      expect(wrapper.result.client).toBeDefined()
+      expect(result.current.client).toBeDefined()
     })
 
     test('does not start a new connection if an empty url is passed', async () => {
       const options = {connection: {}}
 
-      const wrapper = renderHook(useExtensionServerContext, withProviders(ExtensionServerProvider), {options})
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
 
-      expect(wrapper.result.client.connection).toBeUndefined()
+      expect(result.current.client.connection).toBeUndefined()
     })
   })
 
@@ -160,18 +157,13 @@ describe('ExtensionServerProvider tests', () => {
     test('starts a new connection by calling connect', async () => {
       const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
 
-      const wrapper = renderHook(useExtensionServerContext, withProviders(ExtensionServerProvider), {
-        options: {
-          connection: {url: ''},
-        },
+      const {result} = renderHook(useExtensionServerContext, {
+        wrapper: createWrapper({connection: {url: ''}}),
       })
 
-      // Execute the connect action
-      wrapper.act(({connect}) => connect(options))
+      act(() => result.current.connect(options))
 
-      // We won't rely on mockSocketServer.clients since the WebSocket mock might not be correctly added
-      // Just check that the connection object exists
-      expect(wrapper.result.client.connection).toBeDefined()
+      expect(result.current.client.connection).toBeDefined()
     })
   })
 
@@ -181,13 +173,14 @@ describe('ExtensionServerProvider tests', () => {
       const app = mockApp()
       const extension = mockExtension()
       const payload = {app, extensions: [extension], store: 'test-store.com'}
-      const wrapper = renderHook(useExtensionServerContext, withProviders(ExtensionServerProvider), {options})
 
-      wrapper.act(({dispatch}) => {
-        dispatch({type: 'connected', payload})
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch({type: 'connected', payload})
       })
 
-      expect(wrapper.result.state).toStrictEqual({
+      expect(result.current.state).toStrictEqual({
         app,
         extensions: [extension],
         store: 'test-store.com',
@@ -201,16 +194,14 @@ describe('ExtensionServerProvider tests', () => {
       const extension = mockExtension()
       const data = {app, store: 'test-store.com', extensions: [extension]}
       const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
-      const wrapper = renderHook(useExtensionServerContext, withProviders(ExtensionServerProvider), {options})
 
-      // Since we can't be sure the socket connection works properly in the test environment
-      // Initialize data through the dispatch action instead
-      wrapper.act(({dispatch}) => {
-        dispatch(createConnectedAction(data))
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch(createConnectedAction(data))
       })
 
-      // Verify state has been updated
-      expect(wrapper.result.state).toEqual({
+      expect(result.current.state).toEqual({
         app,
         extensions: [extension],
         store: 'test-store.com',
@@ -223,20 +214,18 @@ describe('ExtensionServerProvider tests', () => {
       const update = {...extension, version: 'v2'}
       const data = {app, store: 'test-store.com', extensions: [extension]}
       const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
-      const wrapper = renderHook(useExtensionServerContext, withProviders(ExtensionServerProvider), {options})
 
-      // Initialize state with connected data
-      wrapper.act(({dispatch}) => {
-        dispatch(createConnectedAction(data))
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch(createConnectedAction(data))
       })
 
-      // Update through dispatch rather than socket message
-      wrapper.act(({dispatch}) => {
-        dispatch(createConnectedAction({...data, extensions: [update]}))
+      act(() => {
+        result.current.dispatch(createConnectedAction({...data, extensions: [update]}))
       })
 
-      // Verify state has been updated
-      expect(wrapper.result.state).toEqual({
+      expect(result.current.state).toEqual({
         app,
         extensions: [update],
         store: 'test-store.com',
@@ -248,21 +237,19 @@ describe('ExtensionServerProvider tests', () => {
       const extension = mockExtension()
       const data = {app, store: 'test-store.com', extensions: [extension]}
       const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
-      const wrapper = renderHook(useExtensionServerContext, withProviders(ExtensionServerProvider), {options})
 
-      // Initialize state with connected data
-      wrapper.act(({dispatch}) => {
-        dispatch(createConnectedAction(data))
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch(createConnectedAction(data))
       })
 
-      // Verify state has been updated - the extension should still exist
-      expect(wrapper.result.state.extensions.length).toBe(1)
-      expect(wrapper.result.state.extensions[0].uuid).toBe(extension.uuid)
+      expect(result.current.state.extensions.length).toBe(1)
+      expect(result.current.state.extensions[0].uuid).toBe(extension.uuid)
     })
 
     test('persists focus data to the state', async () => {
       const app = mockApp()
-      // Create extension with development object that includes focused property
       const extension = {
         ...mockExtension(),
         development: {
@@ -272,15 +259,14 @@ describe('ExtensionServerProvider tests', () => {
       }
       const data = {app, store: 'test-store.com', extensions: [extension]}
       const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
-      const wrapper = renderHook(useExtensionServerContext, withProviders(ExtensionServerProvider), {options})
 
-      // Initialize state with connected data
-      wrapper.act(({dispatch}) => {
-        dispatch(createConnectedAction(data))
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch(createConnectedAction(data))
       })
 
-      // Update state to focus the extension
-      wrapper.act(({dispatch}) => {
+      act(() => {
         const focusedExtension = {
           ...extension,
           development: {
@@ -288,17 +274,15 @@ describe('ExtensionServerProvider tests', () => {
             focused: true,
           },
         }
-        dispatch(createConnectedAction({...data, extensions: [focusedExtension]}))
+        result.current.dispatch(createConnectedAction({...data, extensions: [focusedExtension]}))
       })
 
-      // Verify extension is now focused
-      const [updatedExtension] = wrapper.result.state.extensions
+      const [updatedExtension] = result.current.state.extensions
       expect(updatedExtension.development.focused).toBe(true)
     })
 
     test('persists unfocus data to the state', async () => {
       const app = mockApp()
-      // Set extension as initially focused
       const extension = {
         ...mockExtension(),
         development: {
@@ -309,15 +293,14 @@ describe('ExtensionServerProvider tests', () => {
 
       const data = {app, store: 'test-store.com', extensions: [extension]}
       const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
-      const wrapper = renderHook(useExtensionServerContext, withProviders(ExtensionServerProvider), {options})
 
-      // Initialize state with connected data
-      wrapper.act(({dispatch}) => {
-        dispatch(createConnectedAction(data))
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch(createConnectedAction(data))
       })
 
-      // Update state to unfocus the extension
-      wrapper.act(({dispatch}) => {
+      act(() => {
         const unfocusedExtension = {
           ...extension,
           development: {
@@ -325,11 +308,10 @@ describe('ExtensionServerProvider tests', () => {
             focused: false,
           },
         }
-        dispatch(createConnectedAction({...data, extensions: [unfocusedExtension]}))
+        result.current.dispatch(createConnectedAction({...data, extensions: [unfocusedExtension]}))
       })
 
-      // Verify extension is now unfocused
-      const [updatedExtension] = wrapper.result.state.extensions
+      const [updatedExtension] = result.current.state.extensions
       expect(updatedExtension.development.focused).toBe(false)
     })
   })

package/src/context/ExtensionServerProvider.tsx

@@ -11,6 +11,7 @@ import {ExtensionServerClient} from '../ExtensionServerClient'
 import {ExtensionServer} from '../ExtensionServerClient/server-types.js'
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect'
 import {useExtensionServerState} from '../hooks/useExtensionServerState'
+
 import React, {useCallback, useMemo, useState} from 'react'
 
 import type {ExtensionServerProviderProps} from './types'