Configure / modify Jest tests to work with Vue3 (remove use of localVue & replace with createApp), install necessary packages. Run tests with npm run concurrently:dev:jest. No significant changes to UI components.

Author: Shanon Lee

.babelrc

@@ -0,0 +1,19 @@
+{
+  "plugins": ["@babel/plugin-syntax-dynamic-import"],
+  "env": {
+    "test": {
+      "plugins": ["dynamic-import-node"],
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "modules": "commonjs",
+            "targets": {
+              "node": "current"
+            }
+          }
+        ]
+      ]
+    }
+  }
+}

babel.config.js

@@ -1,14 +1,18 @@
+/* eslint-env node */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const fs = require('fs-extra');
+let extend = undefined;
 
-module.exports = api => {
-  return {
-    presets: [
-      [
-        '@quasar/babel-preset-app',
-        api.caller(caller => caller && caller.target === 'node')
-          ? { targets: { node: 'current' } }
-          : {}
-      ]
-    ]
-  }
+/**
+ * The .babelrc file has been created to assist Jest for transpiling.
+ * You should keep your application's babel rules in this file.
+ */
+
+if (fs.existsSync('./.babelrc')) {
+  extend = './.babelrc';
 }
 
+module.exports = {
+  presets: ['@quasar/babel-preset-app'],
+  extends: extend,
+};

jest.config.js

@@ -0,0 +1,65 @@
+const esModules = ['quasar', 'quasar/lang', 'lodash-es'].join('|');
+
+module.exports = {
+  testEnvironment: "jsdom",
+  verbose: true,
+  globals: {
+    __DEV__: true,
+    // TODO: Remove if resolved natively
+    // See https://github.com/vuejs/vue-jest/issues/175
+    'vue-jest': {
+      pug: { doctype: 'html' },
+    }
+  },
+  // noStackTrace: true,
+  // bail: true,
+  // cache: false,
+  // verbose: true,
+  // watch: true,
+  collectCoverage: false,
+  coverageDirectory: '<rootDir>/test/jest/coverage',
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.vue',
+    '<rootDir>/src/**/*.js',
+    '<rootDir>/src/**/*.jsx',
+  ],
+  // Needed in JS codebases too because of feature flags
+  coveragePathIgnorePatterns: ['/node_modules/', '.d.ts$'],
+  coverageThreshold: {
+    global: {
+      //  branches: 50,
+      //  functions: 50,
+      //  lines: 50,
+      //  statements: 50
+    },
+  },
+  testMatch: [
+    '<rootDir>/test/jest/__tests__/**/*.(spec|test).js',
+    '<rootDir>/src/**/*.jest.(spec|test).js',
+  ],
+  moduleFileExtensions: ['vue', 'js', 'jsx', 'json'],
+  moduleNameMapper: {
+    '^quasar$': 'quasar/dist/quasar.esm.prod.js',
+    '^~/(.*)$': '<rootDir>/$1',
+    '^src/(.*)$': '<rootDir>/src/$1',
+    '^app/(.*)$': '<rootDir>/$1',
+    '^components/(.*)$': '<rootDir>/src/components/$1',
+    '^layouts/(.*)$': '<rootDir>/src/layouts/$1',
+    '^pages/(.*)$': '<rootDir>/src/pages/$1',
+    '^assets/(.*)$': '<rootDir>/src/assets/$1',
+    '^boot/(.*)$': '<rootDir>/src/boot/$1',
+    '.*css$': '@quasar/quasar-app-extension-testing-unit-jest/stub.css',
+  },
+  transform: {
+    // '.*\\.vue$': 'vue-jest',
+    '.*\\.vue$': '@vue/vue3-jest',
+    '.*\\.js$': 'babel-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+    // use these if NPM is being flaky, care as hosting could interfere with these
+    // '.*\\.vue$': '@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest',
+    // '.*\\.js$': '@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest'
+  },
+  transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
+  snapshotSerializers: ['jest-serializer-vue'],
+};