Try coverage

.github/workflows/test.yml

@@ -118,3 +118,8 @@ jobs:
         with:
           name: cypress-screenshots
           path: cypress/screenshots
+      - uses: actions/upload-artifact@v4
+        if: success() && ${{ matrix.react == '18' }}
+        with:
+          name: coverage
+          path: coverage

.gitignore

@@ -33,6 +33,7 @@ storybook-static
 # misc
 .DS_Store
 .eslintcache
+.swc
 
 npm-debug.log*
 yarn-debug.log*

cypress.config.ts

@@ -1,16 +1,16 @@
+import installCoverageTask from "@cypress/code-coverage/task";
 // @ts-ignore
 import { defineConfig } from "cypress";
 import { devServer } from "cypress-rspack-dev-server";
 import { merge } from "webpack-merge";
-// import installCoverageTask from "@cypress/code-coverage/task";
 
 export default defineConfig({
   viewportWidth: 1280,
   viewportHeight: 1024,
   video: false,
   component: {
     setupNodeEvents(on, config) {
-      // installCoverageTask(on, config);
+      installCoverageTask(on, config);
       //Setting up a log task to allow logging to the console during an axe test because console.log() does not work directly in a test
       on("task", {
         log(message: string) {
@@ -34,5 +34,8 @@ export default defineConfig({
       });
     },
     specPattern: "packages/**/src/**/*.cy.{js,ts,jsx,tsx}",
+    env: {
+      coverage: Boolean(process.env.coverage),
+    },
   },
 });

package.json

@@ -21,7 +21,7 @@
     "copy:icon:css": "yarn workspace @salt-ds/icons copy:css",
     "copy:countries:css": "yarn workspace @salt-ds/countries copy:css",
     "test": "vitest",
-    "test:components": "CYPRESS_NO_COMMAND_LOG=1 cypress run --component --browser chrome",
+    "test:components": "cypress run --component --browser chrome",
     "test:components:local": "cypress open --component --browser electron",
     "prettier": "prettier --write .",
     "prettier:ci": "prettier --check .",
@@ -81,7 +81,6 @@
     "ag-grid-enterprise": "^31.3.4",
     "ag-grid-react": "^31.3.4",
     "axe-core": "^4.9.0",
-    "babel-loader": "^9.1.3",
     "chromatic": "^11.10.1",
     "ci-info": "^4.0.0",
     "clsx": "^2.0.0",
@@ -104,9 +103,9 @@
     "storybook": "^8.3.0",
     "style-loader": "^4.0.0",
     "stylelint": "^16.0.0",
+    "swc-plugin-coverage-instrument": "^0.0.25",
     "typescript": "4.6.4",
     "vite": "^5.0.0",
-    "vite-plugin-istanbul": "^6.0.0",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^2.0.0",
     "yup": "^1.0.2"
@@ -117,7 +116,8 @@
     "next": "^14.0.0",
     "whatwg-url": "^14.0.0",
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.0",
-    "cookie": "^0.7.0"
+    "cookie": "^0.7.0",
+    "nyc": "^17.0.0"
   },
   "browserslist": {
     "production": [
@@ -147,5 +147,15 @@
     "rollup": "^4.24.2",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2"
+  },
+  "nyc": {
+    "all": false,
+    "include": [
+      "**/packages/**"
+    ],
+    "exclude": [
+      "**/__tests_/**"
+    ],
+    "excludeAfterRemap": false
   }
 }

rspack.config.ts

@@ -16,16 +16,15 @@ export default defineConfig({
         test: /\.css$/,
         use: ["style-loader", "css-loader", "postcss-loader"],
       },
-      {
-        test: /packages\/.*\/src\/.*\.[tj]sx?$/,
-        use: ["babel-loader"],
-      },
       {
         test: /\.(j|t)s$/,
         exclude: [/[\\/]node_modules[\\/]/],
         loader: "builtin:swc-loader",
         options: {
           jsc: {
+            experimental: {
+              plugins: [["swc-plugin-coverage-instrument", {}]],
+            },
             parser: {
               syntax: "typescript",
             },
@@ -46,6 +45,9 @@ export default defineConfig({
         exclude: [/[\\/]node_modules[\\/]/],
         options: {
           jsc: {
+            experimental: {
+              plugins: [["swc-plugin-coverage-instrument", {}]],
+            },
             parser: {
               syntax: "typescript",
               tsx: true,
@@ -82,4 +84,7 @@ export default defineConfig({
     },
     extensions: ["...", ".ts", ".tsx", ".js", ".jsx", ".css"],
   },
+  watchOptions: {
+    ignored: "**/*",
+  },
 });