Move to vitest (#2709)

.eslintrc.js

@@ -85,13 +85,7 @@ module.exports = {
         'packages/toolpad-core/**/*',
         'packages/toolpad-components/**/*',
       ],
-      excludedFiles: [
-        '**/jest-environment-jsdom.ts',
-        'tsup.config.ts',
-        '*.spec.ts',
-        '*.spec.tsx',
-        'jest.config.ts',
-      ],
+      excludedFiles: ['tsup.config.ts', '*.spec.ts', '*.spec.tsx', 'vitest.config.ts'],
       rules: {
         'import/no-extraneous-dependencies': ['error'],
       },

package.json

@@ -42,15 +42,12 @@
   },
   "devDependencies": {
     "@argos-ci/core": "0.11.1",
-    "@jest/globals": "29.7.0",
     "@mui/monorepo": "https://github.com/mui/material-ui.git",
     "@next/eslint-plugin-next": "13.4.19",
     "@playwright/test": "1.38.0",
-    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
     "@types/archiver": "5.3.2",
     "@types/gtag.js": "0.0.13",
-    "@types/jest": "29.5.5",
     "@types/node": "20.6.2",
     "@types/rimraf": "3.0.2",
     "@typescript-eslint/eslint-plugin": "6.7.0",
@@ -73,9 +70,7 @@
     "express": "4.18.2",
     "format-util": "1.0.5",
     "globby": "13.2.2",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-fail-on-console": "3.1.1",
+    "jsdom": "22.1.0",
     "lerna": "7.3.0",
     "markdownlint-cli2": "0.10.0",
     "prettier": "2.8.8",
@@ -84,8 +79,9 @@
     "recharts": "2.8.0",
     "regenerator-runtime": "0.14.0",
     "rimraf": "5.0.1",
-    "ts-jest": "29.1.1",
     "typescript": "5.2.2",
+    "vitest-dom": "0.1.1",
+    "vitest-fail-on-console": "0.5.1",
     "yarn-deduplicate": "6.0.2"
   },
   "dependencies": {
@@ -97,6 +93,7 @@
     "semver": "7.5.4",
     "tsup": "7.2.0",
     "tsx": "3.12.10",
+    "vitest": "0.34.5",
     "yargs": "17.7.2",
     "zod": "3.22.2",
     "zod-to-json-schema": "3.21.4"

packages/create-toolpad-app/package.json

@@ -24,7 +24,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "check-types": "tsc --noEmit",
-    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --detectOpenHandles --forceExit"
+    "test": "vitest run"
   },
   "engines": {
     "node": ">=18"
@@ -41,7 +41,6 @@
   "devDependencies": {
     "@types/inquirer": "9.0.3",
     "@types/invariant": "2.2.35",
-    "@types/jest": "29.5.4",
     "@types/node": "20.6.0",
     "@types/semver": "7.5.2",
     "@types/yargs": "17.0.24"

packages/create-toolpad-app/tests/index.spec.ts

@@ -4,11 +4,11 @@ import * as url from 'url';
 import readline from 'readline';
 import { Readable } from 'stream';
 import { execa, ExecaChildProcess } from 'execa';
-import { jest } from '@jest/globals';
+import { test, expect, afterEach } from 'vitest';
 import { once } from 'events';
 import * as os from 'os';
 
-jest.setTimeout(process.env.CI ? 60000 : 600000);
+const TEST_TIMEOUT = process.env.CI ? 60000 : 600000;
 
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 
@@ -35,57 +35,61 @@ async function waitForMatch(input: Readable, regex: RegExp): Promise<RegExpExecA
   });
 }
 
-test('create-toolpad-app can bootstrap a Toolpad app', async () => {
-  testDir = await fs.mkdtemp(path.resolve(os.tmpdir(), './test-app-'));
-  cp = execa(cliPath, [testDir], {
-    cwd: currentDirectory,
-  });
-  cp.stdout?.pipe(process.stdout);
-  cp.stderr?.pipe(process.stdout);
-  const result = await cp;
-  expect(result.stdout).toMatch('Run the following to get started');
-  const packageJsonContent = await fs.readFile(path.resolve(testDir, './package.json'), {
-    encoding: 'utf-8',
-  });
-  const packageJson = JSON.parse(packageJsonContent);
-  expect(packageJson).toEqual(
-    expect.objectContaining({
-      dependencies: expect.objectContaining({
-        '@mui/toolpad': expect.any(String),
-      }),
-      scripts: expect.objectContaining({
-        build: 'toolpad build',
-        dev: 'toolpad dev',
-        start: 'toolpad start',
+test(
+  'create-toolpad-app can bootstrap a Toolpad app',
+  async () => {
+    testDir = await fs.mkdtemp(path.resolve(os.tmpdir(), './test-app-'));
+    cp = execa(cliPath, [testDir], {
+      cwd: currentDirectory,
+    });
+    cp.stdout?.pipe(process.stdout);
+    cp.stderr?.pipe(process.stdout);
+    const result = await cp;
+    expect(result.stdout).toMatch('Run the following to get started');
+    const packageJsonContent = await fs.readFile(path.resolve(testDir, './package.json'), {
+      encoding: 'utf-8',
+    });
+    const packageJson = JSON.parse(packageJsonContent);
+    expect(packageJson).toEqual(
+      expect.objectContaining({
+        dependencies: expect.objectContaining({
+          '@mui/toolpad': expect.any(String),
+        }),
+        scripts: expect.objectContaining({
+          build: 'toolpad build',
+          dev: 'toolpad dev',
+          start: 'toolpad start',
+        }),
       }),
-    }),
-  );
+    );
 
-  // check that file exists or not in the directory
-  const gitignore = await fs.readFile(path.resolve(testDir, './.gitignore'), {
-    encoding: 'utf-8',
-  });
+    // check that file exists or not in the directory
+    const gitignore = await fs.readFile(path.resolve(testDir, './.gitignore'), {
+      encoding: 'utf-8',
+    });
 
-  expect(gitignore.length).toBeGreaterThan(0);
+    expect(gitignore.length).toBeGreaterThan(0);
 
-  toolpadProcess = execa('yarn', ['dev'], {
-    cwd: testDir,
-    env: {
-      FORCE_COLOR: '0',
-      BROWSER: 'none',
-    },
-  });
-  const { stdout: toolpadDevOutput } = toolpadProcess;
+    toolpadProcess = execa('yarn', ['dev'], {
+      cwd: testDir,
+      env: {
+        FORCE_COLOR: '0',
+        BROWSER: 'none',
+      },
+    });
+    const { stdout: toolpadDevOutput } = toolpadProcess;
 
-  expect(toolpadDevOutput).toBeTruthy();
-  const match = await waitForMatch(toolpadDevOutput!, /http:\/\/localhost:(\d+)/);
+    expect(toolpadDevOutput).toBeTruthy();
+    const match = await waitForMatch(toolpadDevOutput!, /http:\/\/localhost:(\d+)/);
 
-  expect(match).toBeTruthy();
+    expect(match).toBeTruthy();
 
-  const appUrl = match![0];
-  const res = await fetch(`${appUrl}/health-check`);
-  expect(res).toHaveProperty('status', 200);
-});
+    const appUrl = match![0];
+    const res = await fetch(`${appUrl}/health-check`);
+    expect(res).toHaveProperty('status', 200);
+  },
+  TEST_TIMEOUT,
+);
 
 afterEach(async () => {
   if (toolpadProcess && typeof toolpadProcess.exitCode !== 'number') {

packages/create-toolpad-app/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    setupFiles: ['<rootDir>/../../test/setupVitest.ts'],
+  },
+});

packages/toolpad-app/package.json

@@ -18,7 +18,7 @@
     "dev:typings": "yarn build:typings",
     "waitForApp": "tsx ./scripts/waitForApp.mts",
     "check-types": "tsup && tsc --noEmit",
-    "test": "jest"
+    "test": "vitest run"
   },
   "files": [
     "public",
@@ -133,8 +133,6 @@
     "zod-validation-error": "1.5.0"
   },
   "devDependencies": {
-    "@swc/core": "1.3.85",
-    "@swc/jest": "0.2.29",
     "@types/babel__code-frame": "7.0.4",
     "@types/crypto-js": "4.1.2",
     "@types/express": "4.17.17",

packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx

@@ -1,18 +1,27 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 
 import * as React from 'react';
-import { render, waitFor as waitForOrig, screen, fireEvent, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
+import {
+  render,
+  waitFor as waitForOrig,
+  screen,
+  fireEvent,
+  act,
+  cleanup,
+} from '@testing-library/react';
+import 'vitest-dom/extend-expect';
 import { LiveBindings, RuntimeEvents } from '@mui/toolpad-core';
 import { CanvasEventsContext } from '@mui/toolpad-core/runtime';
 import { Emitter } from '@mui/toolpad-utils/events';
-import { jest } from '@jest/globals';
+import { test, expect, afterEach } from 'vitest';
 import ToolpadApp from './ToolpadApp';
 import * as appDom from '../appDom';
 import createRuntimeState from './createRuntimeState';
 
+afterEach(cleanup);
+
 const COMPONENTS = {};
 
 // More sensible default for these tests
@@ -135,7 +144,6 @@ test(`default Value for binding`, async () => {
 
 test(`Databinding errors`, async () => {
   const canvasEvents = new Emitter<RuntimeEvents>();
-  const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation(() => {});
   let bindings: LiveBindings | undefined;
 
   const bindingsUpdateHandler = (event: RuntimeEvents['pageBindingsUpdated']) => {
@@ -206,10 +214,7 @@ test(`Databinding errors`, async () => {
         message: 'Cycle detected "cyclic1.value"',
       }),
     );
-
-    expect(consoleErrorMock).toHaveBeenCalled();
   } finally {
     canvasEvents.off('pageBindingsUpdated', bindingsUpdateHandler);
-    consoleErrorMock.mockRestore();
   }
 });

packages/toolpad-app/src/server/evalExpression.spec.ts

@@ -1,4 +1,5 @@
 import { createServerJsRuntime } from '@mui/toolpad-core/jsServerRuntime';
+import { describe, test, expect } from 'vitest';
 
 async function evalExpression(expression: string, globalScope: Record<string, unknown> = {}) {
   const jsServerRuntime = await createServerJsRuntime();

packages/toolpad-app/src/server/functionsDevWorker.ts

@@ -3,7 +3,7 @@ import * as path from 'path';
 import { createRequire } from 'node:module';
 import * as fs from 'fs/promises';
 import * as vm from 'vm';
-import * as url from 'url';
+import * as url from 'node:url';
 import { getCircularReplacer, replaceRecursive } from '@mui/toolpad-utils/json';
 import { ServerContext, getServerContext, withContext } from '@mui/toolpad-core/serverRuntime';
 import { isWebContainer } from '@webcontainer/env';

packages/toolpad-app/src/server/har.spec.ts

@@ -1,5 +1,6 @@
 import fetch from 'node-fetch';
 import { listen } from '@mui/toolpad-utils/http';
+import { describe, test, expect } from 'vitest';
 import { createHarLog, withHarInstrumentation } from './har';
 import { streamToString } from '../utils/streams';
 

packages/toolpad-app/src/server/projectRoot.ts

@@ -7,5 +7,7 @@ import * as path from 'path';
  * - We run jest from the monorepo root and it doesn't mock cwd for the projects. So
  *   we'll override it with __dirname
  *   See https://github.com/facebook/jest/issues/6155
+ *
+ * TODO: revisit whether still necessary with vitest
  */
 export default process.env.NODE_ENV === 'test' ? path.resolve(__dirname, '../..') : process.cwd();

packages/toolpad-app/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    setupFiles: ['<rootDir>/../../test/setupVitest.ts'],
+  },
+});

packages/toolpad-components/src/DatePicker.tsx

@@ -12,17 +12,12 @@ import {
 } from './Form';
 import { SX_PROP_HELPER_TEXT } from './constants';
 
-const LOCALE_LOADERS = new Map(
-  // jest is choking on this dynamic import
-  process.env.NODE_ENV === 'test'
-    ? []
-    : [
-        ['en', () => import('dayjs/locale/en')],
-        ['nl', () => import('dayjs/locale/nl')],
-        ['fr', () => import('dayjs/locale/fr')],
-        // TODO...
-      ],
-);
+const LOCALE_LOADERS = new Map([
+  ['en', () => import('dayjs/locale/en')],
+  ['nl', () => import('dayjs/locale/nl')],
+  ['fr', () => import('dayjs/locale/fr')],
+  // TODO...
+]);
 
 interface LoadableLocale {
   locale: string;

packages/toolpad-utils/package.json

@@ -40,7 +40,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "check-types": "tsup && tsc --noEmit",
-    "test": "jest"
+    "test": "vitest run"
   },
   "bugs": {
     "url": "https://github.com/mui/mui-toolpad/issues"

packages/toolpad-utils/src/collections.spec.ts

@@ -1,4 +1,4 @@
-import { describe, test, expect } from '@jest/globals';
+import { describe, test, expect } from 'vitest';
 import { asArray, equalProperties } from './collections';
 
 describe('asArray', () => {

packages/toolpad-utils/src/errors.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@jest/globals';
+import { test, expect } from 'vitest';
 import { errorFrom } from './errors';
 
 test('leaves errors untouched', () => {