test: use vitest for unit tests

packages/editor/e2e-tests/e2e.config.ts

@@ -1,14 +1,58 @@
+import path from 'node:path'
 import type {Config} from '@jest/types'
-import {createJestConfig} from '../test-config/create-jest-config'
 
-const config: Config.InitialOptions = createJestConfig({
+const config: Config.InitialOptions = {
+  globals: {},
   globalSetup: './setup/globalSetup.ts',
   globalTeardown: './setup/globalTeardown.ts',
+  moduleFileExtensions: ['feature', 'js', 'ts'],
+  modulePathIgnorePatterns: [
+    '<rootDir>/bin/',
+    '<rootDir>/coverage/',
+    '<rootDir>/lib/',
+  ],
+  resolver: path.resolve(__dirname, './resolver.cjs'),
+  setupFiles: [path.resolve(__dirname, './setup.ts')],
   setupFilesAfterEnv: ['./setup/afterEnv.ts'],
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true,
+  },
+  testEnvironment: path.resolve(__dirname, './jsdom.jest.env.ts'),
+  testEnvironmentOptions: {
+    url: 'http://localhost:3333',
+  },
+  testMatch: ['<rootDir>/**/*.{test,spec}.{js,ts,tsx}'],
+  testPathIgnorePatterns: ['/node_modules/', '/.yalc/'],
   transform: {
     '\\.feature$': '<rootDir>/feature-file-transformer.js',
+    '\\.[jt]sx?$': [
+      'babel-jest',
+      {
+        // Don't look for babel.config.{ts,js,json} files or .babelrc files
+        configFile: false,
+        babelrc: false,
+        // The rest is only needed by Jest, if Jest is updated to no longer need babel then this can be removed as well as related dependencies
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: {
+                node: '14',
+                chrome: '61',
+                safari: '11.3',
+                firefox: '60',
+                edge: '79',
+              },
+            },
+          ],
+          '@babel/preset-typescript',
+          ['@babel/preset-react', {runtime: 'automatic'}],
+        ],
+      },
+    ],
   },
-  moduleFileExtensions: ['feature', 'js', 'ts'],
-})
+  transformIgnorePatterns: ['/node_modules/(?!(get-random-values-esm)/)'],
+}
 
 export default config

packages/editor/package.json

@@ -50,10 +50,10 @@
     "dev:e2e-server": "cd ./e2e-tests/ && tsx serve",
     "lint:fix": "biome lint --write .",
     "prepublishOnly": "turbo run build",
-    "test": "jest",
+    "test": "vitest --run",
+    "test:watch": "vitest",
     "test:e2e": "jest --config=e2e-tests/e2e.config.ts",
-    "test:e2e:watch": "jest --config=e2e-tests/e2e.config.ts --watch",
-    "test:watch": "jest --watch"
+    "test:e2e:watch": "jest --config=e2e-tests/e2e.config.ts --watch"
   },
   "dependencies": {
     "@portabletext/patches": "1.1.0",
@@ -78,6 +78,7 @@
     "@sanity/ui": "^2.8.9",
     "@sanity/util": "^3.55.0",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.17.21",
@@ -96,6 +97,7 @@
     "jest-dev-server": "^10.1.1",
     "jest-environment-jsdom": "^29.7.0",
     "jest-environment-node": "^29.7.0",
+    "jsdom": "^25.0.1",
     "node-ipc": "npm:@node-ipc/compat@9.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -104,7 +106,8 @@
     "ts-node": "^10.9.2",
     "tsx": "^4.17.0",
     "typescript": "5.6.2",
-    "vite": "^5.4.2"
+    "vite": "^5.4.2",
+    "vitest": "^2.1.1"
   },
   "peerDependencies": {
     "@sanity/block-tools": "^3.47.1",

packages/editor/src/editor/__tests__/PortableTextEditor.test.tsx

@@ -1,7 +1,7 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import type {PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import type {EditorSelection} from '../..'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
@@ -18,7 +18,7 @@ const renderPlaceholder = () => 'Jot something down here'
 describe('initialization', () => {
   it('receives initial onChange events and has custom placeholder', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const {container} = render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -88,7 +88,7 @@ describe('initialization', () => {
   })
   it('takes value from props and confirms it by emitting value change event', async () => {
     const initialValue = [helloBlock]
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const editorRef = createRef<PortableTextEditor>()
     render(
       <PortableTextEditorTester
@@ -120,7 +120,7 @@ describe('initialization', () => {
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
       backward: false,
     }
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -164,7 +164,7 @@ describe('initialization', () => {
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 3},
       backward: false,
     }
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const {rerender} = render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -223,7 +223,7 @@ describe('initialization', () => {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
     }
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -266,7 +266,7 @@ describe('initialization', () => {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
     }
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     let _rerender: any
     await waitFor(() => {
       render(
@@ -300,7 +300,7 @@ describe('initialization', () => {
       expect(onChange).toHaveBeenCalledWith({type: 'value', value})
     })
     value = [{_type: 'banana', _key: '123'}]
-    const newOnChange = jest.fn()
+    const newOnChange = vi.fn()
     _rerender(
       <PortableTextEditorTester
         onChange={newOnChange}
@@ -352,7 +352,7 @@ describe('initialization', () => {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
     }
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}

packages/editor/src/editor/__tests__/PortableTextEditorTester.tsx

@@ -1,4 +1,3 @@
-import {jest} from '@jest/globals'
 import {Schema} from '@sanity/schema'
 import {defineArrayMember, defineField} from '@sanity/types'
 import {
@@ -8,6 +7,7 @@ import {
   useMemo,
   type ForwardedRef,
 } from 'react'
+import {vi} from 'vitest'
 import {
   PortableTextEditable,
   PortableTextEditor,
@@ -100,10 +100,7 @@ export const PortableTextEditorTester = forwardRef(
       key++
       return `${key}`
     }, [])
-    const onChange = useMemo(
-      () => props.onChange || jest.fn(),
-      [props.onChange],
-    )
+    const onChange = useMemo(() => props.onChange || vi.fn(), [props.onChange])
     return (
       <PortableTextEditor
         schemaType={props.schemaType}

packages/editor/src/editor/__tests__/RangeDecorations.test.tsx

@@ -1,7 +1,7 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import type {PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type ReactNode, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import type {RangeDecoration} from '../..'
 import type {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
@@ -23,7 +23,7 @@ const RangeDecorationTestComponent = ({children}: {children?: ReactNode}) => {
 describe('RangeDecorations', () => {
   it('only render range decorations as necessary', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const value = [helloBlock]
     let rangeDecorations: RangeDecoration[] = [
       {

packages/editor/src/editor/__tests__/handleClick.test.tsx

@@ -1,6 +1,6 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import {fireEvent, render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 import {getEditableElement} from './utils'
@@ -34,7 +34,7 @@ describe('adds empty text block if its needed', () => {
     }
 
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const component = render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -96,7 +96,7 @@ describe('adds empty text block if its needed', () => {
     }
 
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const component = render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -151,7 +151,7 @@ describe('adds empty text block if its needed', () => {
     }
 
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const component = render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -217,7 +217,7 @@ describe('adds empty text block if its needed', () => {
     }
 
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const component = render(
       <PortableTextEditorTester
         onChange={onChange}

packages/editor/src/editor/__tests__/insert-block.test.tsx

@@ -1,8 +1,8 @@
-import {describe, expect, jest, test} from '@jest/globals'
 import {Schema} from '@sanity/schema'
 import type {PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
+import {describe, expect, test, vi} from 'vitest'
 import type {EditorChange, EditorSelection} from '../../types/editor'
 import {PortableTextEditable} from '../Editable'
 import {PortableTextEditor} from '../PortableTextEditor'
@@ -35,7 +35,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
       style: 'normal',
     }
     const initialValue: Array<PortableTextBlock> = [emptyTextBlock]
-    const onChange: (change: EditorChange) => void = jest.fn()
+    const onChange: (change: EditorChange) => void = vi.fn()
 
     render(
       <PortableTextEditor
@@ -104,7 +104,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
       style: 'normal',
     }
     const initialValue: Array<PortableTextBlock> = [nonEmptyTextBlock]
-    const onChange: (change: EditorChange) => void = jest.fn()
+    const onChange: (change: EditorChange) => void = vi.fn()
 
     render(
       <PortableTextEditor
@@ -177,7 +177,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
       _type: 'image',
     }
     const initialValue: Array<PortableTextBlock> = [emptyTextBlock, imageBlock]
-    const onChange: (change: EditorChange) => void = jest.fn()
+    const onChange: (change: EditorChange) => void = vi.fn()
 
     render(
       <PortableTextEditor

packages/editor/src/editor/__tests__/pteWarningsSelfSolving.test.tsx

@@ -1,7 +1,7 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import type {PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -24,7 +24,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
       },
     ]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -80,7 +80,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
       },
     ]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -137,7 +137,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
       },
     ]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -209,7 +209,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
       },
     ]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -273,7 +273,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
       },
     ]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -316,7 +316,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
     const initialValue = [] as PortableTextBlock[]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}