chore(clerk-react): Additional tests with vitest (#4772)

clerk · Dec 13, 2024 · e7476f0 · e7476f0
1 parent a02173d
commit e7476f0
Show file tree

Hide file tree

Showing 28 changed files with 317 additions and 100 deletions.
diff --git a/.changeset/breezy-foxes-lay.md b/.changeset/breezy-foxes-lay.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/react/.eslintrc.js b/packages/react/.eslintrc.js
@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['@clerk/custom/browser', '@clerk/custom/typescript', '@clerk/custom/jest', '@clerk/custom/react'],
+  extends: ['@clerk/custom/browser', '@clerk/custom/typescript', '@clerk/custom/react'],
 };
diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -71,9 +71,7 @@
     "lint:attw": "attw --pack .",
     "lint:publint": "publint",
     "publish:local": "pnpm yalc push --replace  --sig",
-    "test": "jest",
-    "test:cache:clear": "jest --clearCache --useStderr",
-    "test:ci": "jest --maxWorkers=70%"
+    "test": "vitest"
   },
   "dependencies": {
     "@clerk/shared": "workspace:^",

diff --git a/packages/react/src/__tests__/isomorphicClerk.test.ts b/packages/react/src/__tests__/isomorphicClerk.test.ts
@@ -1,14 +1,15 @@
 import type { Resources, UnsubscribeCallback } from '@clerk/types';
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
 
 import { IsomorphicClerk } from '../isomorphicClerk';
 
 describe('isomorphicClerk', () => {
   beforeAll(() => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
   });
 
   afterAll(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
   });
 
   it('instantiates a IsomorphicClerk instance', () => {
@@ -35,10 +36,10 @@ describe('isomorphicClerk', () => {
     void isomorphicClerk.__unstable__updateProps({ appearance: { baseTheme: 'green' } });
     expect(propsHistory).toEqual([]);
 
-    jest.spyOn(isomorphicClerk, 'loaded', 'get').mockReturnValue(true);
+    vi.spyOn(isomorphicClerk, 'loaded', 'get').mockReturnValue(true);
     isomorphicClerk.emitLoaded();
     void isomorphicClerk.__unstable__updateProps({ appearance: { baseTheme: 'white' } });
-    await jest.runAllTimersAsync();
+    await vi.runAllTimersAsync();
 
     expect(propsHistory).toEqual([
       { appearance: { baseTheme: 'dark' } },
@@ -75,7 +76,7 @@ describe('isomorphicClerk', () => {
     // Unsubscribe one listener before ClerkJS is loaded
     unsubscribe1();
 
-    jest.spyOn(isomorphicClerk, 'loaded', 'get').mockReturnValue(true);
+    vi.spyOn(isomorphicClerk, 'loaded', 'get').mockReturnValue(true);
     isomorphicClerk.emitLoaded();
     const unsubscribe3 = isomorphicClerk.addListener(payload => listenerCallHistory.push(payload));
 

diff --git a/packages/react/src/components/__tests__/OrganizationProfile.test.tsx b/packages/react/src/components/__tests__/OrganizationProfile.test.tsx
@@ -1,5 +1,6 @@
 import { expectTypeOf } from 'expect-type';
 import type React from 'react';
+import { describe, test } from 'vitest';
 
 import type { OrganizationProfile } from '..';
 

diff --git a/packages/react/src/components/__tests__/OrganizationSwitcher.test.tsx b/packages/react/src/components/__tests__/OrganizationSwitcher.test.tsx
@@ -1,5 +1,6 @@
 import { expectTypeOf } from 'expect-type';
 import type React from 'react';
+import { describe, test } from 'vitest';
 
 import type { OrganizationSwitcher } from '..';
 

diff --git a/packages/react/src/components/__tests__/SignIn.test.tsx b/packages/react/src/components/__tests__/SignIn.test.tsx
@@ -1,5 +1,6 @@
 import { expectTypeOf } from 'expect-type';
 import type React from 'react';
+import { describe, test } from 'vitest';
 
 import type { SignIn } from '..';
 

diff --git a/packages/react/src/components/__tests__/SignInButton.test.tsx b/packages/react/src/components/__tests__/SignInButton.test.tsx
@@ -1,17 +1,18 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import React from 'react';
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { SignInButton } from '../SignInButton';
 
-const mockRedirectToSignIn = jest.fn();
+const mockRedirectToSignIn = vi.fn();
 const originalError = console.error;
 
 const mockClerk = {
   redirectToSignIn: mockRedirectToSignIn,
 } as any;
 
-jest.mock('../withClerk', () => {
+vi.mock('../withClerk', () => {
   return {
     withClerk: (Component: any) => (props: any) => {
       return (
@@ -28,7 +29,7 @@ const url = 'https://www.clerk.com';
 
 describe('<SignInButton/>', () => {
   beforeAll(() => {
-    console.error = jest.fn();
+    console.error = vi.fn();
   });
 
   afterAll(() => {
@@ -68,7 +69,7 @@ describe('<SignInButton/>', () => {
   });
 
   it('renders passed button and calls both click handlers', async () => {
-    const handler = jest.fn();
+    const handler = vi.fn();
 
     render(
       <SignInButton>
@@ -90,10 +91,11 @@ describe('<SignInButton/>', () => {
 
   it('uses text passed as children', async () => {
     render(<SignInButton>text</SignInButton>);
-    screen.getByText('text');
+
+    await screen.findByText('text');
   });
 
-  it('throws if multiple children provided', async () => {
+  it('throws if multiple children provided', () => {
     expect(() => {
       render(
         <SignInButton>

diff --git a/packages/react/src/components/__tests__/SignInWithMetamaskButton.test.tsx b/packages/react/src/components/__tests__/SignInWithMetamaskButton.test.tsx
@@ -1,17 +1,18 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import React from 'react';
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { SignInWithMetamaskButton } from '../SignInWithMetamaskButton';
 
-const mockAuthenticatewithMetamask = jest.fn();
+const mockAuthenticatewithMetamask = vi.fn();
 const originalError = console.error;
 
 const mockClerk = {
   authenticateWithMetamask: mockAuthenticatewithMetamask,
 } as any;
 
-jest.mock('../withClerk', () => {
+vi.mock('../withClerk', () => {
   return {
     withClerk: (Component: any) => (props: any) => (
       <Component
@@ -24,7 +25,7 @@ jest.mock('../withClerk', () => {
 
 describe('<SignInWithMetamaskButton/>', () => {
   beforeAll(() => {
-    console.error = jest.fn();
+    console.error = vi.fn();
   });
 
   afterAll(() => {
@@ -38,7 +39,8 @@ describe('<SignInWithMetamaskButton/>', () => {
   it('calls clerk.authenticateWithMetamask when clicked', async () => {
     render(<SignInWithMetamaskButton />);
     const btn = screen.getByText('Sign in with Metamask');
-    userEvent.click(btn);
+    await userEvent.click(btn);
+
     await waitFor(() => {
       expect(mockAuthenticatewithMetamask).toHaveBeenCalled();
     });
@@ -53,8 +55,8 @@ describe('<SignInWithMetamaskButton/>', () => {
     expect(() => {
       render(
         <SignInWithMetamaskButton>
-          <button>1</button>
-          <button>2</button>
+          <button type='button'>1</button>
+          <button type='button'>2</button>
         </SignInWithMetamaskButton>,
       );
     }).toThrow();

diff --git a/packages/react/src/components/__tests__/SignOutButton.test.tsx b/packages/react/src/components/__tests__/SignOutButton.test.tsx
@@ -1,17 +1,18 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import React from 'react';
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { SignOutButton } from '../SignOutButton';
 
-const mockSignOut = jest.fn();
+const mockSignOut = vi.fn();
 const originalError = console.error;
 
 const mockClerk = {
   signOut: mockSignOut,
 } as any;
 
-jest.mock('../withClerk', () => {
+vi.mock('../withClerk', () => {
   return {
     withClerk: (Component: any) => (props: any) => {
       return (
@@ -28,7 +29,7 @@ const url = 'https://www.clerk.com';
 
 describe('<SignOutButton />', () => {
   beforeAll(() => {
-    console.error = jest.fn();
+    console.error = vi.fn();
   });
 
   afterAll(() => {
@@ -42,7 +43,7 @@ describe('<SignOutButton />', () => {
   it('calls clerk.signOutOne when clicked', async () => {
     render(<SignOutButton />);
     const btn = screen.getByText('Sign out');
-    userEvent.click(btn);
+    await userEvent.click(btn);
     await waitFor(() => {
       expect(mockSignOut).toHaveBeenCalled();
     });
@@ -51,7 +52,7 @@ describe('<SignOutButton />', () => {
   it('handles redirectUrl prop', async () => {
     render(<SignOutButton redirectUrl={url} />);
     const btn = screen.getByText('Sign out');
-    userEvent.click(btn);
+    await userEvent.click(btn);
     await waitFor(() => {
       expect(mockSignOut).toHaveBeenCalledWith({ redirectUrl: url });
     });
@@ -60,23 +61,24 @@ describe('<SignOutButton />', () => {
   it('handles signOutOptions prop', async () => {
     render(<SignOutButton signOutOptions={{ redirectUrl: url, sessionId: 'sess_1yDceUR8SIKtQ0gIOO8fNsW7nhe' }} />);
     const btn = screen.getByText('Sign out');
-    userEvent.click(btn);
+    await userEvent.click(btn);
     await waitFor(() => {
       expect(mockSignOut).toHaveBeenCalledWith({ redirectUrl: url, sessionId: 'sess_1yDceUR8SIKtQ0gIOO8fNsW7nhe' });
     });
   });
 
   it('uses text passed as children', async () => {
     render(<SignOutButton>text</SignOutButton>);
-    screen.getByText('text');
+
+    await screen.findByText('text');
   });
 
-  it('throws if multiple children provided', async () => {
+  it('throws if multiple children provided', () => {
     expect(() => {
       render(
         <SignOutButton>
-          <button>1</button>
-          <button>2</button>
+          <button type='button'>1</button>
+          <button type='button'>2</button>
         </SignOutButton>,
       );
     }).toThrow();

diff --git a/packages/react/src/components/__tests__/SignUp.test.tsx b/packages/react/src/components/__tests__/SignUp.test.tsx
@@ -1,5 +1,6 @@
 import { expectTypeOf } from 'expect-type';
 import type React from 'react';
+import { describe, test } from 'vitest';
 
 import type { SignUp } from '..';
 

diff --git a/packages/react/src/components/__tests__/SignUpButton.test.tsx b/packages/react/src/components/__tests__/SignUpButton.test.tsx
@@ -1,17 +1,18 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import React from 'react';
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { SignUpButton } from '../SignUpButton';
 
-const mockRedirectToSignUp = jest.fn();
+const mockRedirectToSignUp = vi.fn();
 const originalError = console.error;
 
 const mockClerk = {
   redirectToSignUp: mockRedirectToSignUp,
 } as any;
 
-jest.mock('../withClerk', () => {
+vi.mock('../withClerk', () => {
   return {
     withClerk: (Component: any) => (props: any) => {
       return (
@@ -28,7 +29,7 @@ const url = 'https://www.clerk.com';
 
 describe('<SignUpButton/>', () => {
   beforeAll(() => {
-    console.error = jest.fn();
+    console.error = vi.fn();
   });
 
   afterAll(() => {
@@ -42,7 +43,8 @@ describe('<SignUpButton/>', () => {
   it('calls clerk.redirectToSignUp when clicked', async () => {
     render(<SignUpButton />);
     const btn = screen.getByText('Sign up');
-    userEvent.click(btn);
+
+    await userEvent.click(btn);
     await waitFor(() => {
       expect(mockRedirectToSignUp).toHaveBeenCalled();
     });
@@ -51,7 +53,8 @@ describe('<SignUpButton/>', () => {
   it('handles forceRedirectUrl prop', async () => {
     render(<SignUpButton forceRedirectUrl={url} />);
     const btn = screen.getByText('Sign up');
-    userEvent.click(btn);
+
+    await userEvent.click(btn);
     await waitFor(() => {
       expect(mockRedirectToSignUp).toHaveBeenCalledWith({ forceRedirectUrl: url, signUpForceRedirectUrl: url });
     });
@@ -60,7 +63,8 @@ describe('<SignUpButton/>', () => {
   it('handles fallbackRedirectUrl prop', async () => {
     render(<SignUpButton fallbackRedirectUrl={url} />);
     const btn = screen.getByText('Sign up');
-    userEvent.click(btn);
+
+    await userEvent.click(btn);
     await waitFor(() => {
       expect(mockRedirectToSignUp).toHaveBeenCalledWith({
         fallbackRedirectUrl: url,
@@ -70,14 +74,20 @@ describe('<SignUpButton/>', () => {
   });
 
   it('renders passed button and calls both click handlers', async () => {
-    const handler = jest.fn();
+    const handler = vi.fn();
     render(
       <SignUpButton>
-        <button onClick={handler}>custom button</button>
+        <button
+          onClick={handler}
+          type='button'
+        >
+          custom button
+        </button>
       </SignUpButton>,
     );
     const btn = screen.getByText('custom button');
-    userEvent.click(btn);
+
+    await userEvent.click(btn);
     await waitFor(() => {
       expect(handler).toHaveBeenCalled();
       expect(mockRedirectToSignUp).toHaveBeenCalled();
@@ -93,8 +103,8 @@ describe('<SignUpButton/>', () => {
     expect(() => {
       render(
         <SignUpButton>
-          <button>1</button>
-          <button>2</button>
+          <button type='button'>1</button>
+          <button type='button'>2</button>
         </SignUpButton>,
       );
     }).toThrow();