Migrate from Jest to Vitest (#34454)

.github/workflows/test-js.yml

@@ -40,4 +40,4 @@ jobs:
         uses: ./.github/actions/setup-javascript
 
       - name: JavaScript testing
-        run: yarn jest --reporters github-actions summary
+        run: yarn test:js

CONTRIBUTING.md

@@ -66,7 +66,7 @@ Example:
 Pull requests that do not pass automated checks on CI may not be reviewed. In
 particular, please keep in mind:
 
-- Unit and integration tests (rspec, jest)
+- Unit and integration tests (rspec, vitest)
 - Code style rules (rubocop, eslint)
 - Normalization of locale files (i18n-tasks)
 - Relevant accessibility or performance concerns

app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<AutosuggestEmoji /> renders emoji with custom url 1`] = `
+exports[`<AutosuggestEmoji /> > renders emoji with custom url 1`] = `
 <div
   className="autosuggest-emoji"
 >
@@ -17,7 +17,7 @@ exports[`<AutosuggestEmoji /> renders emoji with custom url 1`] = `
 </div>
 `;
 
-exports[`<AutosuggestEmoji /> renders native emoji 1`] = `
+exports[`<AutosuggestEmoji /> > renders native emoji 1`] = `
 <div
   className="autosuggest-emoji"
 >

app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
+exports[`<Avatar /> > Autoplay > renders a animated avatar 1`] = `
 <div
   className="account__avatar account__avatar--loading"
   onMouseEnter={[Function]}
@@ -21,7 +21,7 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
 </div>
 `;
 
-exports[`<Avatar /> Still renders a still avatar 1`] = `
+exports[`<Avatar /> > Still > renders a still avatar 1`] = `
 <div
   className="account__avatar account__avatar--loading"
   onMouseEnter={[Function]}

app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<AvatarOverlay renders a overlay avatar 1`] = `
+exports[`<AvatarOverlay > renders a overlay avatar 1`] = `
 <div
   className="account__avatar-overlay"
   onMouseEnter={[Function]}

app/javascript/mastodon/components/__tests__/__snapshots__/button-test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Button /> adds class "button-secondary" if props.secondary given 1`] = `
+exports[`<Button /> > adds class "button-secondary" if props.secondary given 1`] = `
 <button
   className="button button-secondary"
   onClick={[Function]}
@@ -8,7 +8,7 @@ exports[`<Button /> adds class "button-secondary" if props.secondary given 1`] =
 />
 `;
 
-exports[`<Button /> renders a button element 1`] = `
+exports[`<Button /> > renders a button element 1`] = `
 <button
   className="button"
   onClick={[Function]}
@@ -16,7 +16,7 @@ exports[`<Button /> renders a button element 1`] = `
 />
 `;
 
-exports[`<Button /> renders a disabled attribute if props.disabled given 1`] = `
+exports[`<Button /> > renders a disabled attribute if props.disabled given 1`] = `
 <button
   className="button"
   disabled={true}
@@ -25,7 +25,7 @@ exports[`<Button /> renders a disabled attribute if props.disabled given 1`] = `
 />
 `;
 
-exports[`<Button /> renders class="button--block" if props.block given 1`] = `
+exports[`<Button /> > renders class="button--block" if props.block given 1`] = `
 <button
   className="button button--block"
   onClick={[Function]}
@@ -33,7 +33,7 @@ exports[`<Button /> renders class="button--block" if props.block given 1`] = `
 />
 `;
 
-exports[`<Button /> renders the children 1`] = `
+exports[`<Button /> > renders the children 1`] = `
 <button
   className="button"
   onClick={[Function]}
@@ -45,7 +45,7 @@ exports[`<Button /> renders the children 1`] = `
 </button>
 `;
 
-exports[`<Button /> renders the given text 1`] = `
+exports[`<Button /> > renders the given text 1`] = `
 <button
   className="button"
   onClick={[Function]}
@@ -55,7 +55,7 @@ exports[`<Button /> renders the given text 1`] = `
 </button>
 `;
 
-exports[`<Button /> renders the props.text instead of children 1`] = `
+exports[`<Button /> > renders the props.text instead of children 1`] = `
 <button
   className="button"
   onClick={[Function]}

app/javascript/mastodon/components/__tests__/__snapshots__/display_name-test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<DisplayName /> renders display name + account name 1`] = `
+exports[`<DisplayName /> > renders display name + account name 1`] = `
 <span
   className="display-name"
   onMouseEnter={[Function]}

app/javascript/mastodon/components/__tests__/button-test.jsx

@@ -21,7 +21,7 @@ describe('<Button />', () => {
   });
 
   it('handles click events using the given handler', () => {
-    const handler = jest.fn();
+    const handler = vi.fn();
     render(<Button onClick={handler}>button</Button>);
     fireEvent.click(screen.getByText('button'));
 
@@ -29,7 +29,7 @@ describe('<Button />', () => {
   });
 
   it('does not handle click events if props.disabled given', () => {
-    const handler = jest.fn();
+    const handler = vi.fn();
     render(<Button onClick={handler} disabled>button</Button>);
     fireEvent.click(screen.getByText('button'));
 

app/javascript/mastodon/features/ui/components/__tests__/column-test.jsx

@@ -7,7 +7,7 @@ const fakeIcon = () => <span />;
 describe('<Column />', () => {
   describe('<ColumnHeader /> click handler', () => {
     it('runs the scroll animation if the column contains scrollable content', () => {
-      const scrollToMock = jest.fn();
+      const scrollToMock = vi.fn();
       const { container } = render(
         <Column heading='notifications' icon='notifications' iconComponent={fakeIcon}>
           <div className='scrollable' />

app/javascript/mastodon/test_helpers.tsx

@@ -3,16 +3,16 @@ import { IntlProvider } from 'react-intl';
 import { MemoryRouter } from 'react-router';
 
 import type { RenderOptions } from '@testing-library/react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { render as rtlRender } from '@testing-library/react';
 
 import { IdentityContext } from './identity_context';
 
-beforeEach(() => {
+beforeAll(() => {
-  global.requestIdleCallback = jest
+  global.requestIdleCallback = vi.fn((cb: IdleRequestCallback) => {
-    .fn()
+    // @ts-expect-error IdleRequestCallback expects an argument of type IdleDeadline,
-    .mockImplementation((fn: () => void) => {
+    // but that doesn't exist in this environment.
-      fn();
+    cb();
+    return 0;
   });
 });
 
@@ -46,7 +46,6 @@ function render(
 }
 
 // re-export everything
-// eslint-disable-next-line import/no-extraneous-dependencies
 export * from '@testing-library/react';
 
 // override render method

app/javascript/mastodon/test_setup.js

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

config/vite.json

@@ -0,0 +1,17 @@
+{
+  "all": {
+    "sourceCodeDir": "app/javascript",
+    "additionalEntrypoints": ["~/{icons,images}/**/*", "~/styles/*.scss"],
+    "watchAdditionalPaths": []
+  },
+  "development": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-dev",
+    "port": 3036
+  },
+  "test": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-test",
+    "port": 3037
+  }
+}

eslint.config.mjs

@@ -247,6 +247,7 @@ export default tseslint.config([
             'config/webpack/**',
             'app/javascript/mastodon/performance.js',
             'app/javascript/mastodon/test_setup.js',
+            'app/javascript/mastodon/test_helpers.tsx',
             'app/javascript/**/__tests__/**',
           ],
         },
@@ -387,9 +388,7 @@ export default tseslint.config([
     files: ['**/__tests__/*.js', '**/__tests__/*.jsx'],
 
     languageOptions: {
-      globals: {
+      globals: globals.vitest,
-        ...globals.jest,
-      },
     },
   },
 ]);

jest.config.js

@@ -1,28 +0,0 @@
-/** @type {import('jest').Config} */
-const config = {
-  testEnvironment: 'jsdom',
-  testPathIgnorePatterns: [
-    '<rootDir>/node_modules/',
-    '<rootDir>/vendor/',
-    '<rootDir>/config/',
-    '<rootDir>/log/',
-    '<rootDir>/public/',
-    '<rootDir>/tmp/',
-  ],
-  setupFilesAfterEnv: ['<rootDir>/app/javascript/mastodon/test_setup.js'],
-  collectCoverageFrom: [
-    'app/javascript/mastodon/**/*.{js,jsx,ts,tsx}',
-    '!app/javascript/mastodon/features/emoji/emoji_compressed.js',
-    '!app/javascript/mastodon/service_worker/entry.js',
-    '!app/javascript/mastodon/test_setup.js',
-  ],
-  // Those packages are ESM, so we need them to be processed by Babel
-  transformIgnorePatterns: ['/node_modules/(?!(redent|strip-indent)/)'],
-  coverageDirectory: '<rootDir>/coverage',
-  moduleDirectories: ['node_modules', '<rootDir>/app/javascript'],
-  moduleNameMapper: {
-    '\\.svg\\?react$': '<rootDir>/app/javascript/__mocks__/svg.js',
-  },
-};
-
-module.exports = config;

package.json

@@ -18,14 +18,14 @@
     "format": "prettier --write --log-level warn .",
     "format:check": "prettier --check --ignore-unknown .",
     "i18n:extract": "formatjs extract 'app/javascript/**/*.{js,jsx,ts,tsx}' --ignore '**/*.d.ts' --out-file app/javascript/mastodon/locales/en.json --format config/formatjs-formatter.js",
-    "jest": "cross-env NODE_ENV=test jest",
     "lint:js": "cd $INIT_CWD && eslint --cache --report-unused-disable-directives",
     "lint:css": "stylelint \"**/*.{css,scss}\"",
     "lint": "yarn lint:js && yarn lint:css",
     "postversion": "git push --tags",
     "postinstall": "test -d node_modules/husky && husky || echo \"husky is not installed\"",
     "start": "node ./streaming/index.js",
-    "test": "yarn lint && yarn run typecheck && yarn jest",
+    "test": "yarn lint && yarn run typecheck && yarn test:js run",
+    "test:js": "vitest",
     "typecheck": "tsc --noEmit"
   },
   "repository": {
@@ -127,6 +127,7 @@
     "tiny-queue": "^0.2.1",
     "twitter-text": "3.1.0",
     "use-debounce": "^10.0.0",
+    "vite": "^6.2.6",
     "webpack": "^4.47.0",
     "webpack-assets-manifest": "^4.0.6",
     "webpack-bundle-analyzer": "^4.8.0",
@@ -144,7 +145,6 @@
     "@eslint/js": "^9.23.0",
     "@formatjs/cli": "^6.1.1",
     "@testing-library/dom": "^10.2.0",
-    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@types/babel__core": "^7.20.1",
     "@types/emoji-mart": "3.0.14",
@@ -152,7 +152,6 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/http-link-header": "^1.0.3",
     "@types/intl": "^1.2.0",
-    "@types/jest": "^29.5.2",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.195",
     "@types/object-assign": "^4.0.30",
@@ -173,7 +172,7 @@
     "@types/requestidlecallback": "^0.3.5",
     "@types/webpack": "^4.41.33",
     "@types/webpack-env": "^1.18.4",
-    "babel-jest": "^29.5.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^9.23.0",
     "eslint-import-resolver-typescript": "^4.2.5",
     "eslint-plugin-formatjs": "^5.3.1",
@@ -185,8 +184,6 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.0.0",
     "husky": "^9.0.11",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
     "lint-staged": "^15.0.0",
     "prettier": "^3.3.3",
     "react-test-renderer": "^18.2.0",
@@ -195,6 +192,9 @@
     "stylelint-config-standard-scss": "^14.0.0",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.28.0",
+    "vite-plugin-rails": "^0.5.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^3.1.1",
     "webpack-dev-server": "^3.11.3"
   },
   "resolutions": {

tsconfig.json

@@ -11,16 +11,20 @@
     "noUncheckedIndexedAccess": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
+    "types": ["vitest/globals", "@types/webpack-env"],
     "baseUrl": "./",
     "incremental": true,
     "tsBuildInfoFile": "tmp/cache/tsconfig.tsbuildinfo",
     "paths": {
+      "@/*": ["app/javascript/*"],
       "mastodon": ["app/javascript/mastodon"],
       "mastodon/*": ["app/javascript/mastodon/*"],
-      "@/*": ["app/javascript/*"]
+      "images/*": ["app/javascript/images/*"],
+      "styles/*": ["app/javascript/styles/*"]
     }
   },
   "include": [
+    "vite.config.mts",
     "app/javascript/mastodon",
     "app/javascript/entrypoints",
     "app/javascript/types"

vite.config.mts

@@ -0,0 +1,58 @@
+/// <reference types="vitest" />
+
+import fs from 'fs';
+import path from 'path';
+
+import react from '@vitejs/plugin-react';
+import RailsPlugin from 'vite-plugin-rails';
+import svgr from 'vite-plugin-svgr';
+import { defineConfig, configDefaults } from 'vitest/config';
+
+const sourceCodeDir = 'app/javascript';
+const items = fs.readdirSync(sourceCodeDir);
+const directories = items.filter((item) =>
+  fs.lstatSync(path.join(sourceCodeDir, item)).isDirectory(),
+);
+const aliasesFromJavascriptRoot: Record<string, string> = {};
+directories.forEach((directory) => {
+  aliasesFromJavascriptRoot[directory] = path.resolve(
+    __dirname,
+    sourceCodeDir,
+    directory,
+  );
+});
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      ...aliasesFromJavascriptRoot,
+    },
+  },
+  plugins: [
+    RailsPlugin(),
+    react({
+      include: ['**/*.jsx', '**/*.tsx'],
+      babel: {
+        plugins: ['formatjs', 'preval', 'transform-react-remove-prop-types'],
+      },
+    }),
+    svgr(),
+  ],
+  test: {
+    environment: 'jsdom',
+    include: [
+      ...configDefaults.include,
+      '**/__tests__/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+    ],
+    exclude: [
+      ...configDefaults.exclude,
+      '**/node_modules/**',
+      'vendor/**',
+      'config/**',
+      'log/**',
+      'public/**',
+      'tmp/**',
+    ],
+    globals: true,
+  },
+});