Jest to Vitest migration (#230)

* working without clean up

* clean up dependencies

* use test not dev

* add tests for kclErrToDiagnostic

* remove jest config

* remove unneeded @ts-ignore

jest.config.ts

@@ -1,19 +0,0 @@
-import type { Config } from 'jest'
-
-const config: Config = {
-  testEnvironment: 'jsdom',
-  preset: 'ts-jest/presets/js-with-ts',
-  transform: {
-    '^.+\\.(ts|tsx)?$': 'ts-jest',
-    '^.+\\.(js|jsx)$': 'babel-jest',
-    '^.+\\.css$': ["jest-transform-css", { modules: true, generateScopedName: "[path]_[name]_[local]" }],
-  },
-  transformIgnorePatterns: ['//node_modules/(?!(allotment|@tauri-apps/api)/)'],
-  moduleNameMapper: {
-    '^allotment$': 'allotment/dist/legacy',
-  },
-  setupFilesAfterEnv: ['./src/setupTests.ts'],
-  reporters: [['github-actions', { silent: false }], 'summary'],
-}
-
-export default config

package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@codemirror/lang-javascript": "^6.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
@@ -14,10 +13,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^29.5.3",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@uiw/codemirror-extensions-langs": "^4.21.9",
     "@uiw/react-codemirror": "^4.15.1",
     "crypto-js": "^4.1.1",
     "formik": "^2.4.3",
@@ -36,10 +35,11 @@
     "toml": "^3.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.4.2",
-    "util": "^0.12.5",
     "uuid": "^9.0.0",
+    "vitest": "^0.34.1",
     "wasm-pack": "^0.12.1",
     "web-vitals": "^2.1.0",
+    "ws": "^8.13.0",
     "zustand": "^4.1.4"
   },
   "scripts": {
@@ -48,10 +48,10 @@
     "build:local": "vite build",
     "build:both": "vite build",
     "build:both:local": "yarn build:wasm && vite build",
-    "test": "jest --watchAll=true --forceExit",
+    "test": "vitest --mode development",
-    "test:nowatch": "jest --watchAll=false --forceExit --detectOpenHandles --silent=false",
+    "test:nowatch": "vitest run --mode development",
     "test:rust": "(cd src/wasm-lib && cargo test && cargo clippy)",
-    "test:cov": "jest --watchAll=false --coverage=true --forceExit",
+    "test:cov": "vitest run --coverage --mode development",
     "simpleserver:ci": "http-server ./public --cors -p 3000 &",
     "simpleserver": "http-server ./public --cors -p 3000",
     "fmt": "prettier --write ./src",
@@ -90,21 +90,17 @@
     "@types/wicg-file-system-access": "^2020.9.6",
     "@types/ws": "^8.5.5",
     "@vitejs/plugin-react": "^4.0.3",
+    "@vitest/coverage-istanbul": "^0.34.1",
     "autoprefixer": "^10.4.13",
-    "babel-jest": "^29.6.1",
     "eslint": "^8.44.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.11.0",
+    "happy-dom": "^10.8.0",
     "husky": "^8.0.3",
-    "isomorphic-fetch": "^3.0.0",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
-    "jest-transform-css": "^6.0.1",
     "postcss": "^8.4.19",
     "prettier": "^2.8.0",
     "setimmediate": "^1.0.5",
     "tailwindcss": "^3.2.4",
-    "ts-jest": "^29.1.1",
     "vite": "^4.4.3",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^4.2.0",

src/App.tsx

@@ -11,8 +11,8 @@ import { asyncLexer } from './lang/tokeniser'
 import { abstractSyntaxTree } from './lang/abstractSyntaxTree'
 import { _executor, ExtrudeGroup, SketchGroup } from './lang/executor'
 import CodeMirror from '@uiw/react-codemirror'
-import { linter, lintGutter, Diagnostic } from '@codemirror/lint'
+import { langs } from '@uiw/codemirror-extensions-langs'
-import { javascript } from '@codemirror/lang-javascript'
+import { linter, lintGutter } from '@codemirror/lint'
 import { ViewUpdate } from '@codemirror/view'
 import {
   lineHighlightField,
@@ -39,6 +39,7 @@ import {
   faSquareRootVariable,
 } from '@fortawesome/free-solid-svg-icons'
 import { useHotkeys } from 'react-hotkeys-hook'
+import { TEST } from './env'
 
 export function App() {
   const cam = useRef()
@@ -351,6 +352,16 @@ export function App() {
     [debounceSocketSend, isMouseDownInStream, cmdId, fileId, setCmdId]
   )
 
+  const extraExtensions = useMemo(() => {
+    if (TEST) return []
+    return [
+      lintGutter(),
+      linter((_view) => {
+        return kclErrToDiagnostic(useStore.getState().kclErrors)
+      }),
+    ]
+  }, [])
+
   return (
     <div
       className="h-screen relative flex flex-col"
@@ -405,12 +416,9 @@ export function App() {
               className="h-full"
               value={code}
               extensions={[
-                javascript({ jsx: true }),
+                langs.javascript({ jsx: true }),
                 lineHighlightField,
-                lintGutter(),
+                ...extraExtensions,
-                linter((_view) => {
-                  return kclErrToDiagnostic(useStore.getState().kclErrors)
-                }),
               ]}
               onChange={onChange}
               onUpdate={onUpdate}

src/env.ts

@@ -4,9 +4,8 @@
 // i.e. const VITE_MY_VAR = import.meta.env.VITE_MY_VAR
 // Maybe this file should be generated in a GHA from .env.development?
 
-// @ts-ignore
 export const VITE_KC_API_WS_MODELING_URL = import.meta.env
   .VITE_KC_API_WS_MODELING_URL
-// @ts-ignore
 export const VITE_KC_API_BASE_URL = import.meta.env.VITE_KC_API_BASE_URL
 export const VITE_KC_SITE_BASE_URL = import.meta.env.VITE_KC_SITE_BASE_URL
+export const TEST = import.meta.env.TEST

src/lang/errors.test.ts

@@ -0,0 +1,51 @@
+import { kclErrToDiagnostic, KCLError } from './errors'
+
+describe('test kclErrToDiagnostic', () => {
+  it('converts KCL errors to CodeMirror diagnostics', () => {
+    const errors: KCLError[] = [
+      {
+        kind: 'semantic',
+        msg: 'Semantic error',
+        sourceRanges: [
+          [0, 1],
+          [2, 3],
+        ],
+      },
+      {
+        kind: 'type',
+        msg: 'Type error',
+        sourceRanges: [
+          [4, 5],
+          [6, 7],
+        ],
+      },
+    ]
+    const diagnostics = kclErrToDiagnostic(errors)
+    expect(diagnostics).toEqual([
+      {
+        from: 0,
+        to: 1,
+        message: 'Semantic error',
+        severity: 'error',
+      },
+      {
+        from: 2,
+        to: 3,
+        message: 'Semantic error',
+        severity: 'error',
+      },
+      {
+        from: 4,
+        to: 5,
+        message: 'Type error',
+        severity: 'error',
+      },
+      {
+        from: 6,
+        to: 7,
+        message: 'Type error',
+        severity: 'error',
+      },
+    ])
+  })
+})

src/lang/executor.test.ts

@@ -5,6 +5,7 @@ import { lexer } from './tokeniser'
 import { ProgramMemory, Path, SketchGroup } from './executor'
 import { initPromise } from './rust'
 import { enginelessExecutor } from '../lib/testHelpers'
+import { vi } from 'vitest'
 
 beforeAll(() => initPromise)
 
@@ -36,7 +37,7 @@ log(5, myVar)`
     const programMemoryOverride: ProgramMemory['root'] = {
       log: {
         type: 'userVal',
-        value: jest.fn(),
+        value: vi.fn(),
         __meta: [
           {
             sourceRange: [0, 0],

src/lang/rust.ts

@@ -8,7 +8,9 @@ const initialise = async () => {
       ? 'tauri://localhost'
       : window.location.origin.includes('localhost')
       ? 'http://localhost:3000'
-      : window.location.origin
+      : window.location.origin && window.location.origin !== 'null'
+      ? window.location.origin
+      : 'http://localhost:3000'
   const fullUrl = baseUrl + '/wasm_lib_bg.wasm'
   const input = await fetch(fullUrl)
   const buffer = await input.arrayBuffer()

src/setupTests.ts

@@ -1,17 +1,5 @@
 import '@testing-library/jest-dom'
-import util from 'util'
+import { WebSocket } from 'ws'
-import fetch from 'isomorphic-fetch'
-import fs from 'fs'
-
-jest.mock('./env', () => {
-  // and set all the env vars from .env.development
-  const mockVars: { [key: string]: string } = {}
-  fs.readFileSync('.env.development', 'utf8')
-    .split('\n')
-    .map((line) => line.split('='))
-    .forEach(([key, value]) => (mockVars[key] = value))
-  return mockVars
-})
 
 class MockRTCPeerConnection {
   constructor() {}
@@ -47,8 +35,4 @@ class MockRTCPeerConnection {
 // @ts-ignore
 global.RTCPeerConnection = MockRTCPeerConnection
 // @ts-ignore
-global.fetch = fetch
+global.WebSocket = WebSocket
-
-// @ts-ignore
-global.TextDecoder = util.TextDecoder
-global.TextEncoder = util.TextEncoder

vite.config.ts

@@ -2,7 +2,7 @@ import react from '@vitejs/plugin-react'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
 import eslint from 'vite-plugin-eslint'
 import dns from 'dns'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config';
 
 // Only needed because we run Node < 17 
 // and we want to open `localhost` not `127.0.0.1` on server start
@@ -14,6 +14,14 @@ const config = defineConfig({
     open: true,
     port: 3000,
   },
+  test: {
+    globals: true,
+    setupFiles: 'src/setupTests.ts',
+    environment: 'happy-dom',
+    coverage: {
+      provider: 'istanbul' // or 'v8'
+    },
+  },
   build: {
     outDir: 'build',
   },