1 files changed, 48 insertions, 3 deletions

diff --git a/jest.config.base.js b/jest.config.base.js
index 26e7c8e8d18..0897bc66b30 100644
--- a/jest.config.base.js
+++ b/jest.config.base.js
@@ -1,6 +1,15 @@
 const IS_EE = require('./config/helpers/is_ee_env');
 const isESLint = require('./config/helpers/is_eslint');
 const IS_JH = require('./config/helpers/is_jh_env');
+
+const { VUE_VERSION: EXPLICIT_VUE_VERSION } = process.env;
+if (![undefined, '2', '3'].includes(EXPLICIT_VUE_VERSION)) {
+  throw new Error(
+    `Invalid VUE_VERSION value: ${EXPLICIT_VUE_VERSION}. Only '2' and '3' are supported`,
+  );
+}
+const USE_VUE_3 = EXPLICIT_VUE_VERSION === '3';
+
 const { TEST_HOST } = require('./spec/frontend/__helpers__/test_constants');
 
 module.exports = (path, options = {}) => {
@@ -11,6 +20,39 @@ module.exports = (path, options = {}) => {
   } = options;
 
   const reporters = ['default'];
+  const VUE_JEST_TRANSFORMER = USE_VUE_3 ? '@vue/vue3-jest' : '@vue/vue2-jest';
+  const setupFilesAfterEnv = [`<rootDir>/${path}/test_setup.js`, 'jest-canvas-mock'];
+  const vueModuleNameMappers = {};
+  const globals = {};
+
+  if (EXPLICIT_VUE_VERSION) {
+    Object.assign(vueModuleNameMappers, {
+      '^@gitlab/ui/dist/([^.]*)$': [
+        '<rootDir>/node_modules/@gitlab/ui/src/$1.vue',
+        '<rootDir>/node_modules/@gitlab/ui/src/$1.js',
+      ],
+      '^@gitlab/ui$': '<rootDir>/node_modules/@gitlab/ui/src/index.js',
+    });
+  }
+
+  if (USE_VUE_3) {
+    setupFilesAfterEnv.unshift(`<rootDir>/${path}/vue_compat_test_setup.js`);
+    Object.assign(vueModuleNameMappers, {
+      '^vue$': '@vue/compat',
+      '^@vue/test-utils$': '@vue/test-utils-vue3',
+    });
+    Object.assign(globals, {
+      'vue-jest': {
+        experimentalCSSCompile: false,
+        compiler: require.resolve('./config/vue3migration/compiler'),
+        compilerOptions: {
+          compatConfig: {
+            MODE: 2,
+          },
+        },
+      },
+    });
+  }
 
   // To have consistent date time parsing both in local and CI environments we set
   // the timezone of the Node process. https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/27738
@@ -69,6 +111,7 @@ module.exports = (path, options = {}) => {
     '^jquery$': '<rootDir>/node_modules/jquery/dist/jquery.slim.js',
     '^@sentry/browser$': '<rootDir>/app/assets/javascripts/sentry/sentry_browser_wrapper.js',
     ...extModuleNameMapper,
+    ...vueModuleNameMappers,
   };
 
   const collectCoverageFrom = ['<rootDir>/app/assets/javascripts/**/*.{js,vue}'];
@@ -143,6 +186,7 @@ module.exports = (path, options = {}) => {
   ];
 
   const transformIgnoreNodeModules = [
+    'vue-test-utils-compat',
     '@gitlab/ui',
     '@gitlab/favicon-overlay',
     'bootstrap-vue',
@@ -163,6 +207,7 @@ module.exports = (path, options = {}) => {
   ];
 
   return {
+    globals,
     clearMocks: true,
     testMatch,
     moduleFileExtensions: ['js', 'json', 'vue', 'gql', 'graphql', 'yaml', 'yml'],
@@ -176,17 +221,17 @@ module.exports = (path, options = {}) => {
     modulePathIgnorePatterns: ['<rootDir>/.yarn-cache/'],
     reporters,
     resolver: './jest_resolver.js',
-    setupFilesAfterEnv: [`<rootDir>/${path}/test_setup.js`, 'jest-canvas-mock'],
+    setupFilesAfterEnv,
     restoreMocks: true,
     slowTestThreshold: process.env.CI ? 6000 : 500,
     transform: {
       '^.+\\.(gql|graphql)$': './spec/frontend/__helpers__/graphql_transformer.js',
       '^.+_worker\\.js$': './spec/frontend/__helpers__/web_worker_transformer.js',
       '^.+\\.js$': 'babel-jest',
-      '^.+\\.vue$': '@vue/vue2-jest',
+      '^.+\\.vue$': VUE_JEST_TRANSFORMER,
       'spec/frontend/editor/schema/ci/yaml_tests/.+\\.(yml|yaml)$':
         './spec/frontend/__helpers__/yaml_transformer.js',
-      '^.+\\.(md|zip|png|yml|yaml)$': './spec/frontend/__helpers__/raw_transformer.js',
+      '^.+\\.(md|zip|png|yml|yaml|sh|ps1)$': './spec/frontend/__helpers__/raw_transformer.js',
     },
     transformIgnorePatterns: [`node_modules/(?!(${transformIgnoreNodeModules.join('|')}))`],
     fakeTimers: {