@sanity/sdk-react 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -42,7 +42,7 @@
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
-    "@sanity/client": "^7.10.0",
+    "@sanity/client": "^7.12.0",
     "@sanity/message-protocol": "^0.12.0",
     "@sanity/types": "^3.83.0",
     "@types/lodash-es": "^4.17.12",
@@ -51,7 +51,7 @@
     "react-compiler-runtime": "19.1.0-rc.2",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "2.2.0"
+    "@sanity/sdk": "2.3.0"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
@@ -66,6 +66,7 @@
     "@vitest/coverage-v8": "3.1.2",
     "babel-plugin-react-compiler": "19.1.0-rc.1",
     "eslint": "^9.22.0",
+    "groq-js": "^1.19.0",
     "jsdom": "^25.0.1",
     "prettier": "^3.5.3",
     "react": "^19.1.0",
@@ -77,8 +78,8 @@
     "@repo/config-eslint": "0.0.0",
     "@repo/config-test": "0.0.1",
     "@repo/package.bundle": "3.82.0",
-    "@repo/tsconfig": "0.0.1",
-    "@repo/package.config": "0.0.1"
+    "@repo/package.config": "0.0.1",
+    "@repo/tsconfig": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/auth/AuthBoundary.test.tsx

@@ -8,7 +8,6 @@ import {ResourceProvider} from '../../context/ResourceProvider'
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLoginUrl} from '../../hooks/auth/useLoginUrl'
 import {useVerifyOrgProjects} from '../../hooks/auth/useVerifyOrgProjects'
-import {useSanityInstance} from '../../hooks/context/useSanityInstance'
 import {AuthBoundary} from './AuthBoundary'
 
 // Mock hooks
@@ -23,9 +22,6 @@ vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
 vi.mock('../../hooks/auth/useLogOut', () => ({
   useLogOut: vi.fn(() => async () => {}),
 }))
-vi.mock('../../hooks/context/useSanityInstance', () => ({
-  useSanityInstance: vi.fn(),
-}))
 
 // Mock AuthError throwing scenario
 vi.mock('./AuthError', async (importOriginal) => {
@@ -109,7 +105,6 @@ describe('AuthBoundary', () => {
   const mockUseAuthState = vi.mocked(useAuthState)
   const mockUseLoginUrl = vi.mocked(useLoginUrl)
   const mockUseVerifyOrgProjects = vi.mocked(useVerifyOrgProjects)
-  const mockUseSanityInstance = vi.mocked(useSanityInstance)
   const testProjectIds = ['proj-test'] // Example project ID for tests
 
   // Mock Sanity instance
@@ -139,8 +134,6 @@ describe('AuthBoundary', () => {
     mockUseLoginUrl.mockReturnValue('http://example.com/login')
     // Default mock for useVerifyOrgProjects - returns null (no error)
     mockUseVerifyOrgProjects.mockImplementation(() => null)
-    // Mock useSanityInstance to return our mock instance
-    mockUseSanityInstance.mockReturnValue(mockSanityInstance)
   })
 
   afterEach(() => {
@@ -170,7 +163,9 @@ describe('AuthBoundary', () => {
       isExchangingToken: false,
     })
     const {container} = render(
-      <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>,
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
+      </ResourceProvider>,
     )
 
     // The callback screen renders null check that it renders nothing
@@ -184,7 +179,11 @@ describe('AuthBoundary', () => {
       currentUser: null,
       token: 'exampleToken',
     })
-    render(<AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>)
+    render(
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
+      </ResourceProvider>,
+    )
 
     expect(screen.getByText('Protected Content')).toBeInTheDocument()
   })
@@ -194,7 +193,11 @@ describe('AuthBoundary', () => {
       type: AuthStateType.ERROR,
       error: new Error('test error'),
     })
-    render(<AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>)
+    render(
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
+      </ResourceProvider>,
+    )
 
     // The AuthBoundary should throw an AuthError internally
     // and then display the LoginError component as the fallback.
@@ -207,7 +210,11 @@ describe('AuthBoundary', () => {
   })
 
   it('renders children when logged in and org verification passes', () => {
-    render(<AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>)
+    render(
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
+      </ResourceProvider>,
+    )
     expect(screen.getByText('Protected Content')).toBeInTheDocument()
   })
 
@@ -226,9 +233,11 @@ describe('AuthBoundary', () => {
 
     // Need to catch the error thrown during render. ErrorBoundary mock handles this.
     render(
-      <AuthBoundary verifyOrganization={true} projectIds={testProjectIds}>
-        <div>Protected Content</div>
-      </AuthBoundary>,
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary verifyOrganization={true} projectIds={testProjectIds}>
+          <div>Protected Content</div>
+        </AuthBoundary>
+      </ResourceProvider>,
     )
 
     // The ErrorBoundary's FallbackComponent should be rendered
@@ -256,9 +265,11 @@ describe('AuthBoundary', () => {
     })
 
     render(
-      <AuthBoundary verifyOrganization={false} projectIds={testProjectIds}>
-        <div>Protected Content</div>
-      </AuthBoundary>,
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary verifyOrganization={false} projectIds={testProjectIds}>
+          <div>Protected Content</div>
+        </AuthBoundary>
+      </ResourceProvider>,
     )
 
     // Should render children because verification is disabled
@@ -279,9 +290,11 @@ describe('AuthBoundary', () => {
     mockUseVerifyOrgProjects.mockImplementation(() => null)
 
     render(
-      <AuthBoundary projectIds={testProjectIds}>
-        <div>Protected Content</div>
-      </AuthBoundary>,
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary projectIds={testProjectIds}>
+          <div>Protected Content</div>
+        </AuthBoundary>
+      </ResourceProvider>,
     )
 
     await waitFor(() => {

package/src/components/auth/AuthBoundary.tsx

@@ -1,4 +1,5 @@
-import {AuthStateType} from '@sanity/sdk'
+import {CorsOriginError} from '@sanity/client'
+import {AuthStateType, getCorsErrorProjectId} from '@sanity/sdk'
 import {useEffect, useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
@@ -6,6 +7,7 @@ import {ComlinkTokenRefreshProvider} from '../../context/ComlinkTokenRefresh'
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLoginUrl} from '../../hooks/auth/useLoginUrl'
 import {useVerifyOrgProjects} from '../../hooks/auth/useVerifyOrgProjects'
+import {CorsErrorComponent} from '../errors/CorsErrorComponent'
 import {isInIframe} from '../utils'
 import {AuthError} from './AuthError'
 import {ConfigurationError} from './ConfigurationError'
@@ -107,6 +109,14 @@ export function AuthBoundary({
 }: AuthBoundaryProps): React.ReactNode {
   const FallbackComponent = useMemo(() => {
     return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {
+      if (fallbackProps.error instanceof CorsOriginError) {
+        return (
+          <CorsErrorComponent
+            {...fallbackProps}
+            projectId={getCorsErrorProjectId(fallbackProps.error)}
+          />
+        )
+      }
       return <LoginErrorComponent {...fallbackProps} />
     }
   }, [LoginErrorComponent])

package/src/components/auth/LoginError.tsx

@@ -5,6 +5,7 @@ import {type FallbackProps} from 'react-error-boundary'
 
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLogOut} from '../../hooks/auth/useLogOut'
+import {Error} from '../errors/Error'
 import {AuthError} from './AuthError'
 import {ConfigurationError} from './ConfigurationError'
 /**
@@ -59,17 +60,13 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
   }, [authState, handleRetry, error])
 
   return (
-    <div className="sc-login-error">
-      <div className="sc-login-error__content">
-        <h2 className="sc-login-error__title">
-          {error instanceof AuthError ? 'Authentication Error' : 'Configuration Error'}
-        </h2>
-        <p className="sc-login-error__description">{authErrorMessage}</p>
-      </div>
-
-      <button className="sc-login-error__button" onClick={handleRetry}>
-        Retry
-      </button>
-    </div>
+    <Error
+      heading={error instanceof AuthError ? 'Authentication Error' : 'Configuration Error'}
+      description={authErrorMessage}
+      cta={{
+        text: 'Retry',
+        onClick: handleRetry,
+      }}
+    />
   )
 }

package/src/components/errors/CorsErrorComponent.test.tsx

@@ -0,0 +1,48 @@
+import {describe, expect, it} from 'vitest'
+
+import {render, screen} from '../../../test/test-utils'
+import {CorsErrorComponent} from './CorsErrorComponent'
+
+describe('CorsErrorComponent', () => {
+  it('shows origin and manage link when projectId is provided', () => {
+    const origin = 'https://example.com'
+    const originalLocation = window.location
+    // Redefine window.location to control origin in this test
+    Object.defineProperty(window, 'location', {
+      value: {origin},
+      configurable: true,
+    })
+
+    render(
+      <CorsErrorComponent
+        projectId="proj123"
+        error={new Error('nope')}
+        resetErrorBoundary={() => {}}
+      />,
+    )
+
+    expect(screen.getByText('Before you continue…')).toBeInTheDocument()
+    expect(screen.getByText(origin)).toBeInTheDocument()
+
+    const link = screen.getByRole('link', {name: 'Manage CORS configuration'}) as HTMLAnchorElement
+    expect(link).toBeInTheDocument()
+    expect(link.target).toBe('_blank')
+    expect(link.rel).toContain('noopener')
+    expect(link.href).toContain('https://sanity.io/manage/project/proj123/api')
+    expect(link.href).toContain('cors=add')
+    expect(link.href).toContain(`origin=${encodeURIComponent(origin)}`)
+    expect(link.href).toContain('credentials=include')
+
+    // restore
+    Object.defineProperty(window, 'location', {value: originalLocation})
+  })
+
+  it('shows error message when projectId is null', () => {
+    const error = new Error('some error message')
+    render(<CorsErrorComponent projectId={null} error={error} resetErrorBoundary={() => {}} />)
+
+    expect(screen.getByText('Before you continue…')).toBeInTheDocument()
+    expect(screen.getByText('some error message')).toBeInTheDocument()
+    expect(screen.queryByRole('link', {name: 'Manage CORS configuration'})).toBeNull()
+  })
+})

package/src/components/errors/CorsErrorComponent.tsx

@@ -0,0 +1,37 @@
+import {useMemo} from 'react'
+import {type FallbackProps} from 'react-error-boundary'
+
+import {Error} from './Error'
+
+type CorsErrorComponentProps = FallbackProps & {
+  projectId: string | null
+}
+
+export function CorsErrorComponent({projectId, error}: CorsErrorComponentProps): React.ReactNode {
+  const origin = window.location.origin
+  const corsUrl = useMemo(() => {
+    const url = new URL(`https://sanity.io/manage/project/${projectId}/api`)
+    url.searchParams.set('cors', 'add')
+    url.searchParams.set('origin', origin)
+    url.searchParams.set('credentials', 'include')
+    return url.toString()
+  }, [origin, projectId])
+  return (
+    <Error
+      heading="Before you continue…"
+      {...(projectId
+        ? {
+            description:
+              'To access your content, you need to <strong>add the following URL as a CORS origin</strong> to your Sanity project.',
+            code: origin,
+            cta: {
+              text: 'Manage CORS configuration',
+              href: corsUrl,
+            },
+          }
+        : {
+            description: error?.message,
+          })}
+    />
+  )
+}

package/src/components/errors/Error.styles.ts

@@ -0,0 +1,35 @@
+const FONT_SANS_SERIF = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif`
+const FONT_MONOSPACE = `-apple-system-ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace`
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    padding: '28px',
+    fontFamily: FONT_SANS_SERIF,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '21px',
+    fontSize: '14px',
+  },
+  heading: {
+    margin: 0,
+    fontSize: '28px',
+    fontWeight: 700,
+  },
+  paragraph: {
+    margin: 0,
+  },
+  link: {
+    appearance: 'none',
+    background: 'transparent',
+    border: 0,
+    padding: 0,
+    font: 'inherit',
+    textDecoration: 'underline',
+    cursor: 'pointer',
+  },
+  code: {
+    fontFamily: FONT_MONOSPACE,
+  },
+}
+
+export default styles

package/src/components/errors/Error.tsx

@@ -0,0 +1,40 @@
+import styles from './Error.styles'
+
+type ErrorProps = {
+  heading: string
+  description?: string
+  code?: string
+  cta?: {
+    text: string
+    href?: string
+    onClick?: () => void
+  }
+}
+
+export function Error({heading, description, code, cta}: ErrorProps): React.ReactNode {
+  return (
+    <div style={styles['container']}>
+      <h1 style={styles['heading']}>{heading}</h1>
+
+      {description && (
+        <p style={styles['paragraph']} dangerouslySetInnerHTML={{__html: description}} />
+      )}
+
+      {code && <code style={styles['code']}>{code}</code>}
+
+      {cta && (cta.href || cta.onClick) && (
+        <p style={styles['paragraph']}>
+          {cta.href ? (
+            <a style={styles['link']} href={cta.href} target="_blank" rel="noopener noreferrer">
+              {cta.text}
+            </a>
+          ) : (
+            <button style={styles['link']} onClick={cta.onClick}>
+              {cta.text}
+            </button>
+          )}
+        </p>
+      )}
+    </div>
+  )
+}

package/src/context/ComlinkTokenRefresh.test.tsx

@@ -5,8 +5,8 @@ import {afterEach, beforeEach, describe, expect, it, type Mock, vi} from 'vitest
 
 import {useAuthState} from '../hooks/auth/useAuthState'
 import {useWindowConnection} from '../hooks/comlink/useWindowConnection'
-import {useSanityInstance} from '../hooks/context/useSanityInstance'
 import {ComlinkTokenRefreshProvider} from './ComlinkTokenRefresh'
+import {ResourceProvider} from './ResourceProvider'
 
 // Mocks
 vi.mock('@sanity/sdk', async () => {
@@ -26,20 +26,13 @@ vi.mock('../hooks/comlink/useWindowConnection', () => ({
   useWindowConnection: vi.fn(),
 }))
 
-vi.mock('../hooks/context/useSanityInstance', () => ({
-  useSanityInstance: vi.fn(),
-}))
-
 // Use simpler mock typings
 const mockGetIsInDashboardState = getIsInDashboardState as Mock
 const mockSetAuthToken = setAuthToken as Mock
 const mockUseAuthState = useAuthState as Mock
 const mockUseWindowConnection = useWindowConnection as Mock
-const mockUseSanityInstance = useSanityInstance as Mock
 
 const mockFetch = vi.fn()
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mockSanityInstance: any = {projectId: 'test', dataset: 'test'}
 
 describe('ComlinkTokenRefresh', () => {
   beforeEach(() => {
@@ -47,7 +40,6 @@ describe('ComlinkTokenRefresh', () => {
     mockGetIsInDashboardState.mockReturnValue({getCurrent: vi.fn(() => false)})
     mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN})
     mockUseWindowConnection.mockReturnValue({fetch: mockFetch})
-    mockUseSanityInstance.mockReturnValue(mockSanityInstance)
   })
 
   afterEach(() => {
@@ -64,9 +56,11 @@ describe('ComlinkTokenRefresh', () => {
       it('should not request new token on 401 if not in dashboard', async () => {
         mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN})
         const {rerender} = render(
-          <ComlinkTokenRefreshProvider>
-            <div>Test</div>
-          </ComlinkTokenRefreshProvider>,
+          <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+            <ComlinkTokenRefreshProvider>
+              <div>Test</div>
+            </ComlinkTokenRefreshProvider>
+          </ResourceProvider>,
         )
 
         mockUseAuthState.mockReturnValue({
@@ -75,9 +69,11 @@ describe('ComlinkTokenRefresh', () => {
         })
         act(() => {
           rerender(
-            <ComlinkTokenRefreshProvider>
-              <div>Test</div>
-            </ComlinkTokenRefreshProvider>,
+            <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+              <ComlinkTokenRefreshProvider>
+                <div>Test</div>
+              </ComlinkTokenRefreshProvider>
+            </ResourceProvider>,
           )
         })
 
@@ -95,9 +91,11 @@ describe('ComlinkTokenRefresh', () => {
 
       it('should initialize useWindowConnection with correct parameters', () => {
         render(
-          <ComlinkTokenRefreshProvider>
-            <div>Test</div>
-          </ComlinkTokenRefreshProvider>,
+          <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+            <ComlinkTokenRefreshProvider>
+              <div>Test</div>
+            </ComlinkTokenRefreshProvider>
+          </ResourceProvider>,
         )
 
         expect(mockUseWindowConnection).toHaveBeenCalledWith(
@@ -116,16 +114,18 @@ describe('ComlinkTokenRefresh', () => {
         mockFetch.mockResolvedValueOnce({token: 'new-token'})
 
         render(
-          <ComlinkTokenRefreshProvider>
-            <div>Test</div>
-          </ComlinkTokenRefreshProvider>,
+          <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+            <ComlinkTokenRefreshProvider>
+              <div>Test</div>
+            </ComlinkTokenRefreshProvider>
+          </ResourceProvider>,
         )
 
         await act(async () => {
           await vi.advanceTimersByTimeAsync(100)
         })
 
-        expect(mockSetAuthToken).toHaveBeenCalledWith(mockSanityInstance, 'new-token')
+        expect(mockSetAuthToken).toHaveBeenCalledWith(expect.any(Object), 'new-token')
         expect(mockFetch).toHaveBeenCalledTimes(1)
       })
 
@@ -137,9 +137,11 @@ describe('ComlinkTokenRefresh', () => {
         mockFetch.mockResolvedValueOnce({token: null})
 
         render(
-          <ComlinkTokenRefreshProvider>
-            <div>Test</div>
-          </ComlinkTokenRefreshProvider>,
+          <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+            <ComlinkTokenRefreshProvider>
+              <div>Test</div>
+            </ComlinkTokenRefreshProvider>
+          </ResourceProvider>,
         )
 
         await act(async () => {
@@ -157,9 +159,11 @@ describe('ComlinkTokenRefresh', () => {
         mockFetch.mockRejectedValueOnce(new Error('Fetch failed'))
 
         render(
-          <ComlinkTokenRefreshProvider>
-            <div>Test</div>
-          </ComlinkTokenRefreshProvider>,
+          <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+            <ComlinkTokenRefreshProvider>
+              <div>Test</div>
+            </ComlinkTokenRefreshProvider>
+          </ResourceProvider>,
         )
 
         await act(async () => {
@@ -173,9 +177,12 @@ describe('ComlinkTokenRefresh', () => {
         it('should not request new token for non-401 errors', async () => {
           mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN})
           const {rerender} = render(
-            <ComlinkTokenRefreshProvider>
-              <div>Test</div>
-            </ComlinkTokenRefreshProvider>,
+            <ResourceProvider fallback={null}>
+              <ComlinkTokenRefreshProvider>
+                <div>Test</div>
+              </ComlinkTokenRefreshProvider>
+              ,
+            </ResourceProvider>,
           )
 
           mockUseAuthState.mockReturnValue({
@@ -184,9 +191,11 @@ describe('ComlinkTokenRefresh', () => {
           })
           act(() => {
             rerender(
-              <ComlinkTokenRefreshProvider>
-                <div>Test</div>
-              </ComlinkTokenRefreshProvider>,
+              <ResourceProvider fallback={null}>
+                <ComlinkTokenRefreshProvider>
+                  <div>Test</div>
+                </ComlinkTokenRefreshProvider>
+              </ResourceProvider>,
             )
           })
 
@@ -199,17 +208,21 @@ describe('ComlinkTokenRefresh', () => {
         it('should request new token on LOGGED_OUT state', async () => {
           mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN})
           const {rerender} = render(
-            <ComlinkTokenRefreshProvider>
-              <div>Test</div>
-            </ComlinkTokenRefreshProvider>,
+            <ResourceProvider fallback={null}>
+              <ComlinkTokenRefreshProvider>
+                <div>Test</div>
+              </ComlinkTokenRefreshProvider>
+            </ResourceProvider>,
           )
 
           mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_OUT})
           act(() => {
             rerender(
-              <ComlinkTokenRefreshProvider>
-                <div>Test</div>
-              </ComlinkTokenRefreshProvider>,
+              <ResourceProvider fallback={null}>
+                <ComlinkTokenRefreshProvider>
+                  <div>Test</div>
+                </ComlinkTokenRefreshProvider>
+              </ResourceProvider>,
             )
           })
 

package/src/hooks/auth/useDashboardOrganizationId.test.tsx

@@ -1,14 +1,11 @@
-import {createSanityInstance, getDashboardOrganizationId} from '@sanity/sdk'
+import {getDashboardOrganizationId} from '@sanity/sdk'
 import {renderHook} from '@testing-library/react'
 import {throwError} from 'rxjs'
 import {describe, expect, it, vi} from 'vitest'
 
+import {ResourceProvider} from '../../context/ResourceProvider'
 import {useDashboardOrganizationId} from './useDashboardOrganizationId'
 
-vi.mock('../context/useSanityInstance', () => ({
-  useSanityInstance: vi.fn().mockReturnValue(createSanityInstance({projectId: 'p', dataset: 'd'})),
-}))
-
 vi.mock('@sanity/sdk', async (importOriginal) => {
   const actual = await importOriginal()
   return {...(actual || {}), getDashboardOrganizationId: vi.fn()}
@@ -23,7 +20,13 @@ describe('useDashboardOrganizationId', () => {
       observable: throwError(() => new Error('Unexpected usage of observable')),
     })
 
-    const {result} = renderHook(() => useDashboardOrganizationId())
+    const {result} = renderHook(() => useDashboardOrganizationId(), {
+      wrapper: ({children}) => (
+        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+          {children}
+        </ResourceProvider>
+      ),
+    })
     expect(result.current).toBeUndefined()
   })
 
@@ -36,7 +39,13 @@ describe('useDashboardOrganizationId', () => {
       observable: throwError(() => new Error('Unexpected usage of observable')),
     })
 
-    const {result} = renderHook(() => useDashboardOrganizationId())
+    const {result} = renderHook(() => useDashboardOrganizationId(), {
+      wrapper: ({children}) => (
+        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+          {children}
+        </ResourceProvider>
+      ),
+    })
     expect(result.current).toBe(mockOrgId)
   })
 })