chore(clerk-js): Reapply Convert all Jest tests to Vitest #6823
Conversation
🦋 Changeset detectedLatest commit: b8a2a66 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughMigrate Clerk JS test infra from Jest to Vitest: remove Jest configs/helpers, add Vitest config and setup, convert tests/mocks to Vitest ( Changes
Sequence Diagram(s)(omitted — changes are test infra and configuration focused; no new runtime control flow to diagram) Estimated code review effort🎯 4 (Complex) | ⏱️ ~60–90 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Disabled knowledge base sources:
⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (6)**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
packages/**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
packages/**/*.{ts,tsx,d.ts}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{js,ts,tsx,jsx}📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Files:
🧬 Code graph analysis (2)packages/clerk-js/src/test/fixtures.ts (1)
packages/clerk-js/src/test/fixture-helpers.ts (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
🔇 Additional comments (2)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (13)
packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/utlis.ts (1)
1-1: Renameutlis.ts→utils.tsand update importsRename file:
- packages/clerk-js/src/ui/components/OrganizationSwitcher/tests/utlis.ts → packages/clerk-js/src/ui/components/OrganizationSwitcher/tests/utils.ts
Update imports (replace
utlis→utils) in:
- packages/clerk-js/src/ui/hooks/tests/useCoreOrganization.test.tsx (line 12)
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/tests/TaskChooseOrganization.test.tsx (line 5)
- packages/clerk-js/src/ui/components/OrganizationSwitcher/tests/OrganizationSwitcher.test.tsx (line 13)
- packages/clerk-js/src/ui/components/OrganizationList/tests/OrganizationList.test.tsx (line 10)
packages/clerk-js/src/test/mock-helpers.ts (1)
39-41: Fix optional chaining bug that can throw when options is undefined
options?.exclude.includes(...)will access.includesonundefined. Use safe chaining with a default.Apply:
- .filter(key => !options?.exclude.includes(key as keyof T)) + .filter(key => !(options?.exclude?.includes(key as keyof T) ?? false))packages/clerk-js/src/core/__tests__/fapiClient.test.ts (1)
290-315: Retry attempt expectation off by oneFirst retry should be attempt=1, second retry attempt=2. Current test expects 2 for both.
Apply:
- const secondCall = (fetch as Mock).mock.calls[1]; - expect(secondCall[0].toString()).toMatch(/_clerk_retry_attempt=2/); + const secondCall = (fetch as Mock).mock.calls[1]; + expect(secondCall[0].toString()).toMatch(/_clerk_retry_attempt=1/); const thirdCall = (fetch as Mock).mock.calls[2]; expect(thirdCall[0].toString()).toMatch(/_clerk_retry_attempt=2/);packages/clerk-js/src/core/__tests__/clerk.test.ts (1)
342-359: Undefined variable ‘status’ in test data
statusisn’t defined in this scope. Set explicit value.Apply:
-const mockSession2 = { - id: '1', - status, +const mockSession2 = { + id: '1', + status: 'active',packages/clerk-js/src/ui/elements/__tests__/LinkRenderer.test.tsx (1)
34-44: Bug: Promise from findByText is never awaited; test can pass falsely. Also missing assertion that the malformed link isn’t rendered as an anchor.Fix by asserting the raw text is present and the broken “Terms of Service” link is absent.
Apply:
- screen.findByText('[Terms of Service]https://example.com/terms)'); - expect(screen.queryByRole('link', { name: 'Privacy Policy' })).toBeInTheDocument(); + expect(screen.getByText('[Terms of Service]https://example.com/terms)')).toBeInTheDocument(); + expect(screen.queryByRole('link', { name: 'Terms of Service' })).not.toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Privacy Policy' })).toBeInTheDocument();packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx (1)
615-631: Brittle window.location stubbing; make it robust and assert a mailto: URLOverriding
window.locationwithoutconfigurable: truecan fail in jsdom, and asserting only the href setter path breaks if production useslocation.assign. Capture both code paths and assert the URL.- const assignMock = vi.fn(); - const mockResponse = vi.fn(); - Object.defineProperty(window, 'location', { - value: { - set href(_) { - assignMock(); - }, - get href() { - return ''; - }, - assign: mockResponse, - }, - writable: true, - }); - await userEvent.click(screen.getByText('Email support')); - expect(assignMock).toHaveBeenCalled(); + const hrefSetSpy = vi.fn(); + const assignSpy = vi.fn(); + Object.defineProperty(window, 'location', { + configurable: true, + writable: true, + value: { + assign: assignSpy, + get href() { + return ''; + }, + set href(value) { + hrefSetSpy(value); + }, + }, + }); + await userEvent.click(screen.getByText('Email support')); + // One of the two should be used + expect(hrefSetSpy.mock.calls.length + assignSpy.mock.calls.length).toBeGreaterThan(0); + const url = hrefSetSpy.mock.calls[0]?.[0] ?? assignSpy.mock.calls[0]?.[0]; + expect(url).toMatch(/^mailto:/);packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfileSection.test.tsx (1)
327-336: Fix: typing into label text instead of input will fail; query the textbox via labelUsing getByText returns the label element, which is not typeable. Also prefer toBeDisabled for clarity.
- const { userEvent, getByRole, getByText } = render(<UserProfileSection />, { wrapper }); + const { userEvent, getByRole, getByText, getByLabelText } = render(<UserProfileSection />, { wrapper }); @@ - expect(getByText(/save$/i, { exact: false }).closest('button')).toHaveAttribute('disabled'); - await userEvent.type(screen.getByText(/First name/i), 'George'); - expect(getByText(/save$/i, { exact: false }).closest('button')).not.toHaveAttribute('disabled'); + const saveBtn = getByRole('button', { name: /save/i }); + expect(saveBtn).toBeDisabled(); + await userEvent.type(getByLabelText(/first name/i), 'George'); + expect(saveBtn).not.toBeDisabled();packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx (1)
320-394: Freeze time for “ends in 14 days” assertionsThe “14 days” copy is time‑relative; this will flake after Aug 19, 2025. Freeze system time in this test.
it('renders free trial details during confirmation stage', async () => { + vi.useFakeTimers(); + vi.setSystemTime(new Date('2025-08-05')); const { wrapper, fixtures } = await createFixtures(… … await waitFor(() => { … }); + vi.useRealTimers(); });packages/clerk-js/vitest.setup.mts (1)
41-46: Don’t overwrite globals unconditionally (Response/TextEncoder/TextDecoder/crypto)Overriding an existing Fetch Response breaks code relying on the real API.
- Object.defineProperties(globalThis, { - TextDecoder: { value: TextDecoder }, - TextEncoder: { value: TextEncoder }, - Response: { value: FakeResponse }, - crypto: { value: crypto.webcrypto }, - }); + const defs: PropertyDescriptorMap = {}; + if (!('TextDecoder' in globalThis)) defs.TextDecoder = { value: TextDecoder }; + if (!('TextEncoder' in globalThis)) defs.TextEncoder = { value: TextEncoder }; + if (!('Response' in globalThis)) defs.Response = { value: FakeResponse }; + if (!('crypto' in globalThis)) defs.crypto = { value: crypto.webcrypto }; + if (Object.keys(defs).length) { + Object.defineProperties(globalThis, defs); + }packages/clerk-js/src/ui/components/OrganizationList/__tests__/OrganizationList.test.tsx (1)
10-10: Fix broken import path: likely typo "utlis" → "vitestUtils" (or "utils").This import will fail at runtime.
Apply one of the following (pick the correct helper file name that exists in repo):
-import { - createFakeUserOrganizationInvitation, - createFakeUserOrganizationMembership, -} from '../../OrganizationSwitcher/__tests__/utlis'; +import { + createFakeUserOrganizationInvitation, + createFakeUserOrganizationMembership, +} from '../../OrganizationSwitcher/__tests__/vitestUtils';packages/clerk-js/src/test/create-fixtures.tsx (1)
60-62: Avoid pk_live‑looking literal to prevent secret scanners.Even if non‑secret, a pk_live_ prefix may trigger false positives. Use a clearly fake test key.
-const productionPublishableKey = 'pk_live_Y2xlcmsuYWJjZWYuMTIzNDUucHJvZC5sY2xjbGVyay5jb20k'; +const productionPublishableKey = 'pk_test_mock_for_fixtures_only_do_not_use';packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx (1)
10-13: Fix likely typo in import path ('utlis' → 'utils')This path will fail if the file is named utils. Recommend correcting.
Apply this diff:
-import { +import { createFakeUserOrganizationInvitation, createFakeUserOrganizationMembership, createFakeUserOrganizationSuggestion, -} from './utlis'; +} from './utils';packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx (1)
127-131: Bug: Misuse of act — you’re destructuring the render() result from act(), which returns void.await act(() => render(...)) resolves to undefined; destructuring from it will crash. Call render() normally; use findBy* or waitFor for async work.
-const { queryByText } = await act(() => render(<OrganizationGeneralPage />, { wrapper })); +const { queryByText } = render(<OrganizationGeneralPage />, { wrapper }); ... -const { queryByText } = await act(() => render(<OrganizationGeneralPage />, { wrapper })); +const { queryByText } = render(<OrganizationGeneralPage />, { wrapper }); ... -const { queryByText } = await act(() => render(<OrganizationGeneralPage />, { wrapper })); +const { queryByText } = render(<OrganizationGeneralPage />, { wrapper }); ... -const { findByRole, queryByRole } = await act(() => render(<OrganizationGeneralPage />, { wrapper })); +const { findByRole, queryByRole } = render(<OrganizationGeneralPage />, { wrapper });Also applies to: 148-154, 171-177, 189-192
packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
Outdated
Show resolved
Hide resolved
packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx
Outdated
Show resolved
Hide resolved
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
jacekradko
force-pushed
the
chore/clerk-js-vitest
branch
from
a0d248b to
0a561b6
Compare
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx (1)
127-131: Fix incorrect act() usage around render.await act(() => render(...)) returns void; destructuring from it will crash. Render already wraps updates. Replace with plain render and await findBy*/waitFor as needed. Also replace sleep(100) with waitFor.
Apply:
-const { queryByText } = await act(() => render(<OrganizationGeneralPage />, { wrapper })); -await new Promise(r => setTimeout(r, 100)); +const { queryByText } = render(<OrganizationGeneralPage />, { wrapper }); +await waitFor(() => { + expect(queryByText('Verified domains')).not.toBeInTheDocument(); +});Apply similarly in the other occurrences (lines 148-151, 171-177, 189-192): remove act-wrapping, use render(...), and replace arbitrary timeouts with waitFor on the specific assertion.
Also applies to: 148-151, 171-177, 189-192 </blockquote></details> <details> <summary>packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx (1)</summary><blockquote> `615-631`: **Restore window.location after mocking to avoid cross-test leaks.** Overriding window.location persists beyond this test. Save the original and restore it after assertions. Apply: ```diff -const assignMock = vi.fn(); -const mockResponse = vi.fn(); -Object.defineProperty(window, 'location', { +const assignMock = vi.fn(); +const mockResponse = vi.fn(); +const originalLocation = window.location; +Object.defineProperty(window, 'location', { value: { set href(_) { assignMock(); }, get href() { return ''; }, assign: mockResponse, }, writable: true, }); await userEvent.click(screen.getByText('Email support')); expect(assignMock).toHaveBeenCalled(); +Object.defineProperty(window, 'location', { value: originalLocation, writable: true });
🧹 Nitpick comments (19)
packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx (2)
27-36: Prefer async timer helpers to avoid flakiness (and auto‑flush microtasks).Using
vi.advanceTimersByTimeAsyncmakes the test more robust when the callback schedules additional microtasks.Apply:
- vi.useFakeTimers(); + vi.useFakeTimers(); try { render(<ResetPasswordSuccess />, { wrapper }); - vi.advanceTimersByTime(1000); + await vi.advanceTimersByTimeAsync(1000); expect(fixtures.clerk.setActive).not.toHaveBeenCalled(); - vi.advanceTimersByTime(1000); + await vi.advanceTimersByTimeAsync(1000); expect(fixtures.clerk.setActive).toHaveBeenCalled(); } finally { vi.useRealTimers(); }Optional: if you don’t want to couple to the exact delay, replace the two advances with a single
await vi.runOnlyPendingTimersAsync().
41-48: Mirror async timer usage in the “missing createdSessionId” test.Keeps semantics identical while improving determinism.
- vi.useFakeTimers(); + vi.useFakeTimers(); try { render(<ResetPasswordSuccess />, { wrapper }); - vi.advanceTimersByTime(2000); + await vi.advanceTimersByTimeAsync(2000); expect(fixtures.clerk.setActive).not.toHaveBeenCalled(); } finally { vi.useRealTimers(); }packages/clerk-js/src/test/mock-helpers.ts (6)
6-6: Prefer unknown over any in FunctionLike.Tighten typing to satisfy no-explicit-any and TS best practices.
Apply:
-type FunctionLike = (...args: any) => any; +type FunctionLike = (...args: unknown[]) => unknown;
8-15: Deep mocked type should preserve arrays.Without a special-case, arrays devolve into object key maps. Add an array branch.
Apply:
-type DeepVitestMocked<T> = T extends FunctionLike - ? Mocked<T> - : T extends object - ? { - [k in keyof T]: DeepVitestMocked<T[k]>; - } - : T; +type DeepVitestMocked<T> = T extends FunctionLike + ? Mocked<T> + : T extends readonly (infer U)[] + ? DeepVitestMocked<U>[] + : T extends object + ? { [k in keyof T]: DeepVitestMocked<T[k]> } + : T;
17-19: Avoid any in MockMap’s function guard.Use unknown for args/return and default generic to unknown.
Apply:
-type MockMap<T = any> = { - [K in { [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never }[keyof T]]?: ReturnType<typeof vi.fn>; +type MockMap<T = unknown> = { + [K in { [K in keyof T]: T[K] extends (...args: unknown[]) => unknown ? K : never }[keyof T]]?: ReturnType<typeof vi.fn>; };
28-42: Guard optional options.exclude to avoid a runtime TypeError; also remove any defaults.Calling .includes on undefined will throw if options is provided without exclude. Make fields optional and tighten generics.
Apply:
-const mockMethodsOf = <T extends Record<string, any> | null = any>( +const mockMethodsOf = <T extends Record<string, unknown> | null = Record<string, unknown> | null>( obj: T, options?: { - exclude: (keyof T)[]; - mocks: MockMap<T>; + exclude?: ReadonlyArray<keyof T>; + mocks?: MockMap<T>; }, ) => { if (!obj) { return; } Object.keys(obj) - .filter(key => !options?.exclude.includes(key as keyof T)) + .filter(key => !options?.exclude?.includes(key as keyof T)) // Pass the specific MockMap for the object T being mocked .forEach(k => mockProp(obj, k, options?.mocks)); };
44-47: Document or scope the any casts.Given these helpers intentionally mutate unknown Clerk shapes, add a brief comment justifying the any casts (or locally disable no-explicit-any for this block) to satisfy lint rules.
86-104: Add explicit return type and default param.Aligns with “explicit return types” guideline and avoids required arg when using defaults.
Apply:
-export const mockRouteContextValue = ({ queryString = '' }: Partial<DeepVitestMocked<RouteContextValue>>) => { +export const mockRouteContextValue = ( + { queryString = '' }: Partial<DeepVitestMocked<RouteContextValue>> = {}, +): RouteContextValue => { return { basePath: '', startPath: '', flowStartPath: '', fullPath: '', indexPath: '', currentPath: '', queryString, queryParams: {}, getMatchData: vi.fn(), matches: vi.fn(), baseNavigate: vi.fn(), navigate: vi.fn(() => Promise.resolve(true)), resolve: vi.fn((to: string) => new URL(to, 'https://clerk.com')), refresh: vi.fn(), params: {}, - } as RouteContextValue; // Keep original type assertion, DeepVitestMocked applied to input only + } as RouteContextValue; // Keep original type assertion, DeepVitestMocked applied to input only };packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx (1)
135-139: Optional: useuserEvent.setup()for consistency and better control.This aligns with RTL guidance and makes timers/interactions explicit.
- await userEvent.click(getByRole('button', { name: /set error/i })); + const user = userEvent.setup(); + await user.click(getByRole('button', { name: /set error/i }));packages/clerk-js/src/core/modules/checkout/__tests__/manager.test.ts (2)
107-107: Deduplicate verbose listener/capturedState annotations.Avoid repeating the full function/type signature; introduce a local alias and use it at call sites.
Add once near the imports (adjust the inner type to your choice of alias from Line 1):
type CacheListener = MockedFunction<(state: CheckoutCacheState) => void>;Then update occurrences:
-const listener: MockedFunction<(state: __experimental_CheckoutCacheState) => void> = vi.fn(); +const listener: CacheListener = vi.fn(); -let capturedState: __experimental_CheckoutCacheState | null = null; +let capturedState: CheckoutCacheState | null = null;Alternative (drops the
MockedFunctionimport entirely):// Example at call sites const listener = vi.fn<(state: CheckoutCacheState) => void>();Also applies to: 116-116, 140-141, 167-167, 213-213, 317-317, 482-482, 546-546, 598-599, 663-664
1-1: Alias experimental type to reduce churn/readability noise.Import the experimental type with a stable local alias and use it throughout the test (update import in packages/clerk-js/src/core/modules/checkout/tests/manager.test.ts:1).
-import type { __experimental_CheckoutCacheState, BillingCheckoutResource, ClerkAPIResponseError } from '@clerk/types'; +import type { + __experimental_CheckoutCacheState as CheckoutCacheState, + BillingCheckoutResource, + ClerkAPIResponseError, +} from '@clerk/types';packages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx (2)
1-5: Type thewrapperto avoid implicitanyand add explicit return typePrevents TS/ESLint complaints in strict setups.
Apply:
import { describe, expect, it } from 'vitest'; +import type { PropsWithChildren } from 'react'; @@ -const wrapper = ({ children }) => <AppearanceProvider appearanceKey='signIn'>{children}</AppearanceProvider>; +const wrapper = ({ children }: PropsWithChildren): JSX.Element => ( + <AppearanceProvider appearanceKey='signIn'>{children}</AppearanceProvider> +);Also applies to: 36-36
35-35: Typo in test name“classses” → “classes”.
-it('setting an undefined elementId should add no more classses', () => { +it('setting an undefined elementId should add no more classes', () => {packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx (1)
264-269: Avoid brittle DOM traversal to find action buttons.The parentElement/children[1] chains are fragile. Prefer accessible queries (role/name) or, if not available, a small helper that scopes queries within the located item to find its button. Consider adding an aria-label to the trigger in the UI for testability, or centralize this selection in a helper to avoid duplication.
If keeping DOM traversal, please confirm it survives current markup changes by running these tests in headed mode.
Also applies to: 311-313, 345-346
packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx (1)
70-90: Prefer accessible queries over querySelector for the spinner.Using role-based queries (e.g., getByRole('status') or a test id) is less brittle than querying aria-live directly. If the spinner isn’t exposed with a role, consider adding one or a data-testid.
packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsx (1)
532-543: Tighten selector for length error to reduce flakiness.The /or more/i matcher is broad; consider narrowing to the full message or scoping with within(screen.getByRole('group', {name: /password/i})) to avoid incidental matches.
packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx (1)
1-7: Use the render-provided userEvent (const { userEvent } = render(...))Direct imports of userEvent bypass the project's test render helper (packages/clerk-js/src/test/utils.ts), which does: const user = userEvent.setup({ delay: null }); return { ..._render(ui, ...), userEvent: user }. Replace imports like
import userEvent from '@testing-library/user-event' (or import { userEvent } ...) with using the userEvent returned by render to ensure consistent config and typing.
- What to change: remove direct userEvent imports and use const { userEvent, ... } = render(...).
- Evidence: packages/clerk-js/src/test/utils.ts returns a configured userEvent via userEvent.setup({ delay: null }).
- Sample files to update: packages/clerk-js/src/ui/components/OrganizationProfile/tests/OrganizationGeneralPage.test.tsx, OrganizationMembers.test.tsx, packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/tests/TaskChooseOrganization.test.tsx, packages/clerk-js/src/ui/elements/tests/PlainInput.test.tsx, and many other tests that directly import userEvent.
To list all occurrences run: rg -n --hidden -S "from\s+['"]@testing-library/user-event['"]".
packages/clerk-js/src/test/fixtures.ts (2)
141-157: Good removal ofanycast; consider avoiding the final cast with a typed helper.Avoid
as UserSettingsJSON['attributes']by building a typed record and usingsatisfies.Apply:
- const attributeConfig = Object.fromEntries( - attributes.map(attribute => [ - attribute, - { - enabled: false, - required: false, - used_for_first_factor: false, - first_factors: [], - used_for_second_factor: false, - second_factors: [], - verifications: [], - verify_at_sign_up: false, - }, - ]), - ) as UserSettingsJSON['attributes']; + const attributeConfig = + recordFromKeys(attributes, () => ({ + enabled: false, + required: false, + used_for_first_factor: false, + first_factors: [], + used_for_second_factor: false, + second_factors: [], + verifications: [], + verify_at_sign_up: false, + })) satisfies UserSettingsJSON['attributes'];Add once (outside this block):
function recordFromKeys<K extends string, V>(keys: readonly K[], make: (key: K) => V): Record<K, V> { return keys.reduce((acc, k) => { acc[k] = make(k); return acc; }, {} as Record<K, V>); }
158-168: Mirror the typed-helper pattern forsocialConfigto drop the cast entirely.Keeps keys and values strongly typed and future-proof with
satisfies.Apply:
- const socialConfig: UserSettingsJSON['social'] = Object.fromEntries( - socials.map(social => [ - social, - { - enabled: false, - required: false, - authenticatable: false, - strategy: social, - }, - ]), - ); + const socialConfig = + recordFromKeys(socials, social => ({ + enabled: false, + required: false, + authenticatable: false, + strategy: social, + })) satisfies UserSettingsJSON['social'];
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (97)
eslint.config.mjs(2 hunks)packages/clerk-js/jest.config.js(0 hunks)packages/clerk-js/jest.jsdom-with-timezone.ts(0 hunks)packages/clerk-js/jest.setup-after-env.ts(0 hunks)packages/clerk-js/jest.setup.ts(0 hunks)packages/clerk-js/package.json(1 hunks)packages/clerk-js/src/core/__tests__/clerk.redirects.test.ts(0 hunks)packages/clerk-js/src/core/__tests__/clerk.test.ts(59 hunks)packages/clerk-js/src/core/__tests__/fapiClient.test.ts(3 hunks)packages/clerk-js/src/core/auth/__tests__/getCookieDomain.test.ts(1 hunks)packages/clerk-js/src/core/modules/checkout/__tests__/manager.test.ts(11 hunks)packages/clerk-js/src/core/resources/__tests__/Client.test.ts(1 hunks)packages/clerk-js/src/core/resources/__tests__/Session.test.ts(1 hunks)packages/clerk-js/src/core/resources/__tests__/Token.test.ts(1 hunks)packages/clerk-js/src/core/test/fixtures.ts(0 hunks)packages/clerk-js/src/test/create-fixtures.tsx(1 hunks)packages/clerk-js/src/test/fixture-helpers.ts(5 hunks)packages/clerk-js/src/test/fixtures.ts(3 hunks)packages/clerk-js/src/test/mock-helpers.ts(3 hunks)packages/clerk-js/src/test/utils.ts(3 hunks)packages/clerk-js/src/testUtils.ts(0 hunks)packages/clerk-js/src/ui/common/__tests__/withRedirect.test.tsx(1 hunks)packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx(14 hunks)packages/clerk-js/src/ui/components/CreateOrganization/__tests__/CreateOrganization.test.tsx(2 hunks)packages/clerk-js/src/ui/components/OrganizationList/__tests__/OrganizationList.test.tsx(2 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx(24 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/LeaveOrganizationPage.test.tsx(3 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx(10 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx(7 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx(1 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx(5 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts(5 hunks)packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx(1 hunks)packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/utlis.ts(4 hunks)packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx(4 hunks)packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx(9 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx(18 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsx(3 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx(2 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx(26 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.test.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx(21 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx(6 hunks)packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx(3 hunks)packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx(3 hunks)packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx(3 hunks)packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx(1 hunks)packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx(6 hunks)packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx(18 hunks)packages/clerk-js/src/ui/components/UserButton/__tests__/UserButton.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/AccountPage.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx(2 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/EmailsSection.test.tsx(9 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/EnterpriseAccountsSection.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx(12 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/PasskeysSection.test.tsx(6 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsx(6 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx(11 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsx(6 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfileSection.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/UsernameSection.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorOne.test.tsx(3 hunks)packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsx(6 hunks)packages/clerk-js/src/ui/components/Waitlist/__tests__/Waitlist.test.tsx(1 hunks)packages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx(1 hunks)packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx(15 hunks)packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx(1 hunks)packages/clerk-js/src/ui/customizables/__tests__/testUtils.ts(0 hunks)packages/clerk-js/src/ui/customizables/__tests__/vitestUtils.ts(1 hunks)packages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsx(1 hunks)packages/clerk-js/src/ui/elements/__tests__/LinkRenderer.test.tsx(1 hunks)packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx(1 hunks)packages/clerk-js/src/ui/elements/__tests__/RadioGroup.test.tsx(1 hunks)packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx(1 hunks)packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx(1 hunks)packages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsx(1 hunks)packages/clerk-js/src/ui/hooks/__tests__/usePasswordComplexity.test.tsx(1 hunks)packages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsx(2 hunks)packages/clerk-js/src/ui/localization/__tests__/parseLocalization.test.tsx(1 hunks)packages/clerk-js/src/ui/utils/__tests__/passwordUtils.test.tsx(1 hunks)packages/clerk-js/src/ui/utils/test/createFixtures.tsx(0 hunks)packages/clerk-js/src/ui/utils/test/mockHelpers.ts(0 hunks)packages/clerk-js/src/ui/utils/test/runFakeTimers.ts(0 hunks)packages/clerk-js/src/ui/utils/vitest/fixtureHelpers.ts(0 hunks)packages/clerk-js/src/ui/utils/vitest/fixtures.ts(0 hunks)packages/clerk-js/src/ui/utils/vitest/runFakeTimers.ts(0 hunks)packages/clerk-js/src/utils/__tests__/captcha.test.ts(1 hunks)packages/clerk-js/tsconfig.json(1 hunks)packages/clerk-js/tsconfig.test.json(0 hunks)packages/clerk-js/turbo.json(0 hunks)packages/clerk-js/vitest.config.mts(4 hunks)packages/clerk-js/vitest.setup.mts(2 hunks)packages/nextjs/src/server/__tests__/clerkMiddleware.test.ts(0 hunks)packages/vue/src/utils/__tests__/useCustomElementPortal.test.ts(1 hunks)
💤 Files with no reviewable changes (17)
- packages/clerk-js/jest.jsdom-with-timezone.ts
- packages/clerk-js/src/core/tests/clerk.redirects.test.ts
- packages/clerk-js/jest.setup.ts
- packages/clerk-js/src/ui/utils/test/createFixtures.tsx
- packages/clerk-js/src/ui/utils/vitest/fixtureHelpers.ts
- packages/clerk-js/src/ui/utils/test/runFakeTimers.ts
- packages/nextjs/src/server/tests/clerkMiddleware.test.ts
- packages/clerk-js/jest.config.js
- packages/clerk-js/src/ui/utils/vitest/runFakeTimers.ts
- packages/clerk-js/src/ui/utils/test/mockHelpers.ts
- packages/clerk-js/src/testUtils.ts
- packages/clerk-js/src/core/test/fixtures.ts
- packages/clerk-js/src/ui/utils/vitest/fixtures.ts
- packages/clerk-js/src/ui/customizables/tests/testUtils.ts
- packages/clerk-js/jest.setup-after-env.ts
- packages/clerk-js/tsconfig.test.json
- packages/clerk-js/turbo.json
✅ Files skipped from review due to trivial changes (1)
- packages/clerk-js/tsconfig.json
🚧 Files skipped from review as they are similar to previous changes (60)
- packages/clerk-js/src/ui/components/UserProfile/tests/AccountPage.test.tsx
- packages/clerk-js/src/core/tests/fapiClient.test.ts
- packages/clerk-js/src/ui/components/UserProfile/tests/ConnectedAccountsSection.test.tsx
- packages/clerk-js/src/ui/components/UserProfile/tests/UserProfileSection.test.tsx
- packages/clerk-js/src/core/resources/tests/Token.test.ts
- packages/clerk-js/src/ui/components/UserProfile/tests/EnterpriseAccountsSection.test.tsx
- packages/clerk-js/src/ui/components/PricingTable/tests/PricingTable.test.tsx
- packages/clerk-js/src/ui/components/OrganizationProfile/tests/ProfileSettingsPage.test.tsx
- packages/clerk-js/src/ui/hooks/tests/useEnabledThirdPartyProviders.test.tsx
- packages/clerk-js/src/ui/components/SignUp/tests/SignUpContinue.test.tsx
- packages/clerk-js/src/ui/components/OrganizationProfile/tests/OrganizationMembers.test.tsx
- packages/clerk-js/src/ui/components/UserVerification/tests/UVFactorOne.test.tsx
- eslint.config.mjs
- packages/clerk-js/src/ui/components/UserProfile/tests/UserProfile.test.tsx
- packages/clerk-js/src/ui/components/UserButton/tests/UserButton.test.tsx
- packages/clerk-js/src/ui/components/UserVerification/tests/UVFactorTwo.test.tsx
- packages/clerk-js/src/ui/components/OrganizationList/tests/OrganizationList.test.tsx
- packages/clerk-js/src/ui/components/SignUp/tests/SignUpEmailLinkFlowComplete.test.tsx
- packages/clerk-js/src/utils/tests/captcha.test.ts
- packages/clerk-js/src/ui/hooks/tests/useCoreOrganization.test.tsx
- packages/clerk-js/src/ui/components/UserProfile/tests/PasskeysSection.test.tsx
- packages/clerk-js/src/ui/components/Subscriptions/tests/SubscriptionsList.test.tsx
- packages/clerk-js/src/ui/components/UserProfile/tests/UsernameSection.test.tsx
- packages/clerk-js/src/ui/hooks/tests/useCoreOrganizationList.test.tsx
- packages/clerk-js/src/ui/components/OrganizationProfile/tests/OrganizationProfile.test.tsx
- packages/clerk-js/src/ui/components/SignIn/tests/SignInAccountSwitcher.test.tsx
- packages/clerk-js/src/core/tests/clerk.test.ts
- packages/clerk-js/src/ui/localization/tests/parseLocalization.test.tsx
- packages/clerk-js/src/core/resources/tests/Session.test.ts
- packages/clerk-js/package.json
- packages/clerk-js/src/ui/components/Waitlist/tests/Waitlist.test.tsx
- packages/clerk-js/src/ui/hooks/tests/usePasswordComplexity.test.tsx
- packages/clerk-js/src/ui/components/Checkout/tests/Checkout.test.tsx
- packages/clerk-js/src/ui/components/OrganizationSwitcher/tests/OrganizationSwitcher.test.tsx
- packages/vue/src/utils/tests/useCustomElementPortal.test.ts
- packages/clerk-js/src/test/create-fixtures.tsx
- packages/clerk-js/src/ui/customizables/tests/makeCustomizable.test.tsx
- packages/clerk-js/src/ui/components/SignIn/tests/SignInStart.test.tsx
- packages/clerk-js/src/ui/components/UserProfile/tests/EmailsSection.test.tsx
- packages/clerk-js/src/core/auth/tests/getCookieDomain.test.ts
- packages/clerk-js/vitest.setup.mts
- packages/clerk-js/src/ui/components/SignUp/tests/SignUpStart.test.tsx
- packages/clerk-js/src/ui/components/OrganizationProfile/tests/LeaveOrganizationPage.test.tsx
- packages/clerk-js/vitest.config.mts
- packages/clerk-js/src/ui/utils/tests/passwordUtils.test.tsx
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/tests/TaskChooseOrganization.test.tsx
- packages/clerk-js/src/ui/components/OrganizationSwitcher/tests/utlis.ts
- packages/clerk-js/src/ui/components/SignUp/tests/SignUpVerifyEmail.test.tsx
- packages/clerk-js/src/ui/components/SignIn/tests/ResetPassword.test.tsx
- packages/clerk-js/src/ui/customizables/tests/parseAppearance.test.tsx
- packages/clerk-js/src/ui/elements/tests/LinkRenderer.test.tsx
- packages/clerk-js/src/ui/customizables/tests/vitestUtils.ts
- packages/clerk-js/src/ui/components/UserProfile/tests/PhoneSection.test.tsx
- packages/clerk-js/src/ui/components/SignIn/tests/SignInFactorOne.test.tsx
- packages/clerk-js/src/ui/common/tests/withRedirect.test.tsx
- packages/clerk-js/src/core/resources/tests/Client.test.ts
- packages/clerk-js/src/ui/elements/tests/RadioGroup.test.tsx
- packages/clerk-js/src/ui/components/SubscriptionDetails/tests/SubscriptionDetails.test.tsx
- packages/clerk-js/src/ui/components/SignIn/tests/SignInFactorOneCodeForm.test.tsx
- packages/clerk-js/src/ui/components/CreateOrganization/tests/CreateOrganization.test.tsx
🧰 Additional context used
📓 Path-based instructions (13)
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/core/modules/checkout/__tests__/manager.test.tspackages/clerk-js/src/test/mock-helpers.tspackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.tspackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/core/modules/checkout/__tests__/manager.test.tspackages/clerk-js/src/test/mock-helpers.tspackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.tspackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/core/modules/checkout/__tests__/manager.test.tspackages/clerk-js/src/test/mock-helpers.tspackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.tspackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/core/modules/checkout/__tests__/manager.test.tspackages/clerk-js/src/test/mock-helpers.tspackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.tspackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/core/modules/checkout/__tests__/manager.test.tspackages/clerk-js/src/test/mock-helpers.tspackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.tspackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
packages/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Unit tests should use Jest or Vitest as the test runner.
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/modules/checkout/__tests__/manager.test.tspackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
packages/{clerk-js,elements,themes}/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Visual regression testing should be performed for UI components.
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/modules/checkout/__tests__/manager.test.tspackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/core/modules/checkout/__tests__/manager.test.tspackages/clerk-js/src/test/mock-helpers.tspackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.tspackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
**/*.test.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
**/__tests__/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces
Files:
packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsxpackages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/modules/checkout/__tests__/manager.test.tspackages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx
🧬 Code graph analysis (7)
packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsx (2)
packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx (1)
PasswordSection(20-68)packages/clerk-js/src/test/utils.ts (3)
waitFor(73-73)screen(72-72)fireEvent(74-74)
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx (3)
packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx (1)
SignInFactorTwo(85-87)packages/types/src/signIn.ts (1)
SignInResource(34-91)packages/shared/src/error.ts (1)
parseError(158-173)
packages/clerk-js/src/core/modules/checkout/__tests__/manager.test.ts (1)
packages/types/src/clerk.ts (1)
__experimental_CheckoutCacheState(66-73)
packages/clerk-js/src/test/fixture-helpers.ts (1)
packages/types/src/json.ts (1)
EnvironmentJSON(83-92)
packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx (3)
packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx (1)
MfaSection(21-152)packages/types/src/phoneNumber.ts (1)
PhoneNumberResource(23-39)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
CardStateProvider(20-40)
packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx (3)
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx (1)
OrganizationGeneralPage(57-83)packages/clerk-js/src/test/utils.ts (2)
waitFor(73-73)act(75-75)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
CardStateProvider(20-40)
packages/clerk-js/src/test/fixtures.ts (1)
packages/types/src/userSettings.ts (1)
UserSettingsJSON(111-129)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
| export const createBaseClientJSON = (): ClientJSON => { | ||
| return {} as ClientJSON; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
🧩 Analysis chain
Don’t return {} cast as ClientJSON; provide safe defaults and allow overrides.
{} as ClientJSON can mask missing fields and cause runtime TypeErrors in tests.
Apply:
-export const createBaseClientJSON = (): ClientJSON => {
- return {} as ClientJSON;
-};
+/**
+ * Minimal ClientJSON fixture. Pass only the fields needed by your test.
+ */
+export const createBaseClientJSON = (overrides: Partial<ClientJSON> = {}): ClientJSON => {
+ const base = {
+ object: 'client',
+ id: 'client_1',
+ } as Partial<ClientJSON>;
+ return { ...base, ...overrides } as ClientJSON;
+};Please run a quick grep to spot call sites expecting fields not covered by the minimal defaults:
🏁 Script executed:
#!/bin/bash
rg -n -C2 --type=ts --type=tsx 'createBaseClientJSON\('Length of output: 27
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Searching repository for occurrences of createBaseClientJSON..."
rg -n -C2 "createBaseClientJSON" --hidden -S || true
echo
echo "Checking for the fixture file used in the review: packages/clerk-js/src/test/fixtures.ts"
if [ -f packages/clerk-js/src/test/fixtures.ts ]; then
echo "File found — printing lines 200..240:"
sed -n '200,240p' packages/clerk-js/src/test/fixtures.ts || true
else
echo "File not found at packages/clerk-js/src/test/fixtures.ts"
fiLength of output: 2380
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "*** create-fixtures.tsx (1..200) ***"
sed -n '1,200p' packages/clerk-js/src/test/create-fixtures.tsx || true
echo
echo "*** create-fixtures.tsx (201..400) ***"
sed -n '201,400p' packages/clerk-js/src/test/create-fixtures.tsx || true
echo
echo "*** fixture-helpers.* existence and head (if found) ***"
for f in packages/clerk-js/src/test/fixture-helpers{.ts,.tsx,.js,.jsx}; do
if [ -f "$f" ]; then
echo "FOUND: $f"
sed -n '1,240p' "$f" || true
fi
done
echo
echo "*** Searching for ClientJSON type occurrences ***"
rg -n --hidden -S '\bClientJSON\b' || true
rg -n --hidden -S 'type ClientJSON' || true
rg -n --hidden -S 'interface ClientJSON' || true
echo
echo "*** Searching for references that might access client fields (id, object, etc.) ***"
rg -n --hidden -S 'createBaseClientJSON|baseClient|client_1|\.id\b|\.object\b' || trueLength of output: 118035
Don't return {} cast as ClientJSON; provide safe defaults and allow overrides.
Returning {} as ClientJSON masks missing fields and can cause runtime TypeErrors in tests; createBaseClientJSON is consumed by create-fixtures.tsx and fixture-helpers (which mutate baseClient), so return a minimal valid fixture and accept overrides.
File: packages/clerk-js/src/test/fixtures.ts (replace lines ~219-221) — apply:
-export const createBaseClientJSON = (): ClientJSON => {
- return {} as ClientJSON;
-};
+/**
+ * Minimal ClientJSON fixture. Pass only the fields needed by your test.
+ */
+export const createBaseClientJSON = (overrides: Partial<ClientJSON> = {}): ClientJSON => {
+ const base = {
+ object: 'client',
+ id: 'client_1',
+ } as Partial<ClientJSON>;
+ return { ...base, ...overrides } as ClientJSON;
+};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const createBaseClientJSON = (): ClientJSON => { | |
| return {} as ClientJSON; | |
| }; | |
| /** | |
| * Minimal ClientJSON fixture. Pass only the fields needed by your test. | |
| */ | |
| export const createBaseClientJSON = (overrides: Partial<ClientJSON> = {}): ClientJSON => { | |
| const base = { | |
| object: 'client', | |
| id: 'client_1', | |
| } as Partial<ClientJSON>; | |
| return { ...base, ...overrides } as ClientJSON; | |
| }; |
🤖 Prompt for AI Agents
In packages/clerk-js/src/test/fixtures.ts around lines 219-221, replace the
unsafe return of an empty object cast to ClientJSON with a function that returns
a minimal, valid ClientJSON object containing required fields (e.g., id,
createdAt, updatedAt, emailAddresses: [], phoneNumbers: [], externalAccounts:
[], primaryEmailAddressId/primaryPhoneNumberId set to null or a valid id, etc.)
and accept an optional Partial<ClientJSON> overrides parameter; merge overrides
into the default with a shallow/deep merge as needed so tests and
fixture-helpers can mutate safely and TypeScript types are preserved.
packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts
Outdated
Show resolved
Hide resolved
packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts
Outdated
Show resolved
Hide resolved
jacekradko
force-pushed
the
chore/clerk-js-vitest
branch
from
0a561b6 to
10a7604
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
packages/clerk-js/src/core/modules/checkout/manager.ts (1)
104-104: Annotate return type of createCheckoutManager to stabilize the public APIPer guidelines, public APIs need explicit return types. This prevents accidental surface changes from inference shifts.
Add this interface near the top (after existing type aliases):
export interface CheckoutManager { subscribe(listener: (newState: __experimental_CheckoutCacheState) => void): () => void; getCacheState(): __experimental_CheckoutCacheState; executeOperation( operationType: 'start' | 'confirm', operationFn: () => Promise<BillingCheckoutResource>, ): Promise<CheckoutResult>; clearCheckout(): void; }Then annotate the factory:
-function createCheckoutManager(cacheKey: CheckoutKey) { +function createCheckoutManager(cacheKey: CheckoutKey): CheckoutManager {packages/clerk-js/src/test/fixture-helpers.ts (1)
252-260: Bug:verificationsbecomes boolean when both flags are false.
(supportEmailLink || supportEmailCode) && { ... }yieldsfalse, notnull/undefined. Returnnullwhen not enabled.- verifications: (supportEmailLink || supportEmailCode) && { + verifications: (supportEmailLink || supportEmailCode) ? { email_address: { strategy: (supportEmailLink && 'email_link') || (supportEmailCode && 'email_code'), status: emailVerificationStatus, }, - }, + } : null,packages/clerk-js/src/test/fixtures.ts (1)
14-25: Add missing required fields to createBaseEnvironmentJSONEnvironmentJSON requires maintenance_mode and api_keys_settings; createBaseEnvironmentJSON (packages/clerk-js/src/test/fixtures.ts, lines 14–25) currently omits them — add the minimal fields:
- maintenance_mode: false
- api_keys_settings: { object: 'api_keys_settings', id: 'api_keys_settings_1', enabled: false }
packages/clerk-js/src/test/create-fixtures.tsx (1)
52-58: Avoid mutating singletons — spy on instance methods and restore mocksFile: packages/clerk-js/src/test/create-fixtures.tsx (lines 52–58). Replace direct assignments to singleton fetch methods with instance spies:
-Environment.getInstance().fetch = vi.fn(() => Promise.resolve(environmentMock)); +const envInstance = Environment.getInstance(); +vi.spyOn(envInstance, 'fetch').mockResolvedValue(environmentMock); -// @ts-expect-error We cannot mess with the singleton when tests are running in parallel -const clientMock = new Client(baseClient); -Client.getOrCreateInstance().fetch = vi.fn(() => Promise.resolve(clientMock)); +const clientMock = new Client(baseClient); +const clientInstance = Client.getOrCreateInstance(); +vi.spyOn(clientInstance, 'fetch').mockResolvedValue(clientMock);Ensure test teardown restores mocks (e.g., add afterEach(() => vi.restoreAllMocks()) in shared test setup).
🧹 Nitpick comments (15)
packages/clerk-js/src/core/resources/__tests__/Session.test.ts (1)
25-31: Type the spy variable for consistency with later block.Mirror the stronger typing used in the second describe.
- let dispatchSpy; + let dispatchSpy: ReturnType<typeof vi.spyOn>;packages/clerk-js/package.json (1)
54-54: Prefervitest runover--watch=falsefor CI clarity.
vitest runis the canonical non-watch mode and reads CI env correctly.Apply this diff:
- "test": "vitest --watch=false", + "test": "vitest run",packages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx (3)
8-8: Trim trailing space in test name.Apply:
-it('default stable class is added to the element ', () => { +it('default stable class is added to the element', () => {
35-35: Fix typo: “classses” → “classes”.-it('setting an undefined elementId should add no more classses', () => { +it('setting an undefined elementId should add no more classes', () => {
36-36: Type the wrapper for TS strictness.+import type { PropsWithChildren } from 'react'; @@ - const wrapper = ({ children }) => <AppearanceProvider appearanceKey='signIn'>{children}</AppearanceProvider>; + const wrapper = ({ children }: PropsWithChildren) => ( + <AppearanceProvider appearanceKey='signIn'>{children}</AppearanceProvider> + );packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx (4)
5-7: Prefer alias imports for consistency with the rest of the suite.-import { InternalThemeProvider } from '../../styledSystem'; -import { Box, descriptors } from '..'; -import { AppearanceProvider } from '../AppearanceContext'; +import { InternalThemeProvider } from '@/ui/customizables/styledSystem'; +import { Box, descriptors } from '@/ui/customizables'; +import { AppearanceProvider } from '@/ui/customizables/AppearanceContext';
90-106: Type wrapper functions and reduce duplication.Add PropsWithChildren typing; consider extracting a small makeWrapper helper to DRY.
+import type { PropsWithChildren } from 'react'; @@ - const wrapper = ({ children }) => ( + const wrapper = ({ children }: PropsWithChildren) => ( @@ - const wrapper = ({ children }) => ( + const wrapper = ({ children }: PropsWithChildren) => ( @@ - const wrapper = ({ children }) => ( + const wrapper = ({ children }: PropsWithChildren) => ( @@ - const wrapper = ({ children }) => ( + const wrapper = ({ children }: PropsWithChildren) => ( @@ - const wrapper = ({ children }) => ( + const wrapper = ({ children }: PropsWithChildren) => (Also applies to: 130-146, 168-184, 208-227, 251-270
229-247: Strengthen &:disabled override tests by actually applying disabled state.Exercise specificity: ensure state variants override the disabled style.
@@ - const { rerender } = render( - <Box - data-testid='test' - elementDescriptor={descriptors.navbarButton} - />, + const { rerender } = render( + <Box + as='button' + disabled + data-testid='test' + elementDescriptor={descriptors.navbarButton} + />, @@ - expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('rgb(255, 255, 0)'); + expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe(computedColors.blue); @@ - rerender( - <Box - data-testid='test' - elementDescriptor={descriptors.navbarButton} - isOpen - />, - ); - expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('rgb(255, 0, 0)'); + rerender( + <Box + as='button' + disabled + data-testid='test' + elementDescriptor={descriptors.navbarButton} + isOpen + />, + ); + expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe(computedColors.red); @@ - const { rerender } = render( - <Box - data-testid='test' - elementDescriptor={descriptors.navbarButton} - />, + const { rerender } = render( + <Box + as='button' + disabled + data-testid='test' + elementDescriptor={descriptors.navbarButton} + />, @@ - expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('rgb(255, 255, 0)'); + expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe(computedColors.blue); @@ - rerender( - <Box - data-testid='test' - elementDescriptor={descriptors.navbarButton} - isLoading - />, - ); - expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('rgb(255, 0, 0)'); + rerender( + <Box + as='button' + disabled + data-testid='test' + elementDescriptor={descriptors.navbarButton} + isLoading + />, + ); + expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe(computedColors.red);Please confirm Box supports as="button" and the disabled attribute in this package.
Also applies to: 250-290
309-309: Remove stray comma child after Box.This renders an unintended text node.
- , +packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx (1)
109-116: Mixed query patterns may cause inconsistency.This test mixes the new
findByTextpattern with the oldgetByTextpattern within the same test case. For consistency and reliability, consider usingfindByTextfor all dynamic content that may not be immediately available.- const { findByText, getByText } = render(<OrganizationGeneralPage />, { wrapper }); + const { findByText } = render(<OrganizationGeneralPage />, { wrapper }); await waitFor(() => { expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled(); }); await findByText('General'); - expect(getByText('Org1', { exact: false }).closest('button')).toBeNull(); - expect(getByText(/leave organization/i, { exact: false }).closest('button')).not.toHaveAttribute('disabled'); + const org1Button = await findByText('Org1', { exact: false }); + expect(org1Button.closest('button')).toBeNull(); + const leaveButton = await findByText(/leave organization/i, { exact: false }); + expect(leaveButton.closest('button')).not.toHaveAttribute('disabled');packages/clerk-js/src/test/create-fixtures.tsx (1)
77-95: Tighten types for provider props and context props.
MockClerkProviderusesany, andcomponentContextPropscan beundefined. Make this explicit to avoid accidentalundefinedprop shapes, and reduce typos by typingcomponentsWithoutContext.-let componentContextProps: AvailableComponentProps; +let componentContextProps: AvailableComponentProps | undefined; -const MockClerkProvider = (props: any) => { - const { children } = props; +const MockClerkProvider = ({ children }: React.PropsWithChildren<{}>) => { -const componentsWithoutContext = ['UsernameSection', 'UserProfileSection']; +const componentsWithoutContext: AvailableComponentName[] = ['UsernameSection', 'UserProfileSection'];Also applies to: 84-119
packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsx (1)
1-6: Unify test utils import for consistency.Import
waitForfrom@/test/utils(same as other suites) to keep a single source of testing-library exports.-import { waitFor } from '@testing-library/react'; +import { waitFor } from '@/test/utils';packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx (1)
169-181: Commented assertions: consider asserting absence of backup codes UI.Optional: add a negative assertion to clearly differentiate from the previous test.
- // The test is complete - we've verified that the SMS verification form appears + // Verify backup codes UI is not shown in this variant + expect(screen.queryByText(/backup codes/i)).not.toBeInTheDocument();packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx (2)
232-235: Prefer async queries for dynamic content.
getByText('Two-step verification')may flake if render is async. UsefindByText.- const { getByText } = render(<SignInFactorTwo />, { wrapper }); - getByText('Two-step verification'); + const { findByText } = render(<SignInFactorTwo />, { wrapper }); + await findByText('Two-step verification');
615-631: Email support test: consider spying onlocation.assigndirectly.Overriding
window.locationcan be brittle. If JSDOM allows, spy onwindow.location.assign.-const assignMock = vi.fn(); -const mockResponse = vi.fn(); -Object.defineProperty(window, 'location', { /* ... */ }); -await userEvent.click(screen.getByText('Email support')); -expect(assignMock).toHaveBeenCalled(); +const assignSpy = vi.spyOn(window.location, 'assign'); +await userEvent.click(screen.getByText('Email support')); +expect(assignSpy).toHaveBeenCalled(); +assignSpy.mockRestore();
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (97)
eslint.config.mjs(2 hunks)packages/clerk-js/jest.config.js(0 hunks)packages/clerk-js/jest.jsdom-with-timezone.ts(0 hunks)packages/clerk-js/jest.setup-after-env.ts(0 hunks)packages/clerk-js/jest.setup.ts(0 hunks)packages/clerk-js/package.json(1 hunks)packages/clerk-js/src/core/__tests__/clerk.redirects.test.ts(0 hunks)packages/clerk-js/src/core/__tests__/clerk.test.ts(59 hunks)packages/clerk-js/src/core/__tests__/fapiClient.test.ts(3 hunks)packages/clerk-js/src/core/auth/__tests__/getCookieDomain.test.ts(1 hunks)packages/clerk-js/src/core/modules/checkout/manager.ts(1 hunks)packages/clerk-js/src/core/resources/__tests__/Client.test.ts(1 hunks)packages/clerk-js/src/core/resources/__tests__/Session.test.ts(1 hunks)packages/clerk-js/src/core/resources/__tests__/Token.test.ts(1 hunks)packages/clerk-js/src/core/test/fixtures.ts(0 hunks)packages/clerk-js/src/test/create-fixtures.tsx(1 hunks)packages/clerk-js/src/test/fixture-helpers.ts(5 hunks)packages/clerk-js/src/test/fixtures.ts(3 hunks)packages/clerk-js/src/test/mock-helpers.ts(3 hunks)packages/clerk-js/src/test/utils.ts(3 hunks)packages/clerk-js/src/testUtils.ts(0 hunks)packages/clerk-js/src/ui/common/__tests__/withRedirect.test.tsx(1 hunks)packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx(14 hunks)packages/clerk-js/src/ui/components/CreateOrganization/__tests__/CreateOrganization.test.tsx(2 hunks)packages/clerk-js/src/ui/components/OrganizationList/__tests__/OrganizationList.test.tsx(2 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx(24 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/LeaveOrganizationPage.test.tsx(3 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx(10 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx(7 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx(1 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx(5 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts(5 hunks)packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx(1 hunks)packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/utlis.ts(4 hunks)packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx(4 hunks)packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx(9 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx(18 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsx(3 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx(2 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx(26 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.test.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx(21 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx(6 hunks)packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx(3 hunks)packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx(3 hunks)packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx(3 hunks)packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx(1 hunks)packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx(6 hunks)packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx(18 hunks)packages/clerk-js/src/ui/components/UserButton/__tests__/UserButton.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/AccountPage.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx(2 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/EmailsSection.test.tsx(9 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/EnterpriseAccountsSection.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx(12 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/PasskeysSection.test.tsx(6 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsx(6 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx(11 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsx(6 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfileSection.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/UsernameSection.test.tsx(1 hunks)packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorOne.test.tsx(3 hunks)packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsx(6 hunks)packages/clerk-js/src/ui/components/Waitlist/__tests__/Waitlist.test.tsx(1 hunks)packages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx(1 hunks)packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx(15 hunks)packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx(1 hunks)packages/clerk-js/src/ui/customizables/__tests__/testUtils.ts(0 hunks)packages/clerk-js/src/ui/customizables/__tests__/vitestUtils.ts(1 hunks)packages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsx(1 hunks)packages/clerk-js/src/ui/elements/__tests__/LinkRenderer.test.tsx(1 hunks)packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx(1 hunks)packages/clerk-js/src/ui/elements/__tests__/RadioGroup.test.tsx(1 hunks)packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx(1 hunks)packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx(1 hunks)packages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsx(1 hunks)packages/clerk-js/src/ui/hooks/__tests__/usePasswordComplexity.test.tsx(1 hunks)packages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsx(2 hunks)packages/clerk-js/src/ui/localization/__tests__/parseLocalization.test.tsx(1 hunks)packages/clerk-js/src/ui/utils/__tests__/passwordUtils.test.tsx(1 hunks)packages/clerk-js/src/ui/utils/test/createFixtures.tsx(0 hunks)packages/clerk-js/src/ui/utils/test/mockHelpers.ts(0 hunks)packages/clerk-js/src/ui/utils/test/runFakeTimers.ts(0 hunks)packages/clerk-js/src/ui/utils/vitest/fixtureHelpers.ts(0 hunks)packages/clerk-js/src/ui/utils/vitest/fixtures.ts(0 hunks)packages/clerk-js/src/ui/utils/vitest/runFakeTimers.ts(0 hunks)packages/clerk-js/src/utils/__tests__/captcha.test.ts(1 hunks)packages/clerk-js/tsconfig.json(1 hunks)packages/clerk-js/tsconfig.test.json(0 hunks)packages/clerk-js/turbo.json(0 hunks)packages/clerk-js/vitest.config.mts(4 hunks)packages/clerk-js/vitest.setup.mts(2 hunks)packages/nextjs/src/server/__tests__/clerkMiddleware.test.ts(0 hunks)packages/vue/src/utils/__tests__/useCustomElementPortal.test.ts(1 hunks)
💤 Files with no reviewable changes (17)
- packages/clerk-js/jest.jsdom-with-timezone.ts
- packages/clerk-js/src/ui/utils/vitest/fixtureHelpers.ts
- packages/clerk-js/jest.setup-after-env.ts
- packages/clerk-js/turbo.json
- packages/clerk-js/src/ui/utils/test/mockHelpers.ts
- packages/nextjs/src/server/tests/clerkMiddleware.test.ts
- packages/clerk-js/src/testUtils.ts
- packages/clerk-js/src/ui/utils/test/createFixtures.tsx
- packages/clerk-js/jest.setup.ts
- packages/clerk-js/jest.config.js
- packages/clerk-js/src/core/test/fixtures.ts
- packages/clerk-js/src/ui/utils/vitest/fixtures.ts
- packages/clerk-js/src/ui/utils/vitest/runFakeTimers.ts
- packages/clerk-js/src/core/tests/clerk.redirects.test.ts
- packages/clerk-js/src/ui/utils/test/runFakeTimers.ts
- packages/clerk-js/src/ui/customizables/tests/testUtils.ts
- packages/clerk-js/tsconfig.test.json
✅ Files skipped from review due to trivial changes (1)
- packages/clerk-js/src/core/resources/tests/Token.test.ts
🚧 Files skipped from review as they are similar to previous changes (57)
- packages/clerk-js/src/ui/components/Plans/tests/PlanDetails.test.tsx
- packages/clerk-js/src/ui/components/PricingTable/tests/PricingTable.test.tsx
- packages/clerk-js/src/ui/components/SignUp/tests/SignUpEmailLinkFlowComplete.test.tsx
- packages/clerk-js/src/ui/elements/tests/PlainInput.test.tsx
- packages/clerk-js/src/ui/common/tests/withRedirect.test.tsx
- packages/clerk-js/src/ui/components/UserButton/tests/UserButton.test.tsx
- packages/clerk-js/src/ui/localization/tests/makeLocalizable.test.tsx
- packages/clerk-js/src/ui/customizables/tests/parseAppearance.test.tsx
- packages/clerk-js/src/ui/hooks/tests/useCoreOrganizationList.test.tsx
- packages/clerk-js/src/ui/components/SignIn/tests/ResetPasswordSuccess.test.tsx
- packages/clerk-js/src/ui/components/UserProfile/tests/UserProfileSection.test.tsx
- packages/clerk-js/src/test/mock-helpers.ts
- packages/clerk-js/src/ui/components/UserProfile/tests/EmailsSection.test.tsx
- packages/clerk-js/src/ui/components/OrganizationProfile/tests/InviteMembersPage.test.tsx
- packages/clerk-js/src/ui/components/SignUp/tests/SignUpVerifyPhone.test.tsx
- packages/clerk-js/src/ui/elements/tests/LinkRenderer.test.tsx
- packages/clerk-js/src/ui/components/UserProfile/tests/UsernameSection.test.tsx
- packages/clerk-js/src/ui/components/OrganizationProfile/tests/utils.ts
- packages/clerk-js/src/ui/components/SignUp/tests/SignUpContinue.test.tsx
- packages/clerk-js/src/ui/hooks/tests/usePasswordComplexity.test.tsx
- packages/clerk-js/src/ui/components/SignUp/tests/SignUpVerifyEmail.test.tsx
- packages/clerk-js/src/ui/components/SignUp/tests/SignUpStart.test.tsx
- packages/clerk-js/src/ui/components/OrganizationList/tests/OrganizationList.test.tsx
- packages/clerk-js/src/ui/components/SignIn/tests/SignInStart.test.tsx
- packages/clerk-js/vitest.setup.mts
- packages/clerk-js/src/ui/components/OrganizationProfile/tests/LeaveOrganizationPage.test.tsx
- packages/clerk-js/src/ui/components/OrganizationProfile/tests/OrganizationMembers.test.tsx
- packages/clerk-js/src/ui/utils/tests/passwordUtils.test.tsx
- packages/clerk-js/src/ui/components/SignIn/tests/SignInAccountSwitcher.test.tsx
- packages/clerk-js/src/ui/components/Checkout/tests/Checkout.test.tsx
- packages/clerk-js/src/core/resources/tests/Client.test.ts
- packages/clerk-js/src/ui/components/UserProfile/tests/AccountPage.test.tsx
- packages/clerk-js/tsconfig.json
- packages/clerk-js/src/ui/components/UserProfile/tests/PasskeysSection.test.tsx
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/tests/TaskChooseOrganization.test.tsx
- packages/clerk-js/vitest.config.mts
- packages/clerk-js/src/ui/components/SubscriptionDetails/tests/SubscriptionDetails.test.tsx
- packages/clerk-js/src/ui/components/UserProfile/tests/EnterpriseAccountsSection.test.tsx
- packages/clerk-js/src/ui/components/OrganizationProfile/tests/OrganizationProfile.test.tsx
- packages/clerk-js/src/core/auth/tests/getCookieDomain.test.ts
- packages/clerk-js/src/ui/components/SignIn/tests/SignInFactorOneCodeForm.test.tsx
- packages/clerk-js/src/ui/components/UserProfile/tests/ConnectedAccountsSection.test.tsx
- packages/clerk-js/src/ui/components/UserVerification/tests/UVFactorOne.test.tsx
- packages/clerk-js/src/ui/elements/tests/RadioGroup.test.tsx
- packages/clerk-js/src/ui/customizables/tests/vitestUtils.ts
- packages/clerk-js/src/ui/hooks/tests/useCoreOrganization.test.tsx
- packages/clerk-js/src/ui/components/Waitlist/tests/Waitlist.test.tsx
- packages/clerk-js/src/ui/components/OrganizationSwitcher/tests/utlis.ts
- packages/clerk-js/src/ui/components/CreateOrganization/tests/CreateOrganization.test.tsx
- packages/clerk-js/src/ui/localization/tests/parseLocalization.test.tsx
- packages/clerk-js/src/ui/components/OrganizationSwitcher/tests/OrganizationSwitcher.test.tsx
- packages/clerk-js/src/ui/components/SignIn/tests/SignInFactorOne.test.tsx
- packages/vue/src/utils/tests/useCustomElementPortal.test.ts
- packages/clerk-js/src/utils/tests/captcha.test.ts
- eslint.config.mjs
- packages/clerk-js/src/core/tests/fapiClient.test.ts
- packages/clerk-js/src/ui/elements/tests/CodeControl.test.tsx
🧰 Additional context used
📓 Path-based instructions (14)
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/core/modules/checkout/manager.tspackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/resources/__tests__/Session.test.tspackages/clerk-js/src/test/create-fixtures.tsxpackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/core/__tests__/clerk.test.tspackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/core/modules/checkout/manager.tspackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/resources/__tests__/Session.test.tspackages/clerk-js/src/test/create-fixtures.tsxpackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/package.jsonpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/core/__tests__/clerk.test.tspackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/core/modules/checkout/manager.tspackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/resources/__tests__/Session.test.tspackages/clerk-js/src/test/create-fixtures.tsxpackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/core/__tests__/clerk.test.tspackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/core/modules/checkout/manager.tspackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/resources/__tests__/Session.test.tspackages/clerk-js/src/test/create-fixtures.tsxpackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/core/__tests__/clerk.test.tspackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/core/modules/checkout/manager.tspackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/resources/__tests__/Session.test.tspackages/clerk-js/src/test/create-fixtures.tsxpackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/core/__tests__/clerk.test.tspackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/test/create-fixtures.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
packages/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Unit tests should use Jest or Vitest as the test runner.
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/resources/__tests__/Session.test.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/core/__tests__/clerk.test.tspackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
packages/{clerk-js,elements,themes}/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Visual regression testing should be performed for UI components.
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/resources/__tests__/Session.test.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/core/__tests__/clerk.test.tspackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/test/fixture-helpers.tspackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/core/modules/checkout/manager.tspackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/test/utils.tspackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/resources/__tests__/Session.test.tspackages/clerk-js/src/test/create-fixtures.tsxpackages/clerk-js/src/test/fixtures.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/core/__tests__/clerk.test.tspackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/test/create-fixtures.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
**/*.test.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
**/__tests__/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsxpackages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsxpackages/clerk-js/src/core/resources/__tests__/Session.test.tspackages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsxpackages/clerk-js/src/core/__tests__/clerk.test.tspackages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx
packages/*/package.json
📄 CodeRabbit inference engine (.cursor/rules/global.mdc)
All publishable packages should be placed under the packages/ directory
packages/*/package.json: All publishable packages must be located in the 'packages/' directory.
All packages must be published under the @clerk namespace on npm.
Semantic versioning must be used across all packages.
Files:
packages/clerk-js/package.json
🧬 Code graph analysis (10)
packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsx (1)
packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorTwo.tsx (1)
UserVerificationFactorTwo(122-124)
packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsx (2)
packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx (1)
PasswordSection(20-68)packages/clerk-js/src/test/utils.ts (3)
waitFor(73-73)screen(72-72)fireEvent(74-74)
packages/clerk-js/src/test/fixture-helpers.ts (1)
packages/types/src/json.ts (1)
EnvironmentJSON(83-92)
packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx (3)
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx (1)
OrganizationGeneralPage(57-83)packages/clerk-js/src/test/utils.ts (2)
waitFor(73-73)act(75-75)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
CardStateProvider(20-40)
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx (3)
packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx (1)
SignInFactorTwo(85-87)packages/types/src/signIn.ts (1)
SignInResource(34-91)packages/shared/src/error.ts (1)
parseError(158-173)
packages/clerk-js/src/test/fixtures.ts (1)
packages/types/src/userSettings.ts (1)
UserSettingsJSON(111-129)
packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx (3)
packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx (1)
MfaSection(21-152)packages/types/src/phoneNumber.ts (1)
PhoneNumberResource(23-39)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
CardStateProvider(20-40)
packages/clerk-js/src/core/__tests__/clerk.test.ts (4)
packages/clerk-js/src/core/auth/devBrowser.ts (1)
DevBrowser(10-20)packages/clerk-js/src/core/resources/Client.ts (1)
Client(16-164)packages/clerk-js/src/core/resources/Environment.ts (1)
Environment(17-100)packages/clerk-js/src/core/events.ts (1)
eventBus(31-31)
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx (1)
packages/clerk-js/src/ui/customizables/__tests__/vitestUtils.ts (1)
computedColors(7-10)
packages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx (1)
packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx (1)
PhoneSection(43-117)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: Static analysis
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (15)
packages/clerk-js/src/ui/customizables/__tests__/test-utils.ts (1)
1-10: Consider adding JSDoc comments and readonly modifiers for better type safety.While the current implementation is functional, consider these improvements for better maintainability and type safety:
+/** + * Known color definitions in HSLA format as they appear in source code. + * Used for testing color definitions before browser processing. + */ -export const knownColors = { +export const knownColors = { blue: 'hsla(240, 100%, 50%, 1)', red: 'hsla(0, 100%, 50%, 1)', -}; +} as const; +/** + * Browser computed styles return RGB values, so we need these for DOM testing. + * These correspond to the knownColors but in the format browsers return. + */ -export const computedColors = { +export const computedColors = { blue: 'rgb(0, 0, 255)', red: 'rgb(255, 0, 0)', -}; +} as const;This adds proper JSDoc documentation for the public API and uses
as constfor better type inference and immutability.packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx (7)
12-20: Remove redundant props.setProps; wrapper ignores them
TaskChooseOrganizationWithContexthard-codes the context value (defaulting to '/dashboard'). Allprops.setProps({ redirectUrlComplete: ... })calls have no effect and add noise. Either plumb the prop into the wrapper or drop the calls. Given every call sets '/dashboard', simplest is removal.Apply this diff (repeat for all occurrences listed above):
- props.setProps({ redirectUrlComplete: '/dashboard' });If you prefer plumbing, pass the prop explicitly:
- const { getByText, getByRole } = render(<TaskChooseOrganizationWithContext />, { wrapper }); + const { getByText, getByRole } = render( + <TaskChooseOrganizationWithContext redirectUrlComplete="/dashboard" />, + { wrapper }, + );Also applies to: 33-36, 55-57, 77-79, 98-100, 140-142, 203-205, 224-226, 245-247
2-2: Import vi/afterEach and restore mocks between testsUse typed spies and ensure cleanup.
-import { describe, expect, it } from 'vitest'; +import { afterEach, describe, expect, it, vi } from 'vitest'; +afterEach(() => vi.restoreAllMocks());
100-118: Replace any-cast mock with vi.spyOn + mockResolvedValueAvoid
(… as any).mockReturnValue(Promise.resolve(...)); use typed spies.- (fixtures.clerk.user?.getOrganizationMemberships as any).mockReturnValue( - Promise.resolve({ - data: [ - createFakeUserOrganizationMembership({ - id: '1', - organization: { - id: '1', - name: 'Existing Org', - slug: 'org1', - membersCount: 1, - adminDeleteEnabled: false, - maxAllowedMemberships: 1, - pendingInvitationsCount: 1, - }, - }), - ], - total_count: 1, - }), - ); + vi.spyOn(fixtures.clerk.user!, 'getOrganizationMemberships').mockResolvedValue({ + data: [ + createFakeUserOrganizationMembership({ + id: '1', + organization: { + id: '1', + name: 'Existing Org', + slug: 'org1', + membersCount: 1, + adminDeleteEnabled: false, + maxAllowedMemberships: 1, + pendingInvitationsCount: 1, + }, + }), + ], + total_count: 1, + });
142-161: Same here: use vi.spyOn + mockResolvedValueMirror the typed spy approach to avoid
any.- (fixtures.clerk.user?.getOrganizationMemberships as any).mockReturnValue( - Promise.resolve({ - data: [ - createFakeUserOrganizationMembership({ - id: '1', - organization: { - id: '1', - name: 'Existing Org', - slug: 'org1', - membersCount: 1, - adminDeleteEnabled: false, - maxAllowedMemberships: 1, - pendingInvitationsCount: 1, - }, - }), - ], - total_count: 1, - }), - ); + vi.spyOn(fixtures.clerk.user!, 'getOrganizationMemberships').mockResolvedValue({ + data: [ + createFakeUserOrganizationMembership({ + id: '1', + organization: { + id: '1', + name: 'Existing Org', + slug: 'org1', + membersCount: 1, + adminDeleteEnabled: false, + maxAllowedMemberships: 1, + pendingInvitationsCount: 1, + }, + }), + ], + total_count: 1, + });
79-85: Prefer role-based query for the primary actionUse accessible role/name for resilience to copy changes.
- expect(getByText('Continue')).toBeInTheDocument(); + expect(getByRole('button', { name: /continue/i })).toBeInTheDocument();
172-179: Adopt userEvent.setup for realistic interactionsSetup a user instance; replace static calls for better event timing fidelity.
- const createButton = getByText('Create new organization'); - await userEvent.click(createButton); + const user = userEvent.setup(); + const createButton = getByText('Create new organization'); + await user.click(createButton); - const cancelButton = getByRole('button', { name: /cancel/i }); - await userEvent.click(cancelButton); + const cancelButton = getByRole('button', { name: /cancel/i }); + await user.click(cancelButton);- await userEvent.click(signOutButton); + const user = userEvent.setup(); + await user.click(signOutButton);Also applies to: 182-189, 227-232
5-6: Avoid cross-feature test imports
createFakeUserOrganizationMembershipis imported from another component’s test directory. Consider moving shared factories to a common test utils module to decouple suites.packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx (7)
68-99: PrefermockResolvedValue(Once)over wrappingPromise.resolveinmockReturnValue.Cleaner, less error‑prone, and consistent with Vitest/Jest mocks. Also use the
Oncevariant for sequential pages to guard against extra calls.Example (apply similarly to invitations and suggestions blocks):
-fixtures.clerk.user?.getOrganizationMemberships.mockReturnValue( - Promise.resolve({ - data: [/* page 1 */], - total_count: 4, - }), -); +fixtures.clerk.user?.getOrganizationMemberships.mockResolvedValueOnce({ + data: [/* page 1 */], + total_count: 4, +}); -fixtures.clerk.user?.getOrganizationMemberships.mockReturnValue( - Promise.resolve({ - data: [/* page 2 */], - total_count: 4, - }), -); +fixtures.clerk.user?.getOrganizationMemberships.mockResolvedValueOnce({ + data: [/* page 2 */], + total_count: 4, +});Do the same swap for:
- userInvitations (Lines 323-337, 352-366)
- userSuggestions (Lines 501-515, 528-542)
Also applies to: 111-142, 323-337, 352-366, 501-515, 528-542
224-255: For infinite queries, also switch tomockResolvedValueOnce.These already use the
Oncevariant—just remove thePromise.resolvewrapper for consistency.Example:
-fixtures.clerk.user?.getOrganizationInvitations.mockReturnValueOnce( - Promise.resolve({ data: [/* page */], total_count: 4 }), -); +fixtures.clerk.user?.getOrganizationInvitations.mockResolvedValueOnce({ + data: [/* page */], + total_count: 4, +});Also applies to: 256-286, 434-448, 450-464, 609-623, 625-639
466-466: Make optional chaining consistent to avoid potential NPEs.Match the
userMemberships?.fetchNext?.()style for all buckets.Apply:
-act(() => result.current.userInvitations.fetchNext?.()); +act(() => result.current.userInvitations?.fetchNext?.()); -act(() => result.current.userSuggestions.fetchNext?.()); +act(() => result.current.userSuggestions?.fetchNext?.()); -act(() => result.current.userSuggestions.fetchNext?.()); +act(() => result.current.userSuggestions?.fetchNext?.());Also applies to: 544-544, 641-641
145-146: Reduce flakiness: avoid asserting transient “loading = true” edges.Waiting for the brief “true” edge can race. Prefer asserting the final settled state and, if needed, verify call counts.
Example change (apply to similar spots):
-await waitFor(() => expect(result.current.userMemberships?.isLoading).toBe(true)); await waitFor(() => expect(result.current.userMemberships?.isLoading).toBe(false));Optionally add:
expect(fixtures.clerk.user?.getOrganizationMemberships).toHaveBeenCalledTimes(2);Also applies to: 290-291, 370-371, 468-469, 546-547, 643-644
29-56: Rename test to reflect actual behavior under test.No click occurs; assertions check initial hook state and available actions.
Suggested rename:
-it('opens organization profile when "Manage Organization" is clicked', async () => { +it('returns loaded state, exposes actions, and empty invitations by default', async () => {
1-1: Optional: Align filename with hook under test.File is
useCoreOrganizationList.test.tsx, hook imported isuseOrganizationList. Consider renaming for clarity.
4-11: Unify imports to the '@/...' aliastsconfig and Vitest alias are configured for packages/clerk-js (packages/clerk-js/tsconfig.json defines "@/": ["./src/"] and packages/clerk-js/vitest.config.mts defines the /^@/ / → src alias), so switch the fragile relative imports to the alias.
-import { act, renderHook, waitFor } from '../../../test/utils'; +import { act, renderHook, waitFor } from '@/test/utils'; @@ -} from '../../components/OrganizationSwitcher/__tests__/test-utils'; +} from '@/ui/components/OrganizationSwitcher/__tests__/test-utils';
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (11)
packages/clerk-js/src/test/create-fixtures.tsx(2 hunks)packages/clerk-js/src/test/fixture-helpers.ts(5 hunks)packages/clerk-js/src/ui/components/OrganizationList/__tests__/OrganizationList.test.tsx(2 hunks)packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx(1 hunks)packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/utlis.ts(0 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx(18 hunks)packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx(15 hunks)packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx(1 hunks)packages/clerk-js/src/ui/customizables/__tests__/test-utils.ts(1 hunks)packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx(1 hunks)packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- packages/clerk-js/src/ui/components/OrganizationSwitcher/tests/utlis.ts
🚧 Files skipped from review as they are similar to previous changes (7)
- packages/clerk-js/src/ui/hooks/tests/useCoreOrganization.test.tsx
- packages/clerk-js/src/ui/customizables/tests/makeCustomizable.test.tsx
- packages/clerk-js/src/ui/components/OrganizationList/tests/OrganizationList.test.tsx
- packages/clerk-js/src/ui/customizables/tests/parseAppearance.test.tsx
- packages/clerk-js/src/test/fixture-helpers.ts
- packages/clerk-js/src/ui/components/OrganizationSwitcher/tests/OrganizationSwitcher.test.tsx
- packages/clerk-js/src/test/create-fixtures.tsx
🧰 Additional context used
📓 Path-based instructions (13)
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure
Files:
packages/clerk-js/src/ui/customizables/__tests__/test-utils.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/clerk-js/src/ui/customizables/__tests__/test-utils.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/ui/customizables/__tests__/test-utils.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/customizables/__tests__/test-utils.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/clerk-js/src/ui/customizables/__tests__/test-utils.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/clerk-js/src/ui/customizables/__tests__/test-utils.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/clerk-js/src/ui/customizables/__tests__/test-utils.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
**/__tests__/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces
Files:
packages/clerk-js/src/ui/customizables/__tests__/test-utils.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
packages/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Unit tests should use Jest or Vitest as the test runner.
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
packages/{clerk-js,elements,themes}/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Visual regression testing should be performed for UI components.
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
**/*.test.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsxpackages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
🧬 Code graph analysis (1)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx (2)
packages/clerk-js/src/test/create-fixtures.tsx (1)
bindCreateFixtures(27-34)packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (1)
TaskChooseOrganizationContext(17-17)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (27)
- GitHub Check: Integration Tests (custom, chrome)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (tanstack-react-router, chrome)
- GitHub Check: Integration Tests (machine, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (nuxt, chrome)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (localhost, chrome)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Integration Tests (expo-web, chrome)
- GitHub Check: Integration Tests (elements, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (express, chrome)
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: Unit Tests (22, **)
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: Static analysis
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (4)
packages/clerk-js/src/ui/customizables/__tests__/test-utils.ts (2)
1-4: LGTM! Clear test utility for color comparisons.The
knownColorsobject provides a clean mapping of color names to HSLA values, which will be useful for testing color definitions in their source format.
6-10: LGTM! Well-documented computed colors for DOM testing.The comment clearly explains why RGB values are needed (browser computed styles), and the
computedColorsobject provides the corresponding RGB representations. This dual-format approach is essential for comprehensive color testing in both source and rendered contexts.packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx (2)
2-7: LGTM: Vitest migration + context wrapper patternImports, test runner migration, and the provider wrapper approach are solid and consistent with the repo’s direction.
Also applies to: 12-20
1-251: Repo check: ensure no Jest leftovers remainRipgrep returned "No files were searched" and did not scan the repo; cannot confirm presence/absence of Jest artifacts. Run locally and paste the outputs of these commands (or run rg --debug to show why files are skipped):
git ls-files | xargs rg -nP --hidden -S --no-ignore-vcs '\bjest\.(fn|spyOn|mock|useFakeTimers|advanceTimersByTime|runAllTimers)\b|@jest/|jest\.config|ts-jest' -g '!**/node_modules/**' || true rg -nP --hidden -S --no-ignore-vcs "from\s+['\"](jest|vitest)['\"]" -g '!**/node_modules/**' || true rg --debug '\bjest' --hidden -S -g '!**/node_modules/**' --no-ignore-vcs | sed -n '1,200p'
| 'SubscriptionDetails', | ||
| 'PlanDetails', | ||
| 'Checkout', |
There was a problem hiding this comment.
This is needed, otherwise some checkout tests fail because these are not in ComponentContextProvider switch statement
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx (1)
310-311: Remove stray comma JSX text node.The dangling comma renders an extraneous text node; drop it.
- /> - , + />
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx (2)
91-107: DRY the repeated AppearanceProvider wrappers.Extract a small helper to reduce duplication and improve readability.
- const wrapper = ({ children }: { children: React.ReactNode }) => ( - <AppearanceProvider - appearanceKey='signIn' - globalAppearance={{ - elements: { - formButtonPrimary: { - backgroundColor: 'yellow', - }, - formButtonPrimary__loading: { - backgroundColor: 'red', - }, - }, - }} - > - {children} - </AppearanceProvider> - ); + const wrapper = withGlobalAppearance({ + elements: { + formButtonPrimary: { backgroundColor: 'yellow' }, + formButtonPrimary__loading: { backgroundColor: 'red' }, + }, + });Add once near the top of the file (or in test-utils) and reuse across tests:
function withGlobalAppearance(globalAppearance: React.ComponentProps<typeof AppearanceProvider>['globalAppearance']) { return ({ children }: { children: React.ReactNode }) => ( <AppearanceProvider appearanceKey="signIn" globalAppearance={globalAppearance}> {children} </AppearanceProvider> ); }
120-128: Also assert state classes for loading/active/error/open.Add checks that element descriptors apply state classes (e.g., cl-loading, cl-active, cl-error, cl-open) when props are set, per UI guidelines.
Example (adjust class names to match implementation):
const el = screen.getByTestId('test'); expect(el).toHaveClass('cl-loading'); // when isLoading expect(el).not.toHaveClass('cl-error', 'cl-open', 'cl-active');As per coding guidelines
Also applies to: 158-166, 198-206, 241-249, 283-291
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx(7 hunks)packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx(15 hunks)packages/clerk-js/src/ui/customizables/__tests__/test-utils.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/clerk-js/src/ui/customizables/tests/test-utils.ts
🧰 Additional context used
📓 Path-based instructions (13)
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
packages/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Unit tests should use Jest or Vitest as the test runner.
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
packages/{clerk-js,elements,themes}/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Visual regression testing should be performed for UI components.
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
**/*.test.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
**/__tests__/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces
Files:
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
🧬 Code graph analysis (2)
packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx (1)
packages/clerk-js/src/ui/customizables/__tests__/test-utils.ts (1)
computedColors(8-12)
packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx (1)
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx (1)
OrganizationMembers(24-169)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (9)
- GitHub Check: Integration Tests (tanstack-react-router, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: Static analysis
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep/ci
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (4)
packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx (1)
565-593: Unskip the cancel-invite flow testMarking this spec with
it.skipdrops coverage for the modal-dismissal flow and masks an actual regression introduced during the Vitest migration. We need this test running again—please fix the underlying issue (e.g., by adjusting the interaction/wait strategy for Vitest) rather than disabling it. Let me know if you need another set of eyes on the failure.packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx (3)
27-27: Switch to getComputedStyle + rgb comparisons is solid.Accurately validates actual computed styles without relying on style-rule introspection.
Also applies to: 45-45, 64-64, 87-87, 118-118, 127-127, 156-156, 165-165, 196-196, 205-205, 239-239, 248-248, 281-281, 290-290
91-91: Wrapper types are correct.Typing children as React.ReactNode aligns with RTL wrapper expectations.
Also applies to: 131-131, 169-169, 209-209, 252-252
2-2: Verified test setup for clerk-js: Vitest is configured with ajsdomenvironment,@testing-library/jest-dom/vitestis imported invitest.setup.mts, and the@/*path alias is defined in bothtsconfig.jsonandvitest.config.mts.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/nextjs/src/server/clerkMiddleware.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/nextjs/src/server/clerkMiddleware.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/nextjs/src/server/clerkMiddleware.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/nextjs/src/server/clerkMiddleware.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/nextjs/src/server/clerkMiddleware.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/nextjs/src/server/clerkMiddleware.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/nextjs/src/server/clerkMiddleware.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (28)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (machine, chrome)
- GitHub Check: Integration Tests (localhost, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (custom, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (nuxt, chrome)
- GitHub Check: Integration Tests (tanstack-react-router, chrome)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (expo-web, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (elements, chrome)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (express, chrome)
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: Static analysis
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: Unit Tests (22, **)
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
package.json(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (2)
package.json (2)
93-93: Versions aligned: coverage plugin matches Vitest.Bumping @vitest/coverage-v8 to 3.2.4 is correct and consistent with vitest.
80-90: Prune leftover Jest deps/overrides to complete the migration.Given the Vitest migration, consider removing Jest-specific deps and pnpm overrides unless still used by non-migrated packages.
Apply this diff if safe to remove across the repo:
- "@jest/globals": "29.7.0", - "@types/jest": "^29.3.1", - "eslint-plugin-jest": "28.14.0", - "jest": "^29.7.0", - "jest-chrome": "^0.8.0", - "jest-environment-jsdom": "^29.3.1", - "ts-jest": "29.2.5","overrides": { - "jest": "29.7.0", - "jest-snapshot-prettier": "npm:prettier@^3.5.3" + "jest-snapshot-prettier": "npm:prettier@^3.5.3" },Optional: swap to eslint-plugin-vitest and update ESLint config accordingly.
Run this to verify active Jest usage before pruning:
#!/bin/bash set -euo pipefail echo "Searching for Jest usage/imports in repo..." rg -n -C2 -S "\b(jest\.|from 'jest'|@jest/globals|jest-environment-jsdom|ts-jest|jest-chrome)\b" --glob '!**/node_modules/**' || trueAlso applies to: 105-106, 124-127, 140-140, 166-168
| "uuid": "8.3.2", | ||
| "verdaccio": "^5.33.0", | ||
| "vitest": "3.0.5", | ||
| "vitest": "3.2.4", |
There was a problem hiding this comment.
🧩 Analysis chain
Vitest 3.2.4 bump LGTM—ensure lockfile updates.
Looks good. Please run pnpm install to refresh the lockfile and CI cache.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Checking for vitest versions and lingering Jest deps..."
rg -n -C2 -S '"vitest"\s*:' package.json || true
rg -n -C2 -S '\b(jest|@jest/globals|jest-chrome|jest-environment-jsdom|ts-jest)\b' --glob '!**/node_modules/**' || trueLength of output: 349
#!/bin/bash
set -euo pipefail
echo "Checking for jest-related dependencies in package.json..."
jq -r '((.dependencies // {}) + (.devDependencies // {})) | keys[]' package.json
| grep -Ei '^(jest|@jest/globals|jest-chrome|jest-environment-jsdom|ts-jest)' || echo "No jest deps found"
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Checking for Jest-related dependencies in package.json..."
jq -r '((.dependencies // {}) + (.devDependencies // {})) | keys[]' package.json \
| grep -E '^(jest|@jest/globals|jest-chrome|jest-environment-jsdom|ts-jest)' \
|| echo "No Jest deps found"Length of output: 119
Remove lingering Jest dependencies and update lockfile.
- Delete @jest/globals, jest, jest-chrome, jest-environment-jsdom and ts-jest from package.json.
- Run pnpm install to refresh the lockfile and CI cache.
🤖 Prompt for AI Agents
In package.json around line 151, there are lingering Jest-related dependencies
that should be removed; delete entries for @jest/globals, jest, jest-chrome,
jest-environment-jsdom, and ts-jest from package.json, then run pnpm install to
update pnpm-lock.yaml (and CI cache) so the lockfile reflects the removal, and
commit the updated package.json and lockfile.
There was a problem hiding this comment.
@jacekradko Should this be updated?
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
There was a problem hiding this comment.
@tmilewski No, there are still packages that use jest
4 participants
Description
Convert all jest tests to vitest
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Chores