@grafana/e2e: fix runtime ts-loader errors with Cypress support files (#22688)

* Minor changes

* Only exclude installed packages that are not @grafana/e2e itself

* Explicitly load Cypress tsconfig for clarity

* Fix Cypress tsconfig

  * it was trying to extend a config that is not published
  * it needs to be commonjs

packages/grafana-e2e/cypress/plugins/compareSnapshots.js

@@ -1,4 +1,3 @@
-const fs = require('fs');
 const BlinkDiff = require('blink-diff');
 
 function compareSnapshotsPlugin(args) {

packages/grafana-e2e/cypress/plugins/cy-ts-preprocessor.js

@@ -1,26 +0,0 @@
-const wp = require('@cypress/webpack-preprocessor');
-
-const webpackOptions = {
-  resolve: {
-    extensions: ['.ts', '.js'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        exclude: [/node_modules/],
-        use: [
-          {
-            loader: 'ts-loader',
-          },
-        ],
-      },
-    ],
-  },
-};
-
-const options = {
-  webpackOptions,
-};
-
-module.exports = wp(options);

packages/grafana-e2e/cypress/plugins/index.js

@@ -1,6 +1,6 @@
-const compareSnapshotsPlugin = require('./cy-compare-images');
+const compareSnapshotsPlugin = require('./compareSnapshots');
-const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');
+const extendConfig = require('./extendConfig');
-const extendConfigPlugin = require('./cy-extend-config');
+const typescriptPreprocessor = require('./typescriptPreprocessor');
 
 module.exports = (on, config) => {
   // yarn build fails with:
@@ -9,10 +9,8 @@ module.exports = (on, config) => {
   // on('task', {
   //   failed: require('cypress-failed-log/src/failed')(),
   // });
-  on('file:preprocessor', cypressTypeScriptPreprocessor);
+  on('file:preprocessor', typescriptPreprocessor);
-  on('task', {
+  on('task', { compareSnapshotsPlugin });
-    compareSnapshotsPlugin,
-  });
   on('task', {
     log({ message, optional }) {
       optional ? console.log(message, optional) : console.log(message);
@@ -22,5 +20,5 @@ module.exports = (on, config) => {
 
   // Always extend with this library's config and return for diffing
   // @todo remove this when possible: https://github.com/cypress-io/cypress/issues/5674
-  return extendConfigPlugin(config);
+  return extendConfig(config);
 };

packages/grafana-e2e/cypress/plugins/typescriptPreprocessor.js

@@ -0,0 +1,35 @@
+const { resolve } = require('path');
+const wp = require('@cypress/webpack-preprocessor');
+
+const packageRoot = resolve(`${__dirname}/../../`);
+const packageModules = `${packageRoot}/node_modules`;
+
+const webpackOptions = {
+  module: {
+    rules: [
+      {
+        include: modulePath => {
+          return modulePath.startsWith(packageRoot) && !modulePath.startsWith(packageModules);
+        },
+        test: /\.ts$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              configFile: `${__dirname}/../tsconfig.json`,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+};
+
+const options = {
+  webpackOptions,
+};
+
+module.exports = wp(options);

packages/grafana-e2e/cypress/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
+    "module": "commonjs",
     "types": ["cypress"]
   },
-  "extends": "../tsconfig.json",
+  "extends": "@grafana/tsconfig",
   "include": ["**/*.ts"]
 }