chore: move to vitest and update eslint (#1338)

* move to vitest * update eslint * fix ci
vega · Jul 3, 2024 · b5a3cdc · b5a3cdc
1 parent 2397535
commit b5a3cdc
Show file tree

Hide file tree

Showing 16 changed files with 1,913 additions and 3,409 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -32,7 +32,7 @@ jobs:
       - run: yarn build
 
       - name: Test coverage
-        run: yarn jest test/ --collectCoverage=true
+        run: yarn test --coverage
 
       - name: Upload coverage to Codecov
         uses: codecov/[email protected]

diff --git a/FixJSDOMEnvironment.ts b/FixJSDOMEnvironment.ts
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,103 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import tsParser from "@typescript-eslint/parser";
+import prettierConfig from "eslint-plugin-prettier/recommended";
+import globals from "globals";
+import vitest from "eslint-plugin-vitest";
+
+delete globals.browser["AudioWorkletGlobalScope "];
+
+/**
+ * @type {import('eslint').Linter.FlatConfig[]}
+ */
+export default [
+  {
+    ignores: [
+      ".eslintrc.js",
+      "babel.config.js",
+      "prettier.config.js",
+      "vitest.config.ts",
+      "vitest.setup.ts",
+      "rollup.config.js",
+      "build/**",
+      "coverage/**",
+      "FixJSDOMEnvironment.ts",
+    ],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    files: ["**/*.{js,ts}"],
+    plugins: {
+      vitest,
+    },
+    languageOptions: {
+      parser: tsParser,
+      globals: {
+        ...globals.browser,
+      },
+    },
+    settings: {
+      vitest: {
+        typecheck: true,
+      },
+    },
+    rules: {
+      ...vitest.configs.recommended.rules,
+      "prettier/prettier": "warn",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/ban-types": "warn",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/prefer-for-of": "error",
+      "@typescript-eslint/no-for-in-array": "error",
+      "@typescript-eslint/no-require-imports": "error",
+      "@typescript-eslint/no-parameter-properties": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          vars: "all",
+          args: "after-used",
+          ignoreRestSiblings: true,
+        },
+      ],
+      "@typescript-eslint/no-shadow": "error",
+      "@typescript-eslint/no-unsafe-member-access": "warn",
+      "@typescript-eslint/no-unsafe-argument": "warn",
+      "@typescript-eslint/no-unsafe-return": "warn",
+      "@typescript-eslint/no-unsafe-assignment": "warn",
+      "@typescript-eslint/no-unsafe-call": "warn",
+      "@typescript-eslint/no-object-literal-type-assertion": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-namespace": "error",
+      "@typescript-eslint/unbound-method": "off",
+      "@typescript-eslint/no-base-to-string": "off",
+      "@typescript-eslint/no-unnecessary-type-assertion": "off",
+      "@typescript-eslint/restrict-template-expressions": "off",
+      "@typescript-eslint/no-misused-promises": "off",
+      "linebreak-style": ["error", "unix"],
+      "no-irregular-whitespace": ["error", { skipComments: true }],
+      "no-alert": "error",
+      "prefer-const": "error",
+      "no-return-assign": "error",
+      "no-useless-call": "error",
+      "no-useless-concat": "error",
+      "prefer-template": "error",
+      "no-unused-vars": "off",
+      // "no-undef": "off", // typescript takes care of this for us
+      "no-unreachable": "off", // typescript takes care of this for us
+    },
+  },
+  prettierConfig,
+  {
+    files: ["**/*.mjs"],
+    ...tseslint.configs.disableTypeChecked,
+  },
+];
diff --git a/jest.config.js b/jest.config.js
diff --git a/package.json b/package.json
@@ -49,39 +49,40 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@release-it/conventional-changelog": "^8.0.1",
     "@rollup/plugin-commonjs": "26.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@types/jest": "^29.5.12",
     "@types/semver": "^7.5.8",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "@vitest/coverage-v8": "^1.6.0",
     "browser-sync": "^3.0.2",
     "concurrently": "^8.2.2",
     "del-cli": "^5.1.0",
-    "eslint": "^8.56.0",
+    "eslint": "^9.6.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jest": "^28.2.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "jest": "^29.7.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
+    "eslint-plugin-vitest": "^0.5.4",
+    "jsdom": "^24.1.0",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^3.2.5",
-    "release-it": "^17.1.1",
-    "rollup": "4.17.2",
+    "prettier": "^3.3.2",
+    "release-it": "^17.4.1",
+    "rollup": "4.18.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-ts": "^3.4.5",
-    "sass": "^1.74.1",
-    "typescript": "^5.4.5",
-    "vega": "^5.22.1",
-    "vega-lite": "^5.2.0"
+    "sass": "^1.77.6",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^7.15.0",
+    "vega": "^5.30.0",
+    "vega-lite": "^5.19.0",
+    "vitest": "^1.6.0",
+    "vitest-canvas-mock": "^0.3.3"
   },
   "peerDependencies": {
     "vega": "^5.21.0",
@@ -90,11 +91,11 @@
   "dependencies": {
     "fast-json-patch": "^3.1.1",
     "json-stringify-pretty-compact": "^3.0.0",
-    "semver": "^7.6.0",
-    "tslib": "^2.6.2",
+    "semver": "^7.6.2",
+    "tslib": "^2.6.3",
     "vega-interpreter": "^1.0.5",
     "vega-schema-url-parser": "^2.2.0",
-    "vega-themes": "^2.14.0",
+    "vega-themes": "^2.15.0",
     "vega-tooltip": "^0.34.0"
   },
   "scripts": {
@@ -107,8 +108,7 @@
     "serve": "browser-sync start --directory -s -f build *.html",
     "start": "yarn build && concurrently --kill-others -n Server,Rollup 'yarn serve' 'rollup -c -w'",
     "pretest": "yarn build:style",
-    "test": "jest",
-    "test:inspect": "node --inspect-brk ./node_modules/.bin/jest --runInBand",
+    "test": "vitest run",
     "prettierbase": "prettier '*.{css,scss,html}'",
     "format": "eslint . --fix && yarn prettierbase --write",
     "lint": "eslint . && yarn prettierbase --check",

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -5,7 +5,7 @@ import terser from "@rollup/plugin-terser";
 import bundleSize from "rollup-plugin-bundle-size";
 import ts from "rollup-plugin-ts";
 
-import pkg from "./package.json" assert { type: "json" };
+import pkg from "./package.json" with { type: "json" };
 
 const plugins = (browserslist, declaration) => [
   resolve(),

diff --git a/src/types.ts b/src/types.ts
@@ -4,6 +4,7 @@ import {Config as VlConfig} from 'vega-lite';
 export type Mode = 'vega' | 'vega-lite';
 export type Config = VlConfig | VgConfig;
 
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 export type ExpressionFunction = Record<string, any | {fn: any; visitor?: any}>;
 
 export interface MessageData {

diff --git a/test/container.test.ts b/test/container.test.ts
@@ -1,4 +1,5 @@
 import {TopLevelSpec} from 'vega-lite';
+import {expect, test} from 'vitest';
 import container from '../src/container';
 
 const vlSpec: TopLevelSpec = {

diff --git a/test/embed.test.ts b/test/embed.test.ts
@@ -3,8 +3,9 @@ import {View} from 'vega';
 import {expressionInterpreter} from 'vega-interpreter';
 import * as vl from 'vega-lite';
 import {compile, TopLevelSpec} from 'vega-lite';
-import embed, {guessMode, Mode} from '../src/embed';
 import {RepeatSpec} from 'vega-lite/build/src/spec';
+import {expect, test, vi} from 'vitest';
+import embed, {guessMode, Mode} from '../src/embed';
 
 const vlSpec: TopLevelSpec = {
   data: {values: [1, 2, 3]},
@@ -354,7 +355,7 @@ test('can change i18n strings', async () => {
 });
 
 test('can set hover arguments', async () => {
-  const hoverSpy = jest.spyOn(View.prototype, 'hover');
+  const hoverSpy = vi.spyOn(View.prototype, 'hover');
 
   const el = document.createElement('div');
 
@@ -402,7 +403,7 @@ test('can set hover arguments', async () => {
 test('Should warn about incompatible Vega and Vega-Lite versions', async () => {
   const el = document.createElement('div');
 
-  const spy = jest.spyOn(console, 'warn').mockImplementation();
+  const spy = vi.spyOn(console, 'warn').mockImplementation(() => {});
 
   await embed(
     el,

diff --git a/test/util.test.ts b/test/util.test.ts
@@ -1,6 +1,6 @@
-import {DEFAULT_ACTIONS, Actions} from './../src/embed';
-import {isURL} from '../src/util';
-import {mergeDeep} from '../src/util';
+import {expect, test} from 'vitest';
+import {isURL, mergeDeep} from '../src/util';
+import {Actions, DEFAULT_ACTIONS} from './../src/embed';
 
 test('isURL detects URL', () => {
   expect(isURL('https://vega.github.io/vega/examples/global-development.vg.json')).toBeTruthy();

diff --git a/tsconfig.json b/tsconfig.json
@@ -8,7 +8,8 @@
     "strict": true,
     "allowSyntheticDefaultImports": true,
     "importHelpers": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "test/**/*.ts"]
 }
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -0,0 +1,18 @@
+import {defineConfig} from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    setupFiles: ['./vitest.setup.ts'],
+    environment: 'jsdom',
+    server: {
+      deps: {
+        inline: ['vitest-canvas-mock'],
+      },
+    },
+    environmentOptions: {
+      jsdom: {
+        resources: 'usable',
+      },
+    },
+  },
+});
diff --git a/vitest.setup.ts b/vitest.setup.ts
@@ -0,0 +1 @@
+import 'vitest-canvas-mock';