Switch from jest to vitest (#21444)

Even if we are not bundling with `vite` yet, we can use `vitest` in
place of Jest which brings a few benefits like not requiring to use
`NODE_OPTIONS` to run and having sane module resolution.

It's possible to also use `jest-extended` with vitest, but I opted to
not do so for now because it brings heavyweight dependencies and it was
trivial to just rewrite the affected matchers to be compatible.

This PR also removes 153 JS dependencies, which is certainly nice.

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

Makefile

@@ -372,7 +372,7 @@ test-backend:
 
 .PHONY: test-frontend
 test-frontend: node_modules
-	@NODE_OPTIONS="--experimental-vm-modules --no-warnings" npx jest --color
+	npx vitest
 
 .PHONY: test-check
 test-check:

jest.config.js

@@ -1,15 +0,0 @@
-// to run tests with ES6 module, node must run with "--experimental-vm-modules", or see Makefile's "test-frontend" for reference
-export default {
-  rootDir: 'web_src',
-  setupFilesAfterEnv: ['jest-extended/all'],
-  testEnvironment: 'jest-environment-jsdom',
-  testMatch: ['<rootDir>/**/*.test.js'],
-  testTimeout: 20000,
-  transform: {
-    '\\.svg$': '<rootDir>/js/testUtils/jestRawLoader.js',
-  },
-  setupFiles: [
-    './js/testUtils/jestSetup.js', // prepare global variables used by our code (eg: window.config)
-  ],
-  verbose: false,
-};

package.json

@@ -48,6 +48,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.27.0",
+    "@rollup/pluginutils": "5.0.1",
     "@stoplight/spectral-cli": "6.5.1",
     "eslint": "8.25.0",
     "eslint-plugin-import": "2.26.0",
@@ -55,15 +56,14 @@
     "eslint-plugin-sonarjs": "0.15.0",
     "eslint-plugin-unicorn": "44.0.2",
     "eslint-plugin-vue": "9.6.0",
-    "jest": "29.1.2",
+    "jsdom": "20.0.1",
-    "jest-environment-jsdom": "29.1.2",
-    "jest-extended": "3.1.0",
     "markdownlint-cli": "0.32.2",
     "postcss-less": "6.0.0",
     "stylelint": "14.13.0",
     "stylelint-config-standard": "28.0.0",
     "svgo": "2.8.0",
-    "updates": "13.1.8"
+    "updates": "13.1.8",
+    "vitest": "0.24.1"
   },
   "browserslist": [
     "defaults",

vitest.config.js

@@ -0,0 +1,33 @@
+import {defineConfig} from 'vitest/dist/config.js';
+import {readFile} from 'fs/promises';
+import {dataToEsm} from '@rollup/pluginutils';
+import {extname} from 'path';
+
+function stringPlugin() {
+  return {
+    name: 'string-plugin',
+    enforce: 'pre',
+    async load(id) {
+      const path = id.split('?')[0];
+      if (extname(path) !== '.svg') return null;
+      return dataToEsm(await readFile(path, 'utf8'));
+    }
+  };
+}
+
+export default defineConfig({
+  test: {
+    include: ['web_src/**/*.test.js'],
+    setupFiles: ['./web_src/js/test/setup.js'],
+    environment: 'jsdom',
+    testTimeout: 20000,
+    open: false,
+    allowOnly: true,
+    passWithNoTests: true,
+    globals: true,
+    watch: false,
+  },
+  plugins: [
+    stringPlugin(),
+  ],
+});

web_src/js/svg.test.js

@@ -1,7 +1,7 @@
 import {svg} from './svg.js';
 
 test('svg', () => {
-  expect(svg('octicon-repo')).toStartWith('<svg');
+  expect(svg('octicon-repo')).toMatch(/^<svg/);
-  expect(svg('octicon-repo', 16)).toInclude('width="16"');
+  expect(svg('octicon-repo', 16)).toContain('width="16"');
-  expect(svg('octicon-repo', 32)).toInclude('width="32"');
+  expect(svg('octicon-repo', 32)).toContain('width="32"');
 });

web_src/js/test/setup.js

@@ -1,5 +1,5 @@
 window.config = {
-  csrfToken: 'jest-test-csrf-token-123456',
+  csrfToken: 'test-csrf-token-123456',
   pageData: {},
   i18n: {},
 };

web_src/js/testUtils/jestRawLoader.js

@@ -1,5 +0,0 @@
-export default { // eslint-disable-line import/no-unused-modules
-  process: (content) => {
-    return {code: `module.exports = ${JSON.stringify(content)}`};
-  },
-};

web_src/js/utils.test.js

@@ -56,8 +56,8 @@ test('joinPaths', () => {
 });
 
 test('isObject', () => {
-  expect(isObject({})).toBeTrue();
+  expect(isObject({})).toBeTruthy();
-  expect(isObject([])).toBeFalse();
+  expect(isObject([])).toBeFalsy();
 });
 
 test('uniq', () => {