@workos-inc/authkit-nextjs 2.12.2 → 2.14.0

package/src/components/authkit-provider.spec.tsx

@@ -10,17 +10,17 @@ import {
   switchToOrganizationAction,
 } from '../actions.js';
 
-jest.mock('../actions', () => ({
-  checkSessionAction: jest.fn(),
-  getAuthAction: jest.fn(),
-  refreshAuthAction: jest.fn(),
-  handleSignOutAction: jest.fn(),
-  switchToOrganizationAction: jest.fn(),
+vi.mock('../actions', () => ({
+  checkSessionAction: vi.fn(),
+  getAuthAction: vi.fn(),
+  refreshAuthAction: vi.fn(),
+  handleSignOutAction: vi.fn(),
+  switchToOrganizationAction: vi.fn(),
 }));
 
 describe('AuthKitProvider', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should render children', async () => {
@@ -134,7 +134,7 @@ describe('AuthKitProvider', () => {
   });
 
   it('should call getAuthAction when initialAuth is not provided', async () => {
-    (getAuthAction as jest.Mock).mockResolvedValueOnce({
+    (getAuthAction as Mock).mockResolvedValueOnce({
       user: { email: 'test@example.com' },
       sessionId: 'test-session',
     });
@@ -151,7 +151,7 @@ describe('AuthKitProvider', () => {
   });
 
   it('should do nothing if onSessionExpired is false', async () => {
-    jest.spyOn(window, 'addEventListener');
+    vi.spyOn(window, 'addEventListener');
 
     await act(async () => {
       render(
@@ -166,8 +166,8 @@ describe('AuthKitProvider', () => {
   });
 
   it('should call onSessionExpired when session is expired', async () => {
-    (checkSessionAction as jest.Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
-    const onSessionExpired = jest.fn();
+    (checkSessionAction as Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
+    const onSessionExpired = vi.fn();
 
     render(
       <AuthKitProvider onSessionExpired={onSessionExpired}>
@@ -186,8 +186,8 @@ describe('AuthKitProvider', () => {
   });
 
   it('should only call onSessionExpired once if multiple visibility changes occur', async () => {
-    (checkSessionAction as jest.Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
-    const onSessionExpired = jest.fn();
+    (checkSessionAction as Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
+    const onSessionExpired = vi.fn();
 
     render(
       <AuthKitProvider onSessionExpired={onSessionExpired}>
@@ -207,9 +207,9 @@ describe('AuthKitProvider', () => {
   });
 
   it('should pass through if checkSessionAction does not throw "Failed to fetch"', async () => {
-    (checkSessionAction as jest.Mock).mockResolvedValueOnce(false);
+    (checkSessionAction as Mock).mockResolvedValueOnce(false);
 
-    const onSessionExpired = jest.fn();
+    const onSessionExpired = vi.fn();
 
     render(
       <AuthKitProvider onSessionExpired={onSessionExpired}>
@@ -227,74 +227,70 @@ describe('AuthKitProvider', () => {
     });
   });
 
-  it('should reload the page when session is expired and no onSessionExpired handler is provided', async () => {
-    (checkSessionAction as jest.Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
+  describe('window.location.reload behavior', () => {
+    let originalLocation: Location;
 
-    const originalLocation = window.location;
-
-    // @ts-expect-error - we're deleting the property to test the mock
-    delete window.location;
-
-    window.location = { ...window.location, reload: jest.fn() };
-
-    render(
-      <AuthKitProvider>
-        <div>Test Child</div>
-      </AuthKitProvider>,
-    );
-
-    act(() => {
-      // Simulate visibility change
-      window.dispatchEvent(new Event('visibilitychange'));
+    beforeEach(() => {
+      originalLocation = window.location;
+      // @ts-expect-error - deleting window.location to mock it
+      delete window.location;
+      window.location = { reload: vi.fn() } as unknown as Location;
     });
 
-    await waitFor(() => {
-      expect(window.location.reload).toHaveBeenCalled();
+    afterEach(() => {
+      window.location = originalLocation;
     });
 
-    // Restore original reload function
-    window.location = originalLocation;
-  });
+    it('should reload the page when session is expired and no onSessionExpired handler is provided', async () => {
+      (checkSessionAction as Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
 
-  it('should not call onSessionExpired or reload the page if session is valid', async () => {
-    (checkSessionAction as jest.Mock).mockResolvedValueOnce(true);
-    const onSessionExpired = jest.fn();
+      render(
+        <AuthKitProvider>
+          <div>Test Child</div>
+        </AuthKitProvider>,
+      );
 
-    const originalLocation = window.location;
+      act(() => {
+        // Simulate visibility change
+        window.dispatchEvent(new Event('visibilitychange'));
+      });
 
-    // @ts-expect-error - we're deleting the property to test the mock
-    delete window.location;
+      await waitFor(() => {
+        expect(window.location.reload).toHaveBeenCalled();
+      });
+    });
 
-    window.location = { ...window.location, reload: jest.fn() };
+    it('should not call onSessionExpired or reload the page if session is valid', async () => {
+      (checkSessionAction as Mock).mockResolvedValueOnce(true);
+      const onSessionExpired = vi.fn();
 
-    render(
-      <AuthKitProvider onSessionExpired={onSessionExpired}>
-        <div>Test Child</div>
-      </AuthKitProvider>,
-    );
+      render(
+        <AuthKitProvider onSessionExpired={onSessionExpired}>
+          <div>Test Child</div>
+        </AuthKitProvider>,
+      );
 
-    act(() => {
-      // Simulate visibility change
-      window.dispatchEvent(new Event('visibilitychange'));
-    });
+      act(() => {
+        // Simulate visibility change
+        window.dispatchEvent(new Event('visibilitychange'));
+      });
 
-    await waitFor(() => {
-      expect(onSessionExpired).not.toHaveBeenCalled();
-      expect(window.location.reload).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(onSessionExpired).not.toHaveBeenCalled();
+        expect(window.location.reload).not.toHaveBeenCalled();
+      });
     });
-
-    window.location = originalLocation;
   });
 });
 
 describe('useAuth', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should call getAuth when a user is not returned when ensureSignedIn is true', async () => {
     // First and second calls return no user, second call returns a user
-    (getAuthAction as jest.Mock)
+    (getAuthAction as Mock)
       .mockResolvedValueOnce({ user: null, loading: true })
       .mockResolvedValueOnce({ user: { email: 'test@example.com' }, loading: false });
 
@@ -323,7 +319,7 @@ describe('useAuth', () => {
     };
 
     // Suppress console.error for this test since we expect an error
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 
     expect(() => {
       render(<TestComponent />);
@@ -333,7 +329,7 @@ describe('useAuth', () => {
   });
 
   it('should provide auth context values when used within AuthKitProvider', async () => {
-    (getAuthAction as jest.Mock).mockResolvedValueOnce({
+    (getAuthAction as Mock).mockResolvedValueOnce({
       user: { email: 'test@example.com' },
       sessionId: 'test-session',
       organizationId: 'test-org',
@@ -381,8 +377,8 @@ describe('useAuth', () => {
       sessionId: 'test-session',
     };
 
-    (getAuthAction as jest.Mock).mockResolvedValueOnce(mockAuth);
-    (refreshAuthAction as jest.Mock).mockResolvedValueOnce({
+    (getAuthAction as Mock).mockResolvedValueOnce(mockAuth);
+    (refreshAuthAction as Mock).mockResolvedValueOnce({
       ...mockAuth,
       sessionId: 'new-session',
     });
@@ -424,10 +420,10 @@ describe('useAuth', () => {
       organizationId: 'new-org',
     };
 
-    (getAuthAction as jest.Mock)
+    (getAuthAction as Mock)
       .mockResolvedValue(mockAuth)
       .mockResolvedValueOnce({ ...mockAuth, organizationId: 'old-org' });
-    (switchToOrganizationAction as jest.Mock).mockResolvedValueOnce(mockAuth);
+    (switchToOrganizationAction as Mock).mockResolvedValueOnce(mockAuth);
 
     const TestComponent = () => {
       const auth = useAuth();
@@ -460,7 +456,7 @@ describe('useAuth', () => {
   });
 
   it('should receive an error when refreshAuth fails with an error', async () => {
-    (refreshAuthAction as jest.Mock).mockRejectedValueOnce(new Error('Refresh failed'));
+    (refreshAuthAction as Mock).mockRejectedValueOnce(new Error('Refresh failed'));
 
     let error: string | undefined;
 
@@ -497,7 +493,7 @@ describe('useAuth', () => {
   });
 
   it('should receive an error when refreshAuth fails with a string error', async () => {
-    (refreshAuthAction as jest.Mock).mockRejectedValueOnce('Refresh failed');
+    (refreshAuthAction as Mock).mockRejectedValueOnce('Refresh failed');
 
     let error: string | undefined;
 
@@ -534,7 +530,7 @@ describe('useAuth', () => {
   });
 
   it('should call handleSignOutAction when signOut is called', async () => {
-    (handleSignOutAction as jest.Mock).mockResolvedValueOnce({});
+    (handleSignOutAction as Mock).mockResolvedValueOnce({});
 
     const TestComponent = () => {
       const auth = useAuth();
@@ -560,7 +556,7 @@ describe('useAuth', () => {
   });
 
   it('should pass returnTo parameter to handleSignOutAction', async () => {
-    (handleSignOutAction as jest.Mock).mockResolvedValueOnce({});
+    (handleSignOutAction as Mock).mockResolvedValueOnce({});
 
     const TestComponent = () => {
       const auth = useAuth();

package/src/components/button.spec.tsx

@@ -24,12 +24,10 @@ describe('Button', () => {
     const { getByRole } = render(<Button style={{ backgroundColor: 'red' }}>Click me</Button>);
     const button = getByRole('button');
 
-    expect(button).toHaveStyle({
-      backgroundColor: 'red',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    });
+    expect(button.style.backgroundColor).toBe('red');
+    expect(button.style.display).toBe('inline-flex');
+    expect(button.style.alignItems).toBe('center');
+    expect(button.style.justifyContent).toBe('center');
   });
 
   it('should pass through additional props', () => {

package/src/components/impersonation.spec.tsx

@@ -7,23 +7,23 @@ import * as React from 'react';
 import { handleSignOutAction } from '../actions.js';
 
 // Mock the useAuth hook
-jest.mock('./authkit-provider', () => ({
-  useAuth: jest.fn(),
+vi.mock('./authkit-provider', () => ({
+  useAuth: vi.fn(),
 }));
 
 // Mock the getOrganizationAction
-jest.mock('../actions', () => ({
-  getOrganizationAction: jest.fn(),
-  handleSignOutAction: jest.fn(),
+vi.mock('../actions', () => ({
+  getOrganizationAction: vi.fn(),
+  handleSignOutAction: vi.fn(),
 }));
 
 describe('Impersonation', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should return null if not impersonating', () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: null,
       user: { id: '123', email: 'user@example.com' },
       organizationId: null,
@@ -34,7 +34,7 @@ describe('Impersonation', () => {
   });
 
   it('should render impersonation banner when impersonating', () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: { email: 'admin@example.com' },
       user: { id: '123', email: 'user@example.com' },
       organizationId: null,
@@ -45,13 +45,13 @@ describe('Impersonation', () => {
   });
 
   it('should render with organization info when organizationId is provided', async () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: { email: 'admin@example.com' },
       user: { id: '123', email: 'user@example.com' },
       organizationId: 'org_123',
     });
 
-    (getOrganizationAction as jest.Mock).mockResolvedValue({
+    (getOrganizationAction as Mock).mockResolvedValue({
       id: 'org_123',
       name: 'Test Org',
     });
@@ -64,7 +64,7 @@ describe('Impersonation', () => {
   });
 
   it('should render at the bottom by default', () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: { email: 'admin@example.com' },
       user: { id: '123', email: 'user@example.com' },
       organizationId: null,
@@ -76,7 +76,7 @@ describe('Impersonation', () => {
   });
 
   it('should render at the top when side prop is "top"', () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: { email: 'admin@example.com' },
       user: { id: '123', email: 'user@example.com' },
       organizationId: null,
@@ -88,7 +88,7 @@ describe('Impersonation', () => {
   });
 
   it('should merge custom styles with default styles', () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: { email: 'admin@example.com' },
       user: { id: '123', email: 'user@example.com' },
       organizationId: null,
@@ -97,11 +97,11 @@ describe('Impersonation', () => {
     const customStyle = { backgroundColor: 'red' };
     const { container } = render(<Impersonation style={customStyle} />);
     const root = container.querySelector('[data-workos-impersonation-root]');
-    expect(root).toHaveStyle({ backgroundColor: 'red' });
+    expect((root as HTMLElement).style.backgroundColor).toBe('red');
   });
 
   it('should should sign out when the Stop button is called', async () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: { email: 'admin@example.com' },
       user: { id: '123', email: 'user@example.com' },
       organizationId: null,
@@ -114,7 +114,7 @@ describe('Impersonation', () => {
   });
 
   it('should pass returnTo prop to handleSignOutAction when provided', async () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: { email: 'admin@example.com' },
       user: { id: '123', email: 'user@example.com' },
       organizationId: null,
@@ -129,7 +129,7 @@ describe('Impersonation', () => {
   });
 
   it('should not call getOrganizationAction when organizationId is not provided', () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: { email: 'admin@example.com' },
       user: { id: '123', email: 'user@example.com' },
       organizationId: null,
@@ -140,7 +140,7 @@ describe('Impersonation', () => {
   });
 
   it('should not call getOrganizationAction when impersonator is not present', () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: null,
       user: { id: '123', email: 'user@example.com' },
       organizationId: 'org_123',
@@ -151,7 +151,7 @@ describe('Impersonation', () => {
   });
 
   it('should not call getOrganizationAction when user is not present', () => {
-    (useAuth as jest.Mock).mockReturnValue({
+    (useAuth as Mock).mockReturnValue({
       impersonator: { email: 'admin@example.com' },
       user: null,
       organizationId: 'org_123',
@@ -167,10 +167,10 @@ describe('Impersonation', () => {
       name: 'Test Org',
     };
 
-    (getOrganizationAction as jest.Mock).mockResolvedValue(mockOrg);
+    (getOrganizationAction as Mock).mockResolvedValue(mockOrg);
 
     const { rerender } = await act(async () => {
-      (useAuth as jest.Mock).mockReturnValue({
+      (useAuth as Mock).mockReturnValue({
         impersonator: { email: 'admin@example.com' },
         user: { id: '123', email: 'user@example.com' },
         organizationId: 'org_123',
@@ -188,7 +188,7 @@ describe('Impersonation', () => {
 
     // Rerender with the same organizationId
     await act(async () => {
-      (useAuth as jest.Mock).mockReturnValue({
+      (useAuth as Mock).mockReturnValue({
         impersonator: { email: 'admin@example.com' },
         user: { id: '123', email: 'user@example.com' },
         organizationId: 'org_123',
@@ -212,10 +212,10 @@ describe('Impersonation', () => {
       name: 'Test Org 2',
     };
 
-    (getOrganizationAction as jest.Mock).mockResolvedValueOnce(mockOrg1).mockResolvedValueOnce(mockOrg2);
+    (getOrganizationAction as Mock).mockResolvedValueOnce(mockOrg1).mockResolvedValueOnce(mockOrg2);
 
     const { rerender } = await act(async () => {
-      (useAuth as jest.Mock).mockReturnValue({
+      (useAuth as Mock).mockReturnValue({
         impersonator: { email: 'admin@example.com' },
         user: { id: '123', email: 'user@example.com' },
         organizationId: 'org_123',
@@ -234,7 +234,7 @@ describe('Impersonation', () => {
 
     // Rerender with a different organizationId
     await act(async () => {
-      (useAuth as jest.Mock).mockReturnValue({
+      (useAuth as Mock).mockReturnValue({
         impersonator: { email: 'admin@example.com' },
         user: { id: '123', email: 'user@example.com' },
         organizationId: 'org_456',

package/src/components/min-max-button.spec.tsx

@@ -14,6 +14,7 @@ describe('MinMaxButton', () => {
   afterEach(() => {
     // Clean up after each test
     document.body.innerHTML = '';
+    vi.restoreAllMocks();
   });
 
   it('sets minimized value when clicked', () => {
@@ -33,7 +34,7 @@ describe('MinMaxButton', () => {
     const root = document.querySelector('[data-workos-impersonation-root]');
 
     // Mock querySelector to return null for this test
-    jest.spyOn(document, 'querySelector').mockReturnValue(null);
+    vi.spyOn(document, 'querySelector').mockReturnValue(null);
 
     act(() => {
       getByRole('button').click();

package/src/components/tokenStore.spec.ts

@@ -1,20 +1,20 @@
 import { tokenStore, TokenStore } from './tokenStore.js';
 import { getAccessTokenAction, refreshAccessTokenAction } from '../actions.js';
 
-jest.mock('../actions.js', () => ({
-  getAccessTokenAction: jest.fn(),
-  refreshAccessTokenAction: jest.fn(),
+vi.mock('../actions.js', () => ({
+  getAccessTokenAction: vi.fn(),
+  refreshAccessTokenAction: vi.fn(),
 }));
 
-const mockGetAccessTokenAction = getAccessTokenAction as jest.Mock;
-const mockRefreshAccessTokenAction = refreshAccessTokenAction as jest.Mock;
+const mockGetAccessTokenAction = getAccessTokenAction as Mock;
+const mockRefreshAccessTokenAction = refreshAccessTokenAction as Mock;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const _global = global as any;
 
 describe('tokenStore', () => {
   beforeEach(() => {
-    jest.useFakeTimers();
-    jest.resetAllMocks();
+    vi.useFakeTimers();
+    vi.resetAllMocks();
     tokenStore.reset();
 
     // Clean up DOM globals
@@ -23,10 +23,10 @@ describe('tokenStore', () => {
   });
 
   afterEach(() => {
-    jest.clearAllTimers();
-    jest.useRealTimers();
+    vi.clearAllTimers();
+    vi.useRealTimers();
     tokenStore.reset();
-    jest.restoreAllMocks();
+    vi.restoreAllMocks();
 
     // Clean up DOM globals
     delete _global.document;
@@ -213,7 +213,7 @@ describe('tokenStore', () => {
       };
       const validToken = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.${btoa(JSON.stringify(validPayload))}.mock-signature`;
 
-      const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+      const setTimeoutSpy = vi.spyOn(global, 'setTimeout');
       mockGetAccessTokenAction.mockResolvedValue(validToken);
 
       await tokenStore.getAccessTokenSilently();
@@ -227,7 +227,7 @@ describe('tokenStore', () => {
 
   describe('subscriber management', () => {
     it('should notify subscribers when state changes', () => {
-      const listener = jest.fn();
+      const listener = vi.fn();
       const unsubscribe = tokenStore.subscribe(listener);
 
       // Trigger a state change
@@ -256,14 +256,14 @@ describe('tokenStore', () => {
       mockGetAccessTokenAction.mockResolvedValue(validToken);
 
       // Subscribe to create a listener
-      const listener = jest.fn();
+      const listener = vi.fn();
       const unsubscribe = tokenStore.subscribe(listener);
 
       // Get token to schedule a refresh
       await tokenStore.getAccessTokenSilently();
 
       // Spy on clearTimeout
-      const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+      const clearTimeoutSpy = vi.spyOn(global, 'clearTimeout');
 
       // Unsubscribe the last (only) subscriber - should clear timeout
       unsubscribe();
@@ -354,7 +354,7 @@ describe('tokenStore', () => {
 
     it('should consume eager auth cookie on first getAccessToken call', async () => {
       const eagerToken = 'eager-auth-token';
-      const mockCookieSetter = jest.fn();
+      const mockCookieSetter = vi.fn();
 
       // Mock document.cookie with both getter and setter
       let cookieValue = `workos-access-token=${eagerToken};`;
@@ -404,7 +404,7 @@ describe('tokenStore', () => {
         iat: now - 40,
       };
       const fastToken = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.${btoa(JSON.stringify(fastPayload))}.mock-signature`;
-      const mockCookieSetter = jest.fn();
+      const mockCookieSetter = vi.fn();
 
       let cookieValue = `workos-access-token=${fastToken};`;
 
@@ -433,7 +433,7 @@ describe('tokenStore', () => {
         configurable: true,
       });
 
-      const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+      const setTimeoutSpy = vi.spyOn(global, 'setTimeout');
 
       // Call getAccessTokenSilently to trigger fast cookie consumption and refresh scheduling
       const token = await tokenStore.getAccessTokenSilently();
@@ -480,7 +480,7 @@ describe('tokenStore', () => {
 
     it('should handle HTTP protocol for cookie deletion', async () => {
       const eagerToken = 'http-token';
-      const mockCookieSetter = jest.fn();
+      const mockCookieSetter = vi.fn();
 
       let cookieValue = `workos-access-token=${eagerToken};`;
 
@@ -624,7 +624,7 @@ describe('tokenStore', () => {
       await tokenStore.getAccessTokenSilently();
 
       // Spy on clearTimeout
-      const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+      const clearTimeoutSpy = vi.spyOn(global, 'clearTimeout');
 
       // Clear token should clear the refresh timeout
       tokenStore.clearToken();
@@ -738,7 +738,7 @@ describe('tokenStore', () => {
       mockGetAccessTokenAction.mockClear();
       mockRefreshAccessTokenAction.mockResolvedValue(existingToken); // Same token
 
-      const listener = jest.fn();
+      const listener = vi.fn();
       tokenStore.subscribe(listener);
 
       // Force a silent refresh that returns the same token
@@ -752,7 +752,7 @@ describe('tokenStore', () => {
 
   describe('TokenStore constructor', () => {
     const setupMockEnv = (cookieValue = '', protocol = 'https:') => {
-      const mockCookieSetter = jest.fn();
+      const mockCookieSetter = vi.fn();
 
       Object.defineProperty(_global, 'document', {
         value: { cookie: cookieValue },