chore(tests): migrate to vitest

.eslintrc.json

@@ -20,7 +20,7 @@
     "prettier",
     "react-hooks",
     "import",
-    "jest"
+    "vitest"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -31,6 +31,8 @@
     }
   },
   "rules": {
+    "import/namespace": "off",
+    "import/named": "off",
     "eqeqeq": "error",
     "no-var": "error",
     "prefer-const": "error",
@@ -48,7 +50,7 @@
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-explicit-any": "off",
-    "jest/consistent-test-it": [
+    "vitest/consistent-test-it": [
       "error",
       { "fn": "it", "withinDescribe": "it" }
     ],

.github/workflows/test-multiple-builds.yml

@@ -52,7 +52,6 @@ jobs:
         if: ${{ matrix.build == 'umd' }}
         run: |
           sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/umd\1.${NODE_ENV}.js/" package.json
-          sed -i~ 's/"test:ci":.*,$/"test:ci": "jest",/' package.json
         env:
           NODE_ENV: ${{ matrix.env }}
       - name: Patch for SystemJS

.github/workflows/test-multiple-versions.yml

@@ -53,7 +53,6 @@ jobs:
           sed -i~ '1s/^/import React from "react";/' tests/*.tsx
           sed -i~ 's/"jsx": "react-jsx"/"jsx": "react"/' tsconfig.json
           sed -i~ 's/import\.meta\.env[?]\.MODE/"DEVELOPMENT".toLowerCase()/' src/*.ts src/*/*.ts src/*/*/*.ts
-          sed -i~ 's/"test:ci":.*,$/"test:ci": "jest",/' package.json
       - name: Test ${{ matrix.react }}
         run: |
           yarn add -D react@${{ matrix.react }} react-dom@${{ matrix.react }}

.github/workflows/test-old-typescript.yml

@@ -52,11 +52,21 @@ jobs:
           sed -i~ '1s/^/import React from "react";/' tests/*.tsx
           sed -i~ 's/"jsx": "react-jsx"/"jsx": "react"/' tsconfig.json
           sed -i~ 's/"noUncheckedIndexedAccess": true,//' tsconfig.json
-          yarn json -I -f package.json -e "this.resolutions={}; this.resolutions['@jest/globals']='25.5.2'; this.resolutions['pretty-format']='25.5.0'; this.resolutions['@types/prettier']='2.4.2'; this.resolutions['@types/yargs']='17.0.13'; this.resolutions['@types/node']='18.11.18';"
-          yarn add -D @jest/globals@25.5.2 pretty-format@25.5.0 @types/prettier@2.4.2 @types/yargs@17.0.13 @types/node@18.11.18 @types/babel__traverse@7.18.2
+          yarn json -I -f package.json -e "this.resolutions={}; this.resolutions['pretty-format']='25.5.0'; this.resolutions['@types/prettier']='2.4.2'; this.resolutions['@types/yargs']='17.0.13'; this.resolutions['@types/node']='18.11.18';"
+          yarn add -D pretty-format@25.5.0 @types/prettier@2.4.2 @types/yargs@17.0.13 @types/node@18.11.18 @types/babel__traverse@7.18.2
           rm -r tests/macro-vite.*
-      - name: Test ${{ matrix.typescript }}
+      - name: Install old TypeScript
         run: |
           yarn add -D typescript@${{ matrix.typescript }}
-          rm -r node_modules/@types/jsdom node_modules/parse5 node_modules/@types/babel__core/node_modules
+          rm node_modules/parse5/dist/*.d.ts
+      - name: Patch testing setup for older TS
+        if: ${{ matrix.typescript == '3.9.7' ||  matrix.typescript == '3.8.3' ||  matrix.typescript == '3.7.5' }}
+        run: |
+          yarn add -D @testing-library/user-event@12.1.7 @testing-library/react@11.0.4
+          rm node_modules/vitest/dist/*.d.ts
+          rm node_modules/parse5/dist/*.d.ts
+          echo "declare module 'vitest'" >> ./src/types.d.ts
+      - name: Test ${{ matrix.typescript }}
+        run: |
+          rm -r node_modules/@types/babel__core/node_modules
           yarn tsc --noEmit

package.json

@@ -58,10 +58,8 @@
     "eslint": "eslint --fix '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
     "eslint:ci": "eslint '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
     "pretest": "tsc --noEmit",
-    "test": "yarn node --experimental-vm-modules $(yarn bin jest)",
-    "test:ci": "yarn node --experimental-vm-modules $(yarn bin jest)",
-    "test:dev": "yarn node --experimental-vm-modules $(yarn bin jest) --watch --no-coverage",
-    "test:coverage:watch": "yarn node --experimental-vm-modules $(yarn bin jest) --watch",
+    "test": "vitest --ui --coverage",
+    "test:ci": "vitest",
     "patch-d-ts": "node -e \"var {entries}=require('./rollup.config.js');require('shelljs').find('dist/**/*.d.ts').forEach(f=>{entries.forEach(({find,replacement})=>require('shelljs').sed('-i',new RegExp(' from \\''+find.source.slice(0,-1)+'\\';$'),' from \\''+replacement+'\\';',f));require('shelljs').sed('-i',/ from '(\\.[^']+)\\.ts';$/,' from \\'\\$1\\';',f)})\"",
     "copy": "shx cp -r dist/src/* dist/esm && shx cp -r dist/src/* dist && shx rm -rf dist/{src,tests} && downlevel-dts dist dist/ts3.4 && shx cp package.json readme.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.prettier=undefined; this.jest=undefined;\"",
     "patch-macro-vite": "shx cp dist/esm/macro/vite.d.ts dist/macro/ && shx cp dist/ts3.4/esm/macro/vite.d.ts dist/ts3.4/macro/",
@@ -99,43 +97,6 @@
     "url": "https://github.com/pmndrs/valtio/issues"
   },
   "homepage": "https://github.com/pmndrs/valtio",
-  "jest": {
-    "rootDir": ".",
-    "testEnvironment": "jsdom",
-    "preset": "ts-jest/presets/default-esm",
-    "transform": {
-      "^.+\\.(t|j)sx?$": [
-        "ts-jest",
-        {
-          "useESM": true
-        }
-      ]
-    },
-    "extensionsToTreatAsEsm": [
-      ".ts",
-      ".tsx"
-    ],
-    "moduleNameMapper": {
-      "^valtio$": "<rootDir>/src/index.ts",
-      "^valtio/(.*)$": "<rootDir>/src/$1.ts"
-    },
-    "modulePathIgnorePatterns": [
-      "dist"
-    ],
-    "testRegex": "test.(js|ts|tsx)$",
-    "coverageDirectory": "./coverage/",
-    "collectCoverage": true,
-    "coverageReporters": [
-      "json",
-      "html",
-      "text",
-      "text-summary"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{js,ts,tsx}",
-      "tests/**/*.{js,ts,tsx}"
-    ]
-  },
   "dependencies": {
     "proxy-compare": "2.5.0",
     "use-sync-external-store": "1.2.0"
@@ -156,11 +117,14 @@
     "@rollup/plugin-typescript": "^11.0.0",
     "@testing-library/react": "^14.0.0",
     "@types/babel-plugin-macros": "^3.1.0",
-    "@types/react": "^18.0.33",
+    "@types/jsdom": "^21.1.1",
+    "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/use-sync-external-store": "^0.0.3",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
+    "@vitest/coverage-c8": "^0.30.1",
+    "@vitest/ui": "^0.30.1",
     "aslemammad-vite-plugin-macro": "^1.0.0",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-tester": "10.1.0",
@@ -171,12 +135,11 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "eslint-plugin-vitest": "^0.0.57",
+    "jsdom": "^21.1.1",
     "json": "^11.0.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.7",
@@ -188,10 +151,10 @@
     "rollup-plugin-esbuild": "^5.0.0",
     "shx": "^0.3.4",
     "ts-expect": "^1.3.0",
-    "ts-jest": "^29.1.0",
     "tslib": "^2.5.0",
     "typescript": "^5.0.3",
-    "vite": "^4.2.1"
+    "vite": "^4.1.4",
+    "vitest": "^0.29.8"
   },
   "peerDependencies": {
     "react": ">=16.8"

tests/__snapshots__/macro-vite.test.ts.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`basic 1`] = `
-"import { useSnapshot as _useSnapshot } from "valtio";
+"import { useSnapshot as _useSnapshot } from \\"valtio\\";
 
 
 const Component = () => {const valtio_macro_snap_state = _useSnapshot(
@@ -16,7 +16,7 @@ const Component = () => {const valtio_macro_snap_state = _useSnapshot(
 `;
 
 exports[`complex 1`] = `
-"import { useSnapshot as _useSnapshot } from "valtio";
+"import { useSnapshot as _useSnapshot } from \\"valtio\\";
 
 
 const Component = () => {const valtio_macro_snap_state = _useSnapshot(

tests/__snapshots__/macro.test.ts.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`valtio/macro 1. valtio/macro: 1. valtio/macro 1`] = `
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`valtio/macro > 1. valtio/macro > 1. valtio/macro 1`] = `
+"
 import { useProxy } from '../dist/macro'
 
 const Component = () => {
@@ -27,11 +27,11 @@ const Component = () => {
   )
 }
 
-
+"
 `;
 
-exports[`valtio/macro 2. valtio/macro: 2. valtio/macro 1`] = `
-
+exports[`valtio/macro > 2. valtio/macro > 2. valtio/macro 1`] = `
+"
 import { useProxy } from '../dist/macro'
 
 const Component = () => {
@@ -66,5 +66,5 @@ const Component = () => {
   )
 }
 
-
+"
 `;

tests/async.test.tsx

@@ -1,6 +1,6 @@
 import { StrictMode, Suspense } from 'react'
-import { it } from '@jest/globals'
 import { fireEvent, render, waitFor } from '@testing-library/react'
+import { it } from 'vitest'
 import { proxy, useSnapshot } from 'valtio'
 
 const sleep = (ms: number) =>

tests/basic.test.tsx

@@ -1,6 +1,6 @@
 import { StrictMode, useEffect, useRef, useState } from 'react'
-import { expect, it, jest } from '@jest/globals'
 import { fireEvent, render, waitFor } from '@testing-library/react'
+import { expect, it, vi } from 'vitest'
 import { proxy, useSnapshot } from 'valtio'
 
 it('simple counter', async () => {
@@ -16,7 +16,7 @@ it('simple counter', async () => {
     )
   }
 
-  const { getByText, findByText } = render(
+  const { getByText, findByText, unmount } = render(
     <StrictMode>
       <Counter />
     </StrictMode>
@@ -26,6 +26,7 @@ it('simple counter', async () => {
 
   fireEvent.click(getByText('button'))
   await findByText('count: 1')
+  unmount()
 })
 
 it('no extra re-renders (commits)', async () => {
@@ -91,7 +92,7 @@ it('no extra re-renders (commits)', async () => {
 it('no extra re-renders (render func calls in non strict mode)', async () => {
   const obj = proxy({ count: 0, count2: 0 })
 
-  const renderFn = jest.fn()
+  const renderFn = vi.fn()
   const Counter = () => {
     const snap = useSnapshot(obj)
     renderFn(snap.count)
@@ -103,7 +104,7 @@ it('no extra re-renders (render func calls in non strict mode)', async () => {
     )
   }
 
-  const renderFn2 = jest.fn()
+  const renderFn2 = vi.fn()
   const Counter2 = () => {
     const snap = useSnapshot(obj)
     renderFn2(snap.count2)

tests/class.test.tsx

@@ -1,6 +1,6 @@
 import { StrictMode, useEffect, useRef } from 'react'
-import { it } from '@jest/globals'
 import { fireEvent, render, waitFor } from '@testing-library/react'
+import { it } from 'vitest'
 import { proxy, useSnapshot } from 'valtio'
 
 it('simple class without methods', async () => {

tests/computed.test.tsx

@@ -1,20 +1,13 @@
 import { StrictMode, Suspense } from 'react'
-import {
-  afterEach,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  jest,
-} from '@jest/globals'
 import { fireEvent, render } from '@testing-library/react'
 import { memoize } from 'proxy-memoize'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { proxy, snapshot, subscribe, useSnapshot } from 'valtio'
 import { addComputed, proxyWithComputed, subscribeKey } from 'valtio/utils'
 
 const consoleWarn = console.warn
 beforeEach(() => {
-  console.warn = jest.fn((message: any) => {
+  console.warn = vi.fn((message: string) => {
     if (message.startsWith('addComputed is deprecated.')) {
       return
     }
@@ -32,7 +25,7 @@ const sleep = (ms: number) =>
 
 describe('proxyWithComputed', () => {
   it('simple computed getters', async () => {
-    const computeDouble = jest.fn((x: number) => x * 2)
+    const computeDouble = vi.fn((x: number) => x * 2)
     const state = proxyWithComputed(
       {
         text: '',
@@ -43,7 +36,7 @@ describe('proxyWithComputed', () => {
       }
     )
 
-    const callback = jest.fn()
+    const callback = vi.fn()
     subscribe(state, callback)
 
     expect(snapshot(state)).toMatchObject({ text: '', count: 0, doubled: 0 })
@@ -64,7 +57,7 @@ describe('proxyWithComputed', () => {
   })
 
   it('computed getters and setters', async () => {
-    const computeDouble = jest.fn((x: number) => x * 2)
+    const computeDouble = vi.fn((x: number) => x * 2)
     const state = proxyWithComputed(
       {
         text: '',
@@ -178,7 +171,7 @@ describe('proxyWithComputed', () => {
 
 describe('DEPRECATED addComputed', () => {
   it('simple addComputed', async () => {
-    const computeDouble = jest.fn((x: number) => x * 2)
+    const computeDouble = vi.fn((x: number) => x * 2)
     const state = proxy({
       text: '',
       count: 0,
@@ -187,7 +180,7 @@ describe('DEPRECATED addComputed', () => {
       doubled: (snap) => computeDouble(snap.count),
     })
 
-    const callback = jest.fn()
+    const callback = vi.fn()
     subscribe(state, callback)
 
     expect(snapshot(state)).toMatchObject({ text: '', count: 0, doubled: 0 })
@@ -248,7 +241,7 @@ describe('DEPRECATED addComputed', () => {
   })
 
   it('nested emulation with addComputed', async () => {
-    const computeDouble = jest.fn((x: number) => x * 2)
+    const computeDouble = vi.fn((x: number) => x * 2)
     const state = proxy({ text: '', math: { count: 0 } })
     addComputed(
       state,
@@ -258,7 +251,7 @@ describe('DEPRECATED addComputed', () => {
       state.math
     )
 
-    const callback = jest.fn()
+    const callback = vi.fn()
     subscribe(state, callback)
 
     expect(snapshot(state)).toMatchObject({
@@ -320,7 +313,7 @@ describe('proxyWithComputed and subscribeKey', () => {
         doubled: (snap) => snap.count * 2,
       }
     )
-    const handler = jest.fn()
+    const handler = vi.fn()
     subscribeKey(state, 'doubled', handler)
     state.count = 2
     await Promise.resolve()