Using a plugin for vite to work with istanbul

babel.config.json

@@ -9,9 +9,5 @@
       }
     ]
   ],
-  "env": {
-    "test": {
-      "plugins": ["istanbul"]
-    }
-  }
+  "plugins": ["istanbul"]
 }

cypress.config.js

@@ -1,4 +1,7 @@
 const { defineConfig } = require("cypress");
+const { prepareAudit, lighthouse } = require("@cypress-audit/lighthouse");
+const { pa11y } = require("@cypress-audit/pa11y");
+const globby = require("globby");
 
 module.exports = defineConfig({
   projectId: "c4pb2f",
@@ -15,7 +18,38 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require("./tests/e2e/plugins/index.js")(on, config);
+      require("@cypress/code-coverage/task")(on, config);
+      // include any other plugin code...
+      on("before:browser:launch", (browser = {}, launchOptions) => {
+        prepareAudit(launchOptions);
+      });
+      on("task", {
+        lighthouse: lighthouse(),
+        pa11y: pa11y(),
+        // a task to find one file matching the given mask
+        // returns just the first matching file
+        async findFiles(mask) {
+          if (!mask) {
+            throw new Error("Missing a file mask to search");
+          }
+
+          console.log("searching for files %s", mask);
+          const list = await globby(mask);
+
+          if (!list.length) {
+            console.log("found no files");
+
+            return null;
+          }
+
+          console.log("found %d files, first one %s", list.length, list[0]);
+
+          return list[0];
+        }
+      });
+      // It's IMPORTANT to return the config object
+      // with any changed environment variables
+      return config;
     },
     testIsolation: false,
     baseUrl: "http://localhost:5173",

package.json

@@ -2,17 +2,13 @@
   "name": "@processmaker/screen-builder",
   "version": "2.83.0",
   "scripts": {
-    "dev": "vite",
-    "serve": "vue-cli-service serve",
+    "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "build-bundle": "npm run build",
-    "lint-fix": "vue-cli-service lint",
-    "open-cypress": "NODE_ENV=test TZ=UTC nyc cypress open",
-    "run-cypress": "NODE_ENV=test TZ=UTC nyc cypress run",
-    "test": "vue-cli-service test:unit"
+    "open-cypress": "nyc cypress open",
+    "run-cypress": "TZ=UTC nyc cypress run"
   },
   "main": "./dist/vue-form-builder.umd.js",
   "module": "./dist/vue-form-builder.es.js",
@@ -88,6 +84,7 @@
     "v-calendar": "^0.9.7",
     "validatorjs": "^3.14.2",
     "vite": "^4.0.4",
+    "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vue": "^2.6.12",
     "vue-deepset": "^0.6.3",

vite.config.js

@@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue2";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 import { resolve } from "path";
 import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
+import istanbulPlugin from "vite-plugin-istanbul";
 
 const libraryName = "VueFormBuilder";
 const monacoLanguages = ["editorWorkerService", "typescript", "css", "json"];
@@ -16,7 +17,13 @@ export default defineConfig({
     vue(),
     // https://github.com/vdesjs/vite-plugin-monaco-editor/issues/21
     monacoEditorPlugin({ languageWorkers: monacoLanguages }),
-    viteCommonjs()
+    viteCommonjs(),
+    istanbulPlugin({
+      include: "src/**",
+      exclude: ["node_modules", "test/"],
+      extension: [".js", ".ts", ".vue"],
+      requireEnv: true
+    })
   ],
   resolve: {
     alias: [
@@ -75,7 +82,7 @@ export default defineConfig({
   },
   server: {
     watch: {
-      ignored: ["coverage"]
+      ignored: ["coverage", ".nyc-output"]
     }
   }
 });