migrate jest to vitest

.eslintrc.cjs

@@ -18,6 +18,7 @@ module.exports = {
         minimumDescriptionLength: 3,
       },
     ],
+    "jest/no-deprecated-functions": "off",
   },
   parser: "@typescript-eslint/parser",
   parserOptions: {

package.json

@@ -32,7 +32,6 @@
     "@storybook/core-events": "^8.0.0-alpha.17",
     "@storybook/eslint-config-storybook": "^3.1.2",
     "@storybook/icons": "^1.2.4",
-    "@storybook/jest": "^0.2.3",
     "@storybook/manager": "^8.0.0-alpha.17",
     "@storybook/manager-api": "^8.0.0-alpha.17",
     "@storybook/preview": "^8.0.0-alpha.17",
@@ -42,7 +41,6 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^8.0.0-alpha.17",
     "@storybook/types": "^8.0.0-alpha.17",
-    "@types/jest": "^29.5.3",
     "@types/jsonfile": "^6.1.1",
     "@types/node": "^18.15.0",
     "@types/pluralize": "^0.0.29",
@@ -61,7 +59,6 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.15",
     "graphql": "^16.8.1",
-    "jest": "^29.5.0",
     "msw": "^2.0.0",
     "msw-storybook-addon": "2.0.0--canary.122.b3ed3b1.0",
     "npm-run-all": "^4.1.5",
@@ -76,14 +73,14 @@
     "rimraf": "^3.0.2",
     "storybook": "^8.0.0-alpha.17",
     "ts-dedent": "^2.2.0",
-    "ts-jest": "^29.1.1",
     "tsup": "^6.6.3",
     "typescript": "^4.9.5",
     "urql": "^4.0.3",
     "uuid": "^9.0.0",
     "vite": "^4.1.4",
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-turbosnap": "^1.0.3",
+    "vitest": "^1.3.1",
     "zod": "^3.22.2",
     "zx": "^1.14.1"
   },
@@ -143,7 +140,7 @@
     "start": "run-p build:watch 'storybook --quiet'",
     "storybook": "CHROMATIC_ADDON_NAME='../src/dev.ts' storybook dev -p 6006",
     "storybook-from-dist": "CHROMATIC_USE_DIST_VERSION=true CHROMATIC_ADDON_NAME='../dist/index.js' storybook dev -p 6006",
-    "test": "jest",
+    "test": "vitest",
     "typecheck": "tsc --noemit"
   },
   "storybook": {

src/index.ts

@@ -147,10 +147,13 @@ async function serverChannel(channel: Channel, options: Options & { configFile?:
     if (!projectId || projectId === lastProjectId) return;
     lastProjectId = projectId;
 
-    const writtenConfigFile = configFile || "chromatic.config.json";
+    const writtenConfigFile = configFile;
     try {
       const { configFile: actualConfigFile, ...config } = await getConfiguration(writtenConfigFile);
-      await updateChromaticConfig(writtenConfigFile, { ...config, projectId });
+      await updateChromaticConfig(writtenConfigFile || "chromatic.config.json", {
+        ...config,
+        projectId,
+      });
 
       projectInfoState.value = {
         ...projectInfoState.value,
@@ -203,7 +206,7 @@ async function serverChannel(channel: Channel, options: Options & { configFile?:
   );
 
   watchConfigFile(configFile, async (configuration) => {
-    if (!lastProjectId) return
+    if (!lastProjectId) return;
     configInfoState.value = await getConfigInfo(configuration, options);
   });
 

src/runChromaticBuild.test.ts

@@ -1,8 +1,10 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
 import { INITIAL_BUILD_PAYLOAD } from "./buildSteps";
 import { onCompleteOrError, onStartOrProgress, runChromaticBuild } from "./runChromaticBuild";
 import { LocalBuildProgress } from "./types";
 
-jest.mock("chromatic/node", () => ({ run: jest.fn() }));
+vi.mock("chromatic/node", () => ({ run: vi.fn() }));
 
 const store = {
   state: undefined as LocalBuildProgress | undefined,

src/screens/VisualTests/BuildEyebrow.stories.ts

@@ -1,7 +1,6 @@
 import { action } from "@storybook/addon-actions";
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { expect, fn } from "@storybook/test";
 import { fireEvent, within } from "@storybook/testing-library";
 
 import * as buildProgressStories from "../../components/BuildProgressLabel.stories";

src/screens/VisualTests/SnapshotControls.stories.tsx

@@ -1,5 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
 import { fireEvent, screen, userEvent, within } from "@storybook/testing-library";
 
 import { panelModes } from "../../modes";

src/screens/VisualTests/VisualTests.stories.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 // eslint-disable-next-line import/no-unresolved
 import { VariablesOf } from "@graphql-typed-document-node/core";
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { expect, fn } from "@storybook/test";
 import {
   findByLabelText,
   findByRole,

src/utils/SharedState.test.ts

@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
 import { SharedState } from "./SharedState";
 
 class MockChannel {

src/utils/action.ts

@@ -1,8 +1,8 @@
 import { action as act, type ActionOptions, type HandlerFunction } from "@storybook/addon-actions";
-import { jest } from "@storybook/jest";
+import { fn } from "@storybook/test";
 
 export const action = (name: string, options?: ActionOptions): HandlerFunction => {
-  const spy = jest.fn(act(name, options));
+  const spy = fn(act(name, options));
   Object.defineProperty(spy, "name", { value: name, writable: false });
   return spy;
 };

src/utils/summarizeTests.test.ts

@@ -1,10 +1,12 @@
+import { expect, it, vi } from "vitest";
+
 import { Browser, ComparisonResult, TestResult, TestStatus } from "../gql/graphql";
 import { makeComparison, makeTest } from "./storyData";
 import { summarizeTests } from "./summarizeTests";
 
-jest.mock("react", () => ({
-  useState: jest.fn((x: any) => [x, jest.fn()]),
-  useCallback: jest.fn((f: any) => f),
+vi.mock("react", () => ({
+  useState: vi.fn((x: any) => [x, vi.fn()]),
+  useCallback: vi.fn((f: any) => f),
 }));
 
 const tests = [

src/utils/testsToStatusUpdate.test.ts

@@ -1,3 +1,5 @@
+import { expect, it } from "vitest";
+
 import { TestStatus } from "../gql/graphql";
 import { testsToStatusUpdate } from "./testsToStatusUpdate";
 

src/utils/updateSelectedBuildInfo.test.ts

@@ -1,3 +1,5 @@
+import { expect, it } from "vitest";
+
 import { updateSelectedBuildInfo } from "./updateSelectedBuildInfo";
 
 it("does nothing if there is no next build", () => {