Replace jest config with vitest config

babel.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  presets: [
-    ['@babel/preset-env', {
-      targets: { esmodules: true }
-    }],
-    ['@babel/preset-react', { runtime: 'automatic' }],
-    '@babel/preset-typescript',
-  ],
-};

config/jest/cssTransform.js

@@ -1,12 +0,0 @@
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return { code: 'module.exports = {};' };
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

config/jest/fileTransform.js

@@ -1,31 +0,0 @@
-
-const path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      return `module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: (props) => ({
-          $$typeof: Symbol.for('react.element'),
-          type: 'svg',
-          ref: null,
-          key: null,
-          props: Object.assign({}, props, {
-            children: ${assetFilename}
-          })
-        }),
-      };`;
-    }
-
-    return {
-      code: `module.exports = ${assetFilename};`
-    };
-  },
-};

config/jest/setupTests.ts

@@ -1,12 +0,0 @@
-import '@testing-library/jest-dom';
-import 'jest-canvas-mock';
-import 'chart.js/auto';
-import ResizeObserver from 'resize-observer-polyfill';
-import { setAutoFreeze } from 'immer';
-
-(global as any).ResizeObserver = ResizeObserver;
-(global as any).scrollTo = () => {};
-(global as any).prompt = () => {};
-(global as any).matchMedia = (media: string) => ({ matches: false, media });
-
-setAutoFreeze(false); // TODO Bypassing a bug on jest

config/test/setupTests.ts

@@ -0,0 +1,22 @@
+import 'vitest-canvas-mock';
+import 'chart.js/auto';
+import matchers from '@testing-library/jest-dom/matchers';
+import { cleanup } from '@testing-library/react';
+import { setAutoFreeze } from 'immer';
+import ResizeObserver from 'resize-observer-polyfill';
+import { afterEach, expect } from 'vitest';
+
+// extends Vitest's expect method with methods from react-testing-library
+expect.extend(matchers);
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup();
+});
+
+(global as any).ResizeObserver = ResizeObserver;
+(global as any).scrollTo = () => {};
+(global as any).prompt = () => {};
+(global as any).matchMedia = (media: string) => ({ matches: false, media });
+
+setAutoFreeze(false); // TODO Bypassing a bug on jest

jest.config.js

@@ -1,39 +0,0 @@
-module.exports = {
-  coverageDirectory: '<rootDir>/coverage',
-  collectCoverageFrom: [
-    'src/**/*.{ts,tsx}',
-    '!src/*.{ts,tsx}',
-    '!src/reducers/index.ts',
-    '!src/**/provideServices.ts',
-    '!src/container/*.ts',
-  ],
-  coverageThreshold: {
-    global: {
-      statements: 90,
-      branches: 85,
-      functions: 90,
-      lines: 90,
-    },
-  },
-  setupFilesAfterEnv: ['<rootDir>/config/jest/setupTests.ts'],
-  testMatch: ['<rootDir>/test/**/*.test.{ts,tsx}'],
-  testEnvironment: 'jsdom',
-  testEnvironmentOptions: {
-    url: 'http://localhost',
-  },
-  transform: {
-    '^.+\\.(ts|tsx|js)$': '<rootDir>/node_modules/babel-jest',
-    '^.+\\.scss$': '<rootDir>/config/jest/cssTransform.js',
-    '^(?!.*\\.(ts|tsx|js|json|scss)$)': '<rootDir>/config/jest/fileTransform.js',
-  },
-  transformIgnorePatterns: [
-    'node_modules\/(?!(\@react-leaflet|react-leaflet|leaflet|react-chartjs-2|react-colorful)\/)',
-    '^.+\\.module\\.scss$',
-  ],
-  moduleNameMapper: {
-    '^.+\\.module\\.scss$': 'identity-obj-proxy',
-    'react-chartjs-2': '<rootDir>/node_modules/react-chartjs-2/dist/index.js',
-    'uuid': '<rootDir>/node_modules/uuid/dist/index.js',
-  },
-  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
-};

package.json

@@ -17,16 +17,13 @@
     "preview": "vite preview --host=0.0.0.0",
     "build": "npm run types && vite build && node scripts/replace-version.mjs",
     "build:dist": "npm run build && node scripts/create-dist-file.mjs",
-    "test": "jest --env=jsdom --colors",
+    "test": "vitest run --run",
-    "test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",
+    "test:coverage": "npm run test -- --coverage",
     "test:ci": "npm run test:coverage -- --coverageReporters=clover --ci",
     "test:pretty": "npm run test:coverage -- --coverageReporters=html",
     "test:verbose": "npm run test -- --verbose"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.3.0",
@@ -78,7 +75,6 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@total-typescript/shoehorn": "^0.1.0",
-    "@types/jest": "^29.2.4",
     "@types/json2csv": "^5.0.3",
     "@types/leaflet": "^1.9.0",
     "@types/qs": "^6.9.7",
@@ -91,20 +87,20 @@
     "@types/react-tag-autocomplete": "^6.3.0",
     "@types/uuid": "^8.3.4",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-c8": "^0.31.1",
     "adm-zip": "^0.5.10",
-    "babel-jest": "^29.5.0",
     "chalk": "^5.2.0",
     "eslint": "^8.30.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.3.1",
+    "jsdom": "^22.0.0",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.3.1",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.57.1",
     "stylelint": "^14.16.0",
     "typescript": "^5.0.2",
     "vite": "^4.3.1",
-    "vite-plugin-pwa": "^0.14.4"
+    "vite-plugin-pwa": "^0.14.4",
+    "vitest": "^0.31.1",
+    "vitest-canvas-mock": "^0.2.2"
   },
   "browserslist": [
     ">0.2%",

tsconfig.json

@@ -4,7 +4,7 @@
     "allowSyntheticDefaultImports": true,
     "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "types": ["vite/client"],
+    "types": ["vite/client", "vitest/globals"],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,

vite.config.ts

@@ -1,6 +1,6 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
+import { defineConfig } from 'vitest/config';
 import { manifest } from './manifest';
 import pack from './package.json';
 
@@ -24,4 +24,30 @@ export default defineConfig({
     port: 3000,
   },
   base: !homepage ? undefined : homepage, // Not using just homepage because empty string should be discarded
+
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './config/test/setupTests.ts',
+    coverage: {
+      provider: 'c8', // TODO Try istanbul
+      reporter: ['text', 'text-summary', 'html', 'clover'],
+      include: [
+        'src/**/*.{ts,tsx}',
+        '!src/*.{ts,tsx}',
+        '!src/reducers/index.ts',
+        '!src/**/provideServices.ts',
+        '!src/container/*.ts',
+      ],
+
+      // Required code coverage. Lower than this will make the check fail
+      statements: 90,
+      branches: 80,
+      functions: 85,
+      lines: 90,
+    },
+    deps: {
+      inline: ['vitest-canvas-mock'],
+    },
+  },
 });