Skip to content

chore(chrome-extension): Replace Jest with Vitest #6820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Sep 30, 2025
Merged

chore(chrome-extension): Replace Jest with Vitest #6820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2f8d760
chore(chrome-extension): Replace Jest with Vitest
dstaley Sep 19, 2025
cc5e91f
chore(repo): pnpm dedupe
dstaley Sep 19, 2025
5f196e6
fix(chrome-extension): Silence Jest-specific rule
dstaley Sep 19, 2025
68b09e8
fix(nextjs): Include DOM.Iterable APIs
dstaley Sep 19, 2025
4cd72fc
Merge branch 'main' into ds.feat/chrome-extension-vitest
dstaley Sep 19, 2025
0f06a7a
chore(repo): Update @vitest/coverage-v8 to latest
dstaley Sep 19, 2025
9284441
fix(chrome-extension): Use vitest run
dstaley Sep 19, 2025
4302356
chore(repo): gitignore tsup bundled configs
dstaley Sep 19, 2025
ceb14d8
Merge branch 'main' into ds.feat/chrome-extension-vitest
jacekradko Sep 24, 2025
1203c64
Merge branch 'main' into ds.feat/chrome-extension-vitest
jacekradko Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/brown-icons-shine.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ sessions.pem
# Workflow Outputs
/packages/*/*.tgz
/packages/*/tsconfig*.vitest-temp.json
/packages/*/tsup.config.bundled_*

# Scripts
scripts/.env
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"@types/react": "catalog:react",
"@types/react-dom": "catalog:react",
"@vitejs/plugin-react": "^4.5.2",
"@vitest/coverage-v8": "3.0.5",
"@vitest/coverage-v8": "3.2.4",
"chalk": "4.1.2",
"citty": "^0.1.6",
"conventional-changelog-conventionalcommits": "^4.6.3",
Expand Down Expand Up @@ -148,7 +148,7 @@
"typescript-eslint": "8.38.0",
"uuid": "8.3.2",
"verdaccio": "6.1.6",
"vitest": "3.0.5",
"vitest": "3.2.4",
"yalc": "1.0.0-pre.53",
"zx": "catalog:repo"
},
Expand Down
24 changes: 0 additions & 24 deletions packages/chrome-extension/jest.config.js
View file
Open in desktop

This file was deleted.

7 changes: 3 additions & 4 deletions packages/chrome-extension/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,9 @@
"lint:attw": "attw --pack . --profile node16",
"lint:publint": "publint",
"publish:local": "pnpm yalc push --replace --sig",
"test": "jest",
"test:cache:clear": "jest --clearCache --useStderr",
"test:ci": "jest --maxWorkers=70%",
"test:coverage": "jest --collectCoverage && open coverage/lcov-report/index.html"
"test": "vitest run",
"test:ci": "vitest run --maxWorkers=70%",
"test:watch": "vitest"
Comment on lines +47 to +49
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

🧩 Analysis chain

Vitest switch LGTM; please verify flag support and workspace bin resolution

  • Confirm the repo’s Vitest version supports --maxWorkers=70%.
  • Ensure this package can resolve the vitest binary (since it’s not listed in this package’s devDependencies).

🏁 Script executed:

#!/bin/bash
# 1) Check Vitest version at repo root
jq -r '.devDependencies.vitest // .dependencies.vitest // .pnpm.overrides.vitest // empty' package.json

# 2) Verify this package does not declare vitest (expected if using root toolchain)
jq -r '.devDependencies.vitest // empty' packages/chrome-extension/package.json

# 3) (Optional) Inspect root scripts to see how tests are invoked in CI
jq -r '.scripts | to_entries[] | select(.key|test("test|ci|vitest|coverage")) | "\(.key): \(.value)"' package.json

Length of output: 2613

🌐 Web query:

Does Vitest support the CLI flag `--maxWorkers` with percentage values (e.g., `--maxWorkers=70%`)? If yes, since which version?

💡 Result:

Yes. Vitest's maxWorkers accepts numeric or percentage values (e.g. --maxWorkers=70%). It was added in the v1.1.0 release (Dec 19, 2023), and a parsing fix for --maxWorkers/--minWorkers was applied in Jan 2024 (PR #7759). [1][2][3]

Sources:

  • v1.1.0 release notes (adds --maxWorkers/--minWorkers). [1]
  • Vitest CLI/config docs stating "Maximum number or percentage of workers" for maxWorkers. [2]
  • PR fixing parsing of --maxWorkers/--minWorkers (Jan 10, 2024). [3]

Add Vitest devDependency and confirm flag support
Verified v3.2.4 (≥v1.1.0) accepts --maxWorkers=70%. Add "vitest": "^3.2.4" to packages/chrome-extension/package.json devDependencies so its vitest scripts resolve the CLI binary.

🤖 Prompt for AI Agents 
In packages/chrome-extension/package.json around lines 47 to 49, add a
devDependency entry "vitest": "^3.2.4" to ensure the package-local vitest CLI is
used for the existing "test", "test:ci", and "test:watch" scripts and that the
--maxWorkers flag is supported; update devDependencies to include that version,
run package manager install to update lockfile, and commit the package.json and
lockfile changes.

},
"dependencies": {
"@clerk/clerk-js": "workspace:^",
Expand Down
4 changes: 2 additions & 2 deletions packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`public exports should not include a breaking change 1`] = `
exports[`public exports > should not include a breaking change 1`] = `
[
"APIKeys",
"AuthenticateWithRedirectCallback",
Expand Down
2 changes: 2 additions & 0 deletions packages/chrome-extension/src/__tests__/exports.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { describe, expect, it } from 'vitest';

import * as publicExports from '../index';

describe('public exports', () => {
Expand Down
4 changes: 3 additions & 1 deletion packages/chrome-extension/src/internal/utils/__tests__/cookies.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { afterAll, afterEach, describe, expect, test, vi } from 'vitest';
import browser from 'webextension-polyfill';

import { getClientCookie } from '../cookies';
Expand All @@ -24,7 +25,8 @@ describe('Cookies', () => {
const name = '__client';
const cookie = createCookie({ name, value: 'foo', domain });

const getMock = jest.mocked(browser.cookies.get);
// eslint-disable-next-line jest/unbound-method -- The Jest ESLint plugin doesn't support Vitest
const getMock = vi.mocked(browser.cookies.get);

afterEach(() => getMock.mockReset());
afterAll(() => getMock.mockRestore());
Expand Down
1 change: 1 addition & 0 deletions packages/chrome-extension/src/internal/utils/__tests__/manifest.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { describe, expect, test } from 'vitest';
import type { Manifest } from 'webextension-polyfill';

import { missingManifestKeyError } from '../errors';
Expand Down
17 changes: 13 additions & 4 deletions packages/chrome-extension/src/internal/utils/__tests__/storage.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { afterEach, describe, expect, test, vi } from 'vitest';
import browser from 'webextension-polyfill';

import { BrowserStorageCache, MemoryStorageCache } from '../storage';
Expand All @@ -21,7 +22,8 @@ describe('StorageCache', () => {

describe('set', () => {
test('setting the storage cache', async () => {
const setMock = jest.mocked(browser.storage.local.set).mockResolvedValueOnce(_void);
// eslint-disable-next-line jest/unbound-method -- The Jest ESLint plugin doesn't support Vitest
const setMock = vi.mocked(browser.storage.local.set).mockResolvedValueOnce(_void);

expect(await BrowserStorageCache.set(KEY, VALUE)).toBe(_void);
expect(setMock).toHaveBeenCalledTimes(1);
Expand All @@ -31,7 +33,8 @@ describe('StorageCache', () => {

describe('remove', () => {
test('removing from the storage cache', async () => {
const removeMock = jest.mocked(browser.storage.local.remove).mockResolvedValueOnce(_void);
// eslint-disable-next-line jest/unbound-method -- The Jest ESLint plugin doesn't support Vitest
const removeMock = vi.mocked(browser.storage.local.remove).mockResolvedValueOnce(_void);

expect(await BrowserStorageCache.remove(KEY)).toBe(_void);
expect(removeMock).toHaveBeenCalledTimes(1);
Expand All @@ -40,16 +43,22 @@ describe('StorageCache', () => {
});

describe('get', () => {
afterEach(() => {
vi.restoreAllMocks();
});

test('value missing', async () => {
const getMock = jest.mocked(browser.storage.local.get).mockResolvedValue({});
// eslint-disable-next-line jest/unbound-method -- The Jest ESLint plugin doesn't support Vitest
const getMock = vi.mocked(browser.storage.local.get).mockResolvedValue({});

expect(await BrowserStorageCache.get(KEY)).toBeUndefined();
expect(getMock).toHaveBeenCalledTimes(1);
expect(getMock).toHaveBeenCalledWith(KEY);
});

test('value exists', async () => {
const getMock = jest.mocked(browser.storage.local.get).mockResolvedValue({ [KEY]: VALUE });
// eslint-disable-next-line jest/unbound-method -- The Jest ESLint plugin doesn't support Vitest
const getMock = vi.mocked(browser.storage.local.get).mockResolvedValue({ [KEY]: VALUE });

expect(await BrowserStorageCache.get(KEY)).toBe(VALUE);
expect(getMock).toHaveBeenCalledTimes(1);
Expand Down
25 changes: 25 additions & 0 deletions packages/chrome-extension/vitest.config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { defineConfig } from 'vitest/config';
import { readFileSync } from 'node:fs';

const { name, version } = JSON.parse(readFileSync('./package.json', 'utf8'));

Comment on lines +1 to +5
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Make config CWD‑independent (monorepo‑safe).

Relative paths here resolve from process.cwd(), which can point to the repo root when running Vitest via a workspace filter. Read package.json and resolve tsconfig/setupFiles relative to this config file to avoid misreads/breakage.

Apply this diff:

@@
-import { defineConfig } from 'vitest/config';
-import { readFileSync } from 'node:fs';
+import { defineConfig } from 'vitest/config';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { resolve } from 'node:path';
@@
-const { name, version } = JSON.parse(readFileSync('./package.json', 'utf8'));
+const rootDir = fileURLToPath(new URL('.', import.meta.url));
+const { name, version } = JSON.parse(
+  readFileSync(new URL('./package.json', import.meta.url), 'utf8'),
+);
@@
-export default defineConfig({
-  plugins: [],
+export default defineConfig({
+  root: rootDir,
+  plugins: [],
@@
-      tsconfig: './tsconfig.test.json',
+      tsconfig: resolve(rootDir, 'tsconfig.test.json'),
@@
-    setupFiles: './vitest.setup.mts',
+    setupFiles: resolve(rootDir, 'vitest.setup.mts'),

Also applies to: 6-9, 15-16, 23-23

🤖 Prompt for AI Agents 
In packages/chrome-extension/vitest.config.mts around lines 1-5 (and similarly
for lines 6-9, 15-16, 23-23), relative paths are being resolved from
process.cwd(), which breaks in a monorepo; change file-loading and path
resolution to be relative to this config file by using import.meta.url (e.g.
read package.json via new URL('./package.json', import.meta.url) and resolve
tsconfig/setupFiles using new URL('./path/to/file', import.meta.url) or URL +
pathname, then pass the resulting absolute paths to Vitest so the config is
CWD‑independent.

export default defineConfig({
plugins: [],
define: {
PACKAGE_NAME: JSON.stringify(name),
PACKAGE_VERSION: JSON.stringify(version),
},
test: {
typecheck: {
enabled: true,
tsconfig: './tsconfig.test.json',
include: ['**/*.test.{ts,tsx}'],
},
env: {
CLERK_SECRET_KEY: 'TEST_SECRET_KEY',
},
environment: 'jsdom',
includeSource: ['**/*.{js,ts,jsx,tsx}'],
setupFiles: './vitest.setup.mts',
},
});
4 changes: 4 additions & 0 deletions packages/chrome-extension/jest.setup.ts → packages/chrome-extension/vitest.setup.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
import { vi } from 'vitest';
// `jest-chrome` directly references the `jest` global
(globalThis as any).jest = vi;

import { chrome } from 'jest-chrome';

// @ts-expect-error - required for the browser polyfill
Expand Down
1 change: 0 additions & 1 deletion packages/nextjs/src/server/clerkMiddleware.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,6 @@ export const clerkMiddleware = ((...args: unknown[]): NextMiddleware | NextMiddl

logger.debug('requestState', () => ({
status: requestState.status,
// @ts-expect-error : FIXME
headers: JSON.stringify(Object.fromEntries(requestState.headers)),
reason: requestState.reason,
}));
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"importHelpers": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6", "dom"],
"lib": ["es6", "dom", "dom.iterable"],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix lib/target mismatch: use ES2019 libs (or drop custom lib).

Specifying "lib": ["es6", ...] while "target" is "ES2019" removes ES2016–ES2019 lib typings (Promise.finally, newer Array/TypedArray methods, etc.). Use ES2019 to match target (plus DOM libs) or omit "lib" entirely and rely on defaults if DOM isn’t required everywhere.

-    "lib": ["es6", "dom", "dom.iterable"],
+    "lib": ["es2019", "dom", "dom.iterable"],
📝 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.

Suggested change
"lib": ["es6", "dom", "dom.iterable"],
"lib": ["es2019", "dom", "dom.iterable"],
🤖 Prompt for AI Agents 
In packages/nextjs/tsconfig.json around line 9, the "lib" entry uses "es6" which
conflicts with the "target": "ES2019" setting and omits ES2016–ES2019 type
definitions; update the "lib" to include "ES2019" (and DOM/dom.iterable if
needed) or remove the custom "lib" entirely so TypeScript defaults match the
target, ensuring typings like Promise.finally and newer array/typedarray methods
are available.

"module": "NodeNext",
"moduleResolution": "NodeNext",
"noImplicitReturns": true,
Expand Down
Loading