Use vitest browser mode for view tests

Author: koesie10

extensions/ql-vscode/package-lock.json

@@ -1943,7 +1943,7 @@
     "watch": "gulp watch",
     "test": "npm-run-all test:*",
     "test:unit": "cross-env TZ=UTC LANG=en-US jest --projects test/unit-tests",
-    "test:view": "jest --projects src/view",
+    "test:view": "vitest run --dir src/view",
     "test:vscode-integration": "npm-run-all test:vscode-integration:*",
     "test:vscode-integration:activated-extension": "jest --projects test/vscode-tests/activated-extension",
     "test:vscode-integration:no-workspace": "jest --projects test/vscode-tests/no-workspace",
@@ -2055,6 +2055,8 @@
     "@types/yauzl": "^2.10.3",
     "@typescript-eslint/eslint-plugin": "^8.30.1",
     "@typescript-eslint/parser": "^8.30.1",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/browser": "^3.1.2",
     "@vscode/test-electron": "^2.3.9",
     "@vscode/vsce": "^3.2.1",
     "ansi-colors": "^4.1.1",
@@ -2100,7 +2102,8 @@
     "typescript": "^5.6.2",
     "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^6.2.6",
-    "vite-node": "^3.0.7"
+    "vite-node": "^3.0.7",
+    "vitest": "^3.1.2"
   },
   "lint-staged": {
     "./**/*.{json,css,scss}": [

extensions/ql-vscode/package.json

@@ -77,8 +77,8 @@ const options: TestOption[] = [
 ];
 
 describe("SuggestBox", () => {
-  const onChange = jest.fn();
-  const parseValueToTokens = jest.fn();
+  const onChange = vi.fn();
+  const parseValueToTokens = vi.fn();
   const render = (props?: Partial<SuggestBoxProps<TestOption>>) =>
     reactRender(
       <SuggestBox

extensions/ql-vscode/src/view/common/SuggestBox/__tests__/SuggestBox.test.tsx

@@ -3,8 +3,8 @@ import { useEffectEvent } from "../useEffectEvent";
 
 describe("useEffectEvent", () => {
   it("does not change reference when changing the callback function", () => {
-    const callback1 = jest.fn();
-    const callback2 = jest.fn();
+    const callback1 = vi.fn();
+    const callback2 = vi.fn();
 
     const { result, rerender } = renderHook(
       (callback) => useEffectEvent(callback),

extensions/ql-vscode/src/view/common/SuggestBox/__tests__/useEffectEvent.test.ts

@@ -5,7 +5,7 @@ import { mockedObject } from "../../../../../test/mocked-object";
 import { useOpenKey } from "../useOpenKey";
 
 describe("useOpenKey", () => {
-  const onOpenChange = jest.fn();
+  const onOpenChange = vi.fn();
 
   beforeEach(() => {
     onOpenChange.mockReset();
@@ -41,7 +41,7 @@ describe("useOpenKey", () => {
     ctrlKey = false,
     metaKey = false,
     shiftKey = false,
-    preventDefault = jest.fn(),
+    preventDefault = vi.fn(),
   }: Partial<KeyboardEvent>) =>
     mockedObject<KeyboardEvent>({
       key,
@@ -183,7 +183,7 @@ describe("useOpenKey", () => {
     rerender(
       mockedObject<FloatingContext>({
         open: true,
-        onOpenChange: jest.fn(),
+        onOpenChange: vi.fn(),
       }),
     );
 

extensions/ql-vscode/src/view/common/SuggestBox/__tests__/useOpenKey.test.ts

@@ -13,7 +13,7 @@ describe(MethodModeling.name, () => {
   it("renders method modeling panel", () => {
     const method = createMethod();
     const modeledMethod = createSinkModeledMethod();
-    const onChange = jest.fn();
+    const onChange = vi.fn();
 
     render({
       language: QueryLanguage.Java,

extensions/ql-vscode/src/view/jest-environment-jsdom.ts

@@ -19,7 +19,7 @@ describe(MethodModelingInputs.name, () => {
   const method = createMethod();
   const modeledMethod = createSinkModeledMethod();
   const modelConfig = defaultModelConfig;
-  const onChange = jest.fn();
+  const onChange = vi.fn();
 
   it("renders the method modeling inputs", () => {
     render({

extensions/ql-vscode/src/view/jest.config.ts

@@ -15,7 +15,7 @@ import { defaultModelConfig } from "../../../model-editor/languages";
 describe(MultipleModeledMethodsPanel.name, () => {
   const language = QueryLanguage.Java;
   const method = createMethod();
-  const onChange = jest.fn<void, [string, ModeledMethod[]]>();
+  const onChange = vi.fn<void, [string, ModeledMethod[]]>();
   const modelConfig = defaultModelConfig;
 
   const baseProps = {

extensions/ql-vscode/src/view/jest.setup.ts

@@ -7,10 +7,10 @@ import { createMockModelEditorViewState } from "../../../../test/factories/model
 
 describe(LibraryRow.name, () => {
   const method = createMethod();
-  const onChange = jest.fn();
-  const onMethodClick = jest.fn();
-  const onSaveModelClick = jest.fn();
-  const onModelDependencyClick = jest.fn();
+  const onChange = vi.fn();
+  const onMethodClick = vi.fn();
+  const onSaveModelClick = vi.fn();
+  const onModelDependencyClick = vi.fn();
 
   const viewState = createMockModelEditorViewState();
 
@@ -40,7 +40,7 @@ describe(LibraryRow.name, () => {
         onChange={onChange}
         onMethodClick={onMethodClick}
         onSaveModelClick={onSaveModelClick}
-        onGenerateFromSourceClick={jest.fn()}
+        onGenerateFromSourceClick={vi.fn()}
         onModelDependencyClick={onModelDependencyClick}
         {...props}
       />,