chore(clerk-js): Additional tests converted to vitest (#6796)

jacekradko · web-flow · commit 07e272401543 · 2025-09-16T16:58:29.000-05:00
diff --git a/.changeset/true-items-burn.md b/.changeset/true-items-burn.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/core/auth/cookies/__tests__/clientUat.spec.ts b/packages/clerk-js/src/core/auth/cookies/__tests__/clientUat.spec.ts
@@ -1,33 +1,34 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { addYears } from '@clerk/shared/date';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { inCrossOriginIframe } from '../../../../utils';
 import { getCookieDomain } from '../../getCookieDomain';
 import { getSecureAttribute } from '../../getSecureAttribute';
 import { createClientUatCookie } from '../clientUat';
 
-jest.mock('@clerk/shared/cookie');
-jest.mock('@clerk/shared/date');
-jest.mock('../../../../utils');
-jest.mock('../../getCookieDomain');
-jest.mock('../../getSecureAttribute');
+vi.mock('@clerk/shared/cookie');
+vi.mock('@clerk/shared/date');
+vi.mock('../../../../utils');
+vi.mock('../../getCookieDomain');
+vi.mock('../../getSecureAttribute');
 
 describe('createClientUatCookie', () => {
   const mockCookieSuffix = 'test-suffix';
   const mockExpires = new Date('2024-12-31');
   const mockDomain = 'test.domain';
-  const mockSet = jest.fn();
-  const mockRemove = jest.fn();
-  const mockGet = jest.fn();
+  const mockSet = vi.fn();
+  const mockRemove = vi.fn();
+  const mockGet = vi.fn();
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     mockGet.mockReset();
-    (addYears as jest.Mock).mockReturnValue(mockExpires);
-    (inCrossOriginIframe as jest.Mock).mockReturnValue(false);
-    (getCookieDomain as jest.Mock).mockReturnValue(mockDomain);
-    (getSecureAttribute as jest.Mock).mockReturnValue(true);
-    (createCookieHandler as jest.Mock).mockImplementation(() => ({
+    (addYears as ReturnType<typeof vi.fn>).mockReturnValue(mockExpires);
+    (inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(false);
+    (getCookieDomain as ReturnType<typeof vi.fn>).mockReturnValue(mockDomain);
+    (getSecureAttribute as ReturnType<typeof vi.fn>).mockReturnValue(true);
+    (createCookieHandler as ReturnType<typeof vi.fn>).mockImplementation(() => ({
       set: mockSet,
       remove: mockRemove,
       get: mockGet,
@@ -60,7 +61,7 @@ describe('createClientUatCookie', () => {
   });
 
   it('should set cookies with None sameSite in cross-origin context', () => {
-    (inCrossOriginIframe as jest.Mock).mockReturnValue(true);
+    (inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
     const cookieHandler = createClientUatCookie(mockCookieSuffix);
     cookieHandler.set({
       id: 'test-client',
diff --git a/packages/clerk-js/src/core/auth/cookies/__tests__/session.spec.ts b/packages/clerk-js/src/core/auth/cookies/__tests__/session.spec.ts
@@ -1,30 +1,31 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { addYears } from '@clerk/shared/date';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { inCrossOriginIframe } from '../../../../utils';
 import { getSecureAttribute } from '../../getSecureAttribute';
 import { createSessionCookie } from '../session';
 
-jest.mock('@clerk/shared/cookie');
-jest.mock('@clerk/shared/date');
-jest.mock('../../../../utils');
-jest.mock('../../getSecureAttribute');
+vi.mock('@clerk/shared/cookie');
+vi.mock('@clerk/shared/date');
+vi.mock('../../../../utils');
+vi.mock('../../getSecureAttribute');
 
 describe('createSessionCookie', () => {
   const mockCookieSuffix = 'test-suffix';
   const mockToken = 'test-token';
   const mockExpires = new Date('2024-12-31');
-  const mockSet = jest.fn();
-  const mockRemove = jest.fn();
-  const mockGet = jest.fn();
+  const mockSet = vi.fn();
+  const mockRemove = vi.fn();
+  const mockGet = vi.fn();
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     mockGet.mockReset();
-    (addYears as jest.Mock).mockReturnValue(mockExpires);
-    (inCrossOriginIframe as jest.Mock).mockReturnValue(false);
-    (getSecureAttribute as jest.Mock).mockReturnValue(true);
-    (createCookieHandler as jest.Mock).mockImplementation(() => ({
+    (addYears as ReturnType<typeof vi.fn>).mockReturnValue(mockExpires);
+    (inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(false);
+    (getSecureAttribute as ReturnType<typeof vi.fn>).mockReturnValue(true);
+    (createCookieHandler as ReturnType<typeof vi.fn>).mockImplementation(() => ({
       set: mockSet,
       remove: mockRemove,
       get: mockGet,
@@ -52,7 +53,7 @@ describe('createSessionCookie', () => {
   });
 
   it('should set cookies with None sameSite in cross-origin context', () => {
-    (inCrossOriginIframe as jest.Mock).mockReturnValue(true);
+    (inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
     const cookieHandler = createSessionCookie(mockCookieSuffix);
     cookieHandler.set(mockToken);
 
diff --git a/packages/clerk-js/src/core/resources/__tests__/Organization.spec.ts b/packages/clerk-js/src/core/resources/__tests__/Organization.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { Organization } from '../internal';
 
 describe('Organization', () => {
diff --git a/packages/clerk-js/src/core/resources/__tests__/OrganizationDomain.spec.ts b/packages/clerk-js/src/core/resources/__tests__/OrganizationDomain.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { OrganizationDomain } from '../internal';
 
 describe('OrganizationDomain', () => {
diff --git a/packages/clerk-js/src/core/resources/__tests__/OrganizationInvitation.spec.ts b/packages/clerk-js/src/core/resources/__tests__/OrganizationInvitation.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { OrganizationInvitation } from '../internal';
 
 describe('OrganizationInvitation', () => {
diff --git a/packages/clerk-js/src/core/resources/__tests__/OrganizationMembership.spec.ts b/packages/clerk-js/src/core/resources/__tests__/OrganizationMembership.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { OrganizationMembership } from '../internal';
 
 describe('OrganizationMembership', () => {
diff --git a/packages/clerk-js/src/core/resources/__tests__/OrganizationMembershipRequest.spec.ts b/packages/clerk-js/src/core/resources/__tests__/OrganizationMembershipRequest.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { OrganizationMembershipRequest } from '../internal';
 
 describe('OrganizationMembership', () => {
diff --git a/packages/clerk-js/src/core/resources/__tests__/OrganizationSuggestion.spec.ts b/packages/clerk-js/src/core/resources/__tests__/OrganizationSuggestion.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { OrganizationSuggestion } from '../internal';
 
 describe('OrganizationSuggestion', () => {
diff --git a/packages/clerk-js/src/core/resources/__tests__/PublicUserData.spec.ts b/packages/clerk-js/src/core/resources/__tests__/PublicUserData.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { PublicUserData } from '../PublicUserData';
 
 describe('PublicUserData', () => {
diff --git a/packages/clerk-js/src/core/resources/__tests__/Waitlist.spec.ts b/packages/clerk-js/src/core/resources/__tests__/Waitlist.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { Waitlist } from '../internal';
 
 describe('Waitlist', () => {
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/utils.spec.ts b/packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/utils.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { populateCacheRemoveItem, populateCacheUpdateItem } from '../utils';
 
 const staleInfiniteCache = [
diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/handleCombinedFlowTransfer.spec.ts b/packages/clerk-js/src/ui/components/SignIn/__tests__/handleCombinedFlowTransfer.spec.ts
@@ -1,31 +1,32 @@
 import type { LoadedClerk, SignUpResource } from '@clerk/types';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { handleCombinedFlowTransfer, hasOptionalFields } from '../handleCombinedFlowTransfer';
 
-// eslint-disable-next-line no-var -- Jest hoists mock calls to the top of the file, so var is needed.
-var mockCompleteSignUpFlow: jest.Mock;
-jest.mock('../lazy-sign-up', () => {
-  mockCompleteSignUpFlow = jest.fn();
+// eslint-disable-next-line no-var -- Vitest hoists mock calls to the top of the file, so var is needed.
+var mockCompleteSignUpFlow: ReturnType<typeof vi.fn>;
+vi.mock('../lazy-sign-up', () => {
+  mockCompleteSignUpFlow = vi.fn();
   return {
     lazyCompleteSignUpFlow: () => {
       return Promise.resolve(mockCompleteSignUpFlow);
     },
   };
 });
 
-const mockNavigate = jest.fn();
-const mockHandleError = jest.fn();
+const mockNavigate = vi.fn();
+const mockHandleError = vi.fn();
 
 describe('handleCombinedFlowTransfer', () => {
   beforeEach(() => {
-    jest.resetAllMocks();
+    vi.resetAllMocks();
   });
 
   it('should call completeSignUpFlow', async () => {
     const mockClerk = {
       client: {
         signUp: {
-          create: jest.fn().mockResolvedValue({}),
+          create: vi.fn().mockResolvedValue({}),
           optionalFields: [],
         },
       },
@@ -40,7 +41,7 @@ describe('handleCombinedFlowTransfer', () => {
       clerk: mockClerk as unknown as LoadedClerk,
       afterSignUpUrl: 'https://test.com',
       passwordEnabled: false,
-      navigateOnSetActive: jest.fn(),
+      navigateOnSetActive: vi.fn(),
     });
 
     expect(mockCompleteSignUpFlow).toHaveBeenCalled();
@@ -50,7 +51,7 @@ describe('handleCombinedFlowTransfer', () => {
     const mockClerk = {
       client: {
         signUp: {
-          create: jest.fn().mockImplementation((...args) => Promise.resolve(args)),
+          create: vi.fn().mockImplementation((...args) => Promise.resolve(args)),
           optionalFields: ['phone_number'],
         },
       },
@@ -65,7 +66,7 @@ describe('handleCombinedFlowTransfer', () => {
       clerk: mockClerk as unknown as LoadedClerk,
       afterSignUpUrl: 'https://test.com',
       passwordEnabled: false,
-      navigateOnSetActive: jest.fn(),
+      navigateOnSetActive: vi.fn(),
     });
 
     expect(mockNavigate).not.toHaveBeenCalled();
@@ -77,7 +78,7 @@ describe('handleCombinedFlowTransfer', () => {
     const mockClerk = {
       client: {
         signUp: {
-          create: jest.fn().mockImplementation((...args) => Promise.resolve(args)),
+          create: vi.fn().mockImplementation((...args) => Promise.resolve(args)),
           optionalFields: ['password'],
         },
       },
@@ -92,7 +93,7 @@ describe('handleCombinedFlowTransfer', () => {
       clerk: mockClerk as unknown as LoadedClerk,
       afterSignUpUrl: 'https://test.com',
       passwordEnabled: true,
-      navigateOnSetActive: jest.fn(),
+      navigateOnSetActive: vi.fn(),
     });
 
     expect(mockNavigate).toHaveBeenCalled();
@@ -104,7 +105,7 @@ describe('handleCombinedFlowTransfer', () => {
     const mockClerk = {
       client: {
         signUp: {
-          create: jest.fn().mockImplementation((...args) => Promise.resolve(args)),
+          create: vi.fn().mockImplementation((...args) => Promise.resolve(args)),
           optionalFields: [],
         },
       },
@@ -119,7 +120,7 @@ describe('handleCombinedFlowTransfer', () => {
       clerk: mockClerk as unknown as LoadedClerk,
       afterSignUpUrl: 'https://test.com',
       passwordEnabled: false,
-      navigateOnSetActive: jest.fn(),
+      navigateOnSetActive: vi.fn(),
     });
 
     expect(mockNavigate).toHaveBeenCalled();
@@ -131,7 +132,7 @@ describe('handleCombinedFlowTransfer', () => {
     const mockClerk = {
       client: {
         signUp: {
-          create: jest.fn().mockImplementation((...args) => Promise.resolve(args)),
+          create: vi.fn().mockImplementation((...args) => Promise.resolve(args)),
           optionalFields: ['first_name'],
         },
       },
@@ -146,7 +147,7 @@ describe('handleCombinedFlowTransfer', () => {
       clerk: mockClerk as unknown as LoadedClerk,
       afterSignUpUrl: 'https://test.com',
       passwordEnabled: false,
-      navigateOnSetActive: jest.fn(),
+      navigateOnSetActive: vi.fn(),
     });
 
     expect(mockNavigate).toHaveBeenCalled();
diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/utils.spec.ts b/packages/clerk-js/src/ui/components/SignIn/__tests__/utils.spec.ts
@@ -1,4 +1,5 @@
 import type { SignInResource } from '@clerk/types';
+import { describe, expect, it } from 'vitest';
 
 import type { FormControlState } from '@/ui/utils/useFormControl';
 
diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/signUpFormHelpers.spec.ts b/packages/clerk-js/src/ui/components/SignUp/__tests__/signUpFormHelpers.spec.ts
@@ -1,4 +1,5 @@
 import type { Attribute } from '@clerk/types';
+import { describe, expect, it } from 'vitest';
 
 import { determineActiveFields, determineRequiredIdentifier, getInitialActiveIdentifier } from '../signUpFormHelpers';
 
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/utils.spec.ts b/packages/clerk-js/src/ui/components/UserProfile/__tests__/utils.spec.ts
@@ -1,4 +1,5 @@
 import type { VerificationJSON } from '@clerk/types';
+import { describe, expect, it } from 'vitest';
 
 import { EmailAddress, PhoneNumber } from '../../../../core/resources';
 import { sortIdentificationBasedOnVerification } from '../utils';
diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/__tests__/useFormattedPhoneNumber.spec.ts b/packages/clerk-js/src/ui/elements/PhoneInput/__tests__/useFormattedPhoneNumber.spec.ts
@@ -1,5 +1,6 @@
 import { waitFor } from '@testing-library/dom';
 import { renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
 
 import { useFormattedPhoneNumber } from '../useFormattedPhoneNumber';
 
diff --git a/packages/clerk-js/src/ui/foundations/__tests__/createInternalTheme.spec.ts b/packages/clerk-js/src/ui/foundations/__tests__/createInternalTheme.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { createInternalTheme } from '../createInternalTheme';
 
 describe('createInternalTheme', () => {
diff --git a/packages/clerk-js/src/ui/hooks/__tests__/useDirection.spec.ts b/packages/clerk-js/src/ui/hooks/__tests__/useDirection.spec.ts
@@ -1,10 +1,11 @@
 import { renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useDirection } from '../useDirection';
 
 describe('useDirection', () => {
   const originalWindow = window;
-  const mockGetComputedStyle = jest.fn();
+  const mockGetComputedStyle = vi.fn();
 
   beforeEach(() => {
     // Mock window.getComputedStyle
diff --git a/packages/clerk-js/src/ui/styledSystem/__tests__/createVariants.spec.ts b/packages/clerk-js/src/ui/styledSystem/__tests__/createVariants.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { createCssVariables } from '../createCssVariables';
 import { createVariants } from '../createVariants';
 
diff --git a/packages/clerk-js/src/ui/utils/__tests__/formatSafeIdentifier.spec.ts b/packages/clerk-js/src/ui/utils/__tests__/formatSafeIdentifier.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { formatSafeIdentifier } from '../formatSafeIdentifier';
 
 describe('formatSafeIdentifier', () => {
diff --git a/packages/clerk-js/src/ui/utils/__tests__/intl.spec.ts b/packages/clerk-js/src/ui/utils/__tests__/intl.spec.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { formatToCompactNumber } from '../intl';
 
 describe('formatToCompactNumber()', function () {

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import { describe, expect, it } from 'vitest';`
	`2`	`+`
`1`	`3`	`import { Organization } from '../internal';`
`2`	`4`
`3`	`5`	`describe('Organization', () => {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import { describe, expect, it } from 'vitest';`
	`2`	`+`
`1`	`3`	`import { OrganizationDomain } from '../internal';`
`2`	`4`
`3`	`5`	`describe('OrganizationDomain', () => {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import { describe, expect, it } from 'vitest';`
	`2`	`+`
`1`	`3`	`import { OrganizationInvitation } from '../internal';`
`2`	`4`
`3`	`5`	`describe('OrganizationInvitation', () => {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import { describe, expect, it } from 'vitest';`
	`2`	`+`
`1`	`3`	`import { OrganizationMembership } from '../internal';`
`2`	`4`
`3`	`5`	`describe('OrganizationMembership', () => {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import { describe, expect, it } from 'vitest';`
	`2`	`+`
`1`	`3`	`import { OrganizationMembershipRequest } from '../internal';`
`2`	`4`
`3`	`5`	`describe('OrganizationMembership', () => {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import { describe, expect, it } from 'vitest';`
	`2`	`+`
`1`	`3`	`import { OrganizationSuggestion } from '../internal';`
`2`	`4`
`3`	`5`	`describe('OrganizationSuggestion', () => {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import { describe, expect, it } from 'vitest';`
	`2`	`+`
`1`	`3`	`import { PublicUserData } from '../PublicUserData';`
`2`	`4`
`3`	`5`	`describe('PublicUserData', () => {`