Merge branch 'vitest' into 'develop'

Switch to Vitest

See merge request soapbox-pub/soapbox!2683

app/soapbox/api/__mocks__/index.ts

@@ -1,10 +1,10 @@
-import { jest } from '@jest/globals';
 import MockAdapter from 'axios-mock-adapter';
 import LinkHeader from 'http-link-header';
+import { vi } from 'vitest';
 
 import type { AxiosInstance, AxiosResponse } from 'axios';
 
-const api = jest.requireActual('../index') as Record<string, Function>;
+const api = await vi.importActual('../index') as Record<string, Function>;
 let mocks: Array<Function> = [];
 
 export const __stub = (func: (mock: MockAdapter) => void) => mocks.push(func);

app/soapbox/features/emoji/search.ts

@@ -1,11 +1,12 @@
-import Index from 'flexsearch/dist/module';
+import Index from '@akryum/flexsearch-es';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
 import data from './data';
 
 import type { Emoji } from './index';
 
-const index = new Index({
+// @ts-ignore Wrong default export.
+const index: Index.Index = new Index({
   tokenize: 'full',
   optimize: true,
   context: true,

app/soapbox/features/ui/components/__tests__/compose-button.test.tsx

@@ -2,7 +2,6 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
-import '@testing-library/jest-dom';
 import { MemoryRouter } from 'react-router-dom';
 
 import { MODAL_CLOSE, MODAL_OPEN } from 'soapbox/actions/modals';

app/soapbox/jest/test-helpers.tsx

@@ -10,7 +10,6 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { Action, applyMiddleware, createStore } from 'redux';
 import thunk from 'redux-thunk';
-import '@testing-library/jest-dom';
 
 import { ChatProvider } from 'soapbox/contexts/chat-context';
 import { StatProvider } from 'soapbox/contexts/stat-context';

app/soapbox/jest/test-setup.ts

@@ -7,7 +7,9 @@ import { __clear as clearApiMocks } from '../api/__mocks__';
 
 // API mocking
 jest.mock('soapbox/api');
-afterEach(() => clearApiMocks());
+afterEach(() => {
+  clearApiMocks();
+});
 
 // Query mocking
 jest.mock('soapbox/queries/client');

jest.config.cjs

@@ -1,50 +0,0 @@
-const ASSET_EXTS = 'css|styl|less|sass|scss|png|jpg|svg|ogg|oga|mp3|ttf|woff|woff2';
-
-module.exports = {
-  'testPathIgnorePatterns': [
-    '<rootDir>/node_modules/',
-    '<rootDir>/vendor/',
-    '<rootDir>/config/',
-    '<rootDir>/log/',
-    '<rootDir>/static/',
-    '<rootDir>/tmp/',
-    '<rootDir>/webpack/',
-    '<rootDir>/app/soapbox/actions/',
-  ],
-  'setupFiles': [
-    'raf/polyfill',
-  ],
-  'setupFilesAfterEnv': [
-    '<rootDir>/app/soapbox/jest/test-setup.ts',
-  ],
-  'collectCoverageFrom': [
-    'app/soapbox/**/*.js',
-    'app/soapbox/**/*.cjs',
-    'app/soapbox/**/*.mjs',
-    'app/soapbox/**/*.ts',
-    'app/soapbox/**/*.tsx',
-    '!app/soapbox/service-worker/entry.ts',
-    '!app/soapbox/jest/test-setup.ts',
-    '!app/soapbox/jest/test-helpers.ts',
-  ],
-  'coverageDirectory': '<rootDir>/.coverage/',
-  'coverageReporters': ['html', 'text', 'text-summary', 'cobertura'],
-  'reporters': ['default', 'jest-junit'],
-  'moduleDirectories': [
-    '<rootDir>/node_modules',
-    '<rootDir>/app',
-  ],
-  'testMatch': ['**/*/__tests__/**/?(*.|*-)+(test).(ts|js)?(x)'],
-  'testEnvironment': 'jsdom',
-  'transformIgnorePatterns': [
-    // FIXME: react-sticky-box doesn't provide a CJS build, so transform it for now
-    // https://github.com/codecks-io/react-sticky-box/issues/79
-    `/node_modules/(?!(react-sticky-box|blurhash|emoji-mart|.+\\.(${ASSET_EXTS})$))`,
-    // Ignore node_modules, except static assets
-    // `/node_modules/(?!.+\\.(${ASSET_EXTS})$)`,
-  ],
-  'transform': {
-    '\\.[jt]sx?$': 'babel-jest',
-    [`\\.(${ASSET_EXTS})$`]: '<rootDir>/jest/assetTransformer.cjs',
-  },
-};

jest/assetTransformer.cjs

@@ -1,12 +0,0 @@
-const path = require('path');
-
-// Custom Jest asset transformer
-// https://jestjs.io/docs/code-transformation#writing-custom-transformers
-// Tries to do basically what Webpack does
-module.exports = {
-  process(src, filename, config, options) {
-    return {
-      code: `module.exports = "https://soapbox.test/assets/${path.basename(filename)}";`,
-    };
-  },
-};

package.json

@@ -24,7 +24,7 @@
     "audit:fix": "npx yarn-audit-fix",
     "manage:translations": "npx ts-node ./scripts/translationRunner.ts",
     "i18n": "rm -rf build tmp && npx cross-env NODE_ENV=production ${npm_execpath} run build && ${npm_execpath} manage:translations en",
-    "test": "npx cross-env NODE_ENV=test npx jest",
+    "test": "npx vitest",
     "test:coverage": "${npm_execpath} run test --coverage",
     "test:all": "${npm_execpath} run test:coverage && ${npm_execpath} run lint",
     "lint": "${npm_execpath} run lint:js && ${npm_execpath} run lint:sass",
@@ -39,6 +39,7 @@
     "not dead"
   ],
   "dependencies": {
+    "@akryum/flexsearch-es": "^0.7.32",
     "@babel/plugin-transform-react-inline-elements": "^7.22.5",
     "@babel/plugin-transform-runtime": "^7.22.15",
     "@babel/preset-env": "^7.22.15",
@@ -49,7 +50,6 @@
     "@fontsource/inter": "^4.5.1",
     "@fontsource/roboto-mono": "^4.5.8",
     "@gamestdio/websocket": "^0.3.2",
-    "@jest/globals": "^29.0.0",
     "@metamask/providers": "^10.0.0",
     "@popperjs/core": "^2.11.5",
     "@reach/combobox": "^0.18.0",
@@ -68,7 +68,6 @@
     "@testing-library/react": "^14.0.0",
     "@types/escape-html": "^1.0.1",
     "@types/http-link-header": "^1.0.3",
-    "@types/jest": "^29.0.0",
     "@types/leaflet": "^1.8.0",
     "@types/lodash": "^4.14.180",
     "@types/object-assign": "^4.0.30",
@@ -106,7 +105,6 @@
     "emoji-mart": "^5.5.2",
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",
-    "flexsearch": "^0.7.31",
     "graphemesplit": "^2.4.4",
     "http-link-header": "^1.0.2",
     "immer": "^9.0.19",
@@ -181,11 +179,11 @@
     "@gitbeaker/node": "^35.8.0",
     "@jedmao/redux-mock-store": "^3.0.5",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
+    "babel-plugin-transform-require-context": "^0.1.1",
     "cross-env": "^7.0.3",
     "danger": "^11.0.7",
     "eslint": "^8.0.0",
@@ -199,18 +197,15 @@
     "eslint-plugin-tailwindcss": "^3.10.1",
     "fake-indexeddb": "^4.0.0",
     "husky": "^8.0.0",
-    "jest": "^29.0.0",
+    "jsdom": "^22.1.0",
-    "jest-environment-jsdom": "^29.0.0",
-    "jest-junit": "^15.0.0",
     "lint-staged": ">=10",
-    "raf": "^3.4.1",
     "react-intl-translations-manager": "^5.0.3",
     "react-refresh": "^0.14.0",
     "stylelint": "^14.0.0",
     "stylelint-config-standard-scss": "^6.1.0",
     "tailwindcss": "^3.3.3",
-    "ts-jest": "^29.0.0",
     "vite-plugin-pwa": "^0.16.5",
+    "vitest": "^0.34.4",
     "yargs": "^17.6.2"
   },
   "resolutions": {

vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import path from 'path';
 
 import react from '@vitejs/plugin-react';
@@ -73,4 +74,11 @@ export default defineConfig({
     ],
   },
   assetsInclude: ['**/*.oga'],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    cache: {
+      dir: '../node_modules/.vitest',
+    },
+  },
 });