refactor: migrate CLI tests to vitest (#4409)

Jest is barely maintained and vitest is blazinly faster.

Author: TrySound

apps/builder/package.json

@@ -81,7 +81,7 @@
     "cookie": "^1.0.1",
     "css-tree": "^2.3.1",
     "date-fns": "^3.6.0",
-    "debug": "^4.3.6",
+    "debug": "^4.3.7",
     "detect-font": "^0.1.5",
     "downshift": "^6.1.7",
     "fast-deep-equal": "^3.1.3",
@@ -131,6 +131,7 @@
     "@webstudio-is/jest-config": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
     "html-tags": "^4.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react-router-dom": "^6.26.2",
     "react-test-renderer": "18.3.0-canary-14898b6a9-20240318",
     "type-fest": "^4.26.1",

package.json

@@ -3,6 +3,7 @@
   "name": "webstudio-root",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "pnpm -r --filter='!./fixtures/*' build",
     "dts": "pnpm -r dts",

packages/cli/jest.config.js

@@ -24,7 +24,7 @@
   "scripts": {
     "typecheck": "tsc",
     "build": "rm -rf lib && esbuild src/cli.ts --outdir=lib --bundle --format=esm --packages=external",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
+    "test": "vitest run"
   },
   "license": "AGPL-3.0-or-later",
   "engines": {
@@ -51,7 +51,6 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
     "@netlify/remix-adapter": "^2.5.1",
     "@netlify/remix-edge-adapter": "3.4.2",
     "@remix-run/cloudflare": "^2.12.1",
@@ -65,14 +64,15 @@
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.33",
     "@vitejs/plugin-react": "^4.3.3",
-    "@webstudio-is/jest-config": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
+    "prettier": "3.3.3",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "ts-expect": "^1.3.0",
     "typescript": "5.6.3",
     "vike": "^0.4.182",
     "vite": "^5.4.10",
+    "vitest": "^2.1.4",
     "wrangler": "^3.63.2"
   }
 }

packages/cli/package.json

@@ -1,9 +1,11 @@
-import { test, expect } from "@jest/globals";
+import { test, expect } from "vitest";
 import * as React from "react";
 import ReactDOMServer from "react-dom/server";
 import esbuild from "esbuild";
+import prettier from "prettier/standalone";
+import parserHtml from "prettier/parser-html";
+
 import { htmlToJsx } from "./html-to-jsx";
-import prettier from "prettier";
 
 /**
  * Converts HTML to JSX, renders the JSX to HTML.
@@ -61,7 +63,10 @@ const convertHtmlToJsxAndRenderToHtml = async (htmlCode: string) => {
 };
 
 const formatHtml = async (htmlCode: string) => {
-  return await prettier.format(htmlCode, { parser: "html" });
+  return await prettier.format(htmlCode, {
+    parser: "html",
+    plugins: [parserHtml],
+  });
 };
 
 test("Simple conversion works", async () => {

packages/cli/src/html-to-jsx.test.ts

@@ -9,7 +9,7 @@
     "typecheck": "tsc",
     "build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
+    "test": "vitest run"
   },
   "dependencies": {
     "@emotion/hash": "^0.9.2",
@@ -18,14 +18,13 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
-    "@webstudio-is/jest-config": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "typescript": "5.6.3"
+    "typescript": "5.6.3",
+    "vitest": "^2.1.4"
   },
   "exports": {
     "webstudio": "./src/index.ts",

packages/css-engine/jest.config.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@jest/globals";
+import { test, expect } from "vitest";
 import { createRegularStyleSheet } from "./create-style-sheet";
 import { generateAtomic } from "./atomic";
 import type { NestingRule } from "./rules";

packages/css-engine/package.json

@@ -1,4 +1,4 @@
-import { describe, test, expect } from "@jest/globals";
+import { describe, test, expect } from "vitest";
 import { compareMedia } from "./compare-media";
 
 describe("Compare media", () => {

packages/css-engine/src/core/atomic.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, test } from "@jest/globals";
+import { describe, expect, test } from "vitest";
 import { equalMedia } from "./equal-media";
 
 describe("equalMedia", () => {