improve mocks

Author: panteliselef

packages/shared/src/react/hooks/__tests__/createBillingPaginatedHook.spec.tsx

@@ -1,48 +1,19 @@
-import { QueryClient } from '@tanstack/query-core';
 import { renderHook, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { ClerkResource } from '../../../types';
 import { createBillingPaginatedHook } from '../createBillingPaginatedHook';
+import { createMockClerk, createMockOrganization, createMockQueryClient, createMockUser } from './mocks/clerk';
 import { wrapper } from './wrapper';
 
 // Mocks for contexts
-let mockUser: any = { id: 'user_1' };
-let mockOrganization: any = { id: 'org_1' };
-
-const defaultQueryClient = {
-  __tag: 'clerk-rq-client' as const,
-  client: new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-        staleTime: Infinity,
-        refetchOnWindowFocus: false,
-        refetchOnReconnect: false,
-        refetchOnMount: false,
-      },
-    },
-  }),
-};
-
-const mockClerk = {
-  loaded: true,
-  telemetry: { record: vi.fn() },
-  __unstable__environment: {
-    commerceSettings: {
-      billing: {
-        user: { enabled: true },
-        organization: { enabled: true },
-      },
-    },
-  },
-  on: vi.fn(),
-  off: vi.fn(),
-};
-
-Object.defineProperty(mockClerk, '__internal_queryClient', {
-  configurable: true,
-  get: vi.fn(() => defaultQueryClient),
+let mockUser: any = createMockUser();
+let mockOrganization: any = createMockOrganization();
+
+const defaultQueryClient = createMockQueryClient();
+
+const mockClerk = createMockClerk({
+  queryClient: defaultQueryClient,
 });
 
 vi.mock('../../contexts', () => {
@@ -85,8 +56,8 @@ describe('createBillingPaginatedHook', () => {
     mockClerk.loaded = true;
     mockClerk.__unstable__environment.commerceSettings.billing.user.enabled = true;
     mockClerk.__unstable__environment.commerceSettings.billing.organization.enabled = true;
-    mockUser = { id: 'user_1' };
-    mockOrganization = { id: 'org_1' };
+    mockUser = createMockUser();
+    mockOrganization = createMockOrganization();
     defaultQueryClient.client.clear();
   });
 

packages/shared/src/react/hooks/__tests__/mocks/clerk.ts

@@ -0,0 +1,63 @@
+import { QueryClient } from '@tanstack/query-core';
+import { vi } from 'vitest';
+
+/**
+ * Shared query client configuration for tests
+ */
+export function createMockQueryClient() {
+  return {
+    __tag: 'clerk-rq-client' as const,
+    client: new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+          staleTime: Infinity,
+          refetchOnWindowFocus: false,
+          refetchOnReconnect: false,
+          refetchOnMount: false,
+        },
+      },
+    }),
+  };
+}
+
+/**
+ * Simple mock Clerk factory with common properties
+ */
+export function createMockClerk(overrides: any = {}) {
+  const queryClient = overrides.queryClient || createMockQueryClient();
+
+  const mockClerk: any = {
+    loaded: true,
+    telemetry: { record: vi.fn() },
+    on: vi.fn(),
+    off: vi.fn(),
+    __unstable__environment: {
+      commerceSettings: {
+        billing: {
+          user: { enabled: true },
+          organization: { enabled: true },
+        },
+      },
+    },
+    ...overrides,
+  };
+
+  // Add query client as getter if not already set
+  if (!Object.getOwnPropertyDescriptor(mockClerk, '__internal_queryClient')) {
+    Object.defineProperty(mockClerk, '__internal_queryClient', {
+      get: vi.fn(() => queryClient),
+      configurable: true,
+    });
+  }
+
+  return mockClerk;
+}
+
+export function createMockUser(overrides: any = {}) {
+  return { id: 'user_1', ...overrides };
+}
+
+export function createMockOrganization(overrides: any = {}) {
+  return { id: 'org_1', ...overrides };
+}

packages/shared/src/react/hooks/__tests__/mocks/index.ts

@@ -0,0 +1 @@
+export { createMockClerk, createMockOrganization, createMockQueryClient, createMockUser } from './clerk';

packages/shared/src/react/hooks/__tests__/usePagesOrInfinite.spec.ts

@@ -1,36 +1,15 @@
-import { QueryClient } from '@tanstack/query-core';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { createDeferredPromise } from '../../../utils/createDeferredPromise';
 import { usePagesOrInfinite } from '../usePagesOrInfinite';
+import { createMockClerk, createMockQueryClient } from './mocks/clerk';
 import { wrapper } from './wrapper';
 
-const defaultQueryClient = {
-  __tag: 'clerk-rq-client' as const,
-  client: new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-        staleTime: Infinity,
-        refetchOnWindowFocus: false,
-        refetchOnReconnect: false,
-        refetchOnMount: false,
-      },
-    },
-  }),
-};
-
-const mockClerk = {
-  loaded: true,
-  telemetry: { record: vi.fn() },
-  on: vi.fn(),
-  off: vi.fn(),
-};
-
-Object.defineProperty(mockClerk, '__internal_queryClient', {
-  configurable: true,
-  get: vi.fn(() => defaultQueryClient),
+const defaultQueryClient = createMockQueryClient();
+
+const mockClerk = createMockClerk({
+  queryClient: defaultQueryClient,
 });
 
 vi.mock('../../contexts', () => {

packages/shared/src/react/hooks/__tests__/usePlans.spec.tsx

@@ -1,10 +1,11 @@
-import { QueryClient } from '@tanstack/query-core';
 import { render, renderHook, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-const mockUser: any = { id: 'user_1' };
-const mockOrganization: any = { id: 'org_1' };
+import { createMockClerk, createMockOrganization, createMockQueryClient, createMockUser } from './mocks/clerk';
+
+const mockUser: any = createMockUser();
+const mockOrganization: any = createMockOrganization();
 
 const getPlansSpy = vi.fn((args: any) =>
   Promise.resolve({
@@ -17,42 +18,13 @@ const getPlansSpy = vi.fn((args: any) =>
   }),
 );
 
-const defaultQueryClient = {
-  __tag: 'clerk-rq-client' as const,
-  client: new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-        staleTime: Infinity,
-        refetchOnWindowFocus: false,
-        refetchOnReconnect: false,
-        refetchOnMount: false,
-      },
-    },
-  }),
-};
+const defaultQueryClient = createMockQueryClient();
 
-const mockClerk = {
-  loaded: true,
+const mockClerk = createMockClerk({
   billing: {
     getPlans: getPlansSpy,
   },
-  telemetry: { record: vi.fn() },
-  __unstable__environment: {
-    commerceSettings: {
-      billing: {
-        user: { enabled: true },
-        organization: { enabled: true },
-      },
-    },
-  },
-  on: vi.fn(),
-  off: vi.fn(),
-};
-
-Object.defineProperty(mockClerk, '__internal_queryClient', {
-  configurable: true,
-  get: vi.fn(() => defaultQueryClient),
+  queryClient: defaultQueryClient,
 });
 
 vi.mock('../../contexts', () => {

packages/shared/src/react/hooks/__tests__/useSubscription.spec.tsx

@@ -1,13 +1,13 @@
-import { QueryClient } from '@tanstack/query-core';
 import { renderHook, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useSubscription } from '../useSubscription';
+import { createMockClerk, createMockOrganization, createMockQueryClient, createMockUser } from './mocks/clerk';
 import { wrapper } from './wrapper';
 
 // Dynamic mock state for contexts
-let mockUser: any = { id: 'user_1' };
-let mockOrganization: any = { id: 'org_1' };
+let mockUser: any = createMockUser();
+let mockOrganization: any = createMockOrganization();
 let userBillingEnabled = true;
 let orgBillingEnabled = true;
 
@@ -16,42 +16,21 @@ const getSubscriptionSpy = vi.fn((args?: { orgId?: string }) =>
   Promise.resolve({ id: args?.orgId ? `sub_org_${args.orgId}` : 'sub_user_user_1' }),
 );
 
-const mockClerk = {
-  loaded: true,
+const defaultQueryClient = createMockQueryClient();
+
+const mockClerk = createMockClerk({
   billing: {
     getSubscription: getSubscriptionSpy,
   },
-  telemetry: { record: vi.fn() },
-  __unstable__environment: {
+  environment: {
     commerceSettings: {
       billing: {
         user: { enabled: userBillingEnabled },
         organization: { enabled: orgBillingEnabled },
       },
     },
   },
-  on: vi.fn(),
-  off: vi.fn(),
-};
-
-const defaultQueryClient = {
-  __tag: 'clerk-rq-client' as const,
-  client: new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-        staleTime: Infinity,
-        refetchOnWindowFocus: false,
-        refetchOnReconnect: false,
-        refetchOnMount: false,
-      },
-    },
-  }),
-};
-
-Object.defineProperty(mockClerk, '__internal_queryClient', {
-  get: vi.fn(() => defaultQueryClient),
-  configurable: true,
+  queryClient: defaultQueryClient,
 });
 
 vi.mock('../../contexts', () => {
@@ -69,8 +48,8 @@ describe('useSubscription', () => {
     // Reset environment flags and state
     userBillingEnabled = true;
     orgBillingEnabled = true;
-    mockUser = { id: 'user_1' };
-    mockOrganization = { id: 'org_1' };
+    mockUser = createMockUser();
+    mockOrganization = createMockOrganization();
     mockClerk.__unstable__environment.commerceSettings.billing.user.enabled = userBillingEnabled;
     mockClerk.__unstable__environment.commerceSettings.billing.organization.enabled = orgBillingEnabled;
     defaultQueryClient.client.clear();