ci(e2e): support relative imports

e2e/.babelrc.js

@@ -0,0 +1,50 @@
+// https://github.com/viruscamp/babel-plugin-transform-imports#using-a-function-as-the-transformer
+
+const path = require('path');
+const siteDir = path.resolve('./e2e/site');
+const testsDir = path.resolve('./e2e/tests');
+const testsBuiltDir = path.resolve('./e2e/dist');
+
+module.exports = {
+  presets: [
+    [
+      '@babel/env',
+      {
+        modules: false,
+        useBuiltIns: false,
+        loose: true,
+        targets: 'chrome > 100',
+      },
+    ],
+    [
+      '@babel/typescript',
+      {
+        allowDeclareFields: true,
+      },
+    ],
+  ],
+  plugins: [
+    [
+      'transform-imports',
+      {
+        '\\..*': {
+          skipDefaultConversion: true,
+          transform: function (importName, matches, filename) {
+            const file = path.resolve(
+              path.dirname(filename),
+              `${matches[0]}.js`
+            );
+            return path
+              .relative(
+                siteDir,
+                file.startsWith(testsDir)
+                  ? path.resolve(testsBuiltDir, path.relative(testsDir, file))
+                  : file
+              )
+              .replaceAll('\\', '/');
+          },
+        },
+      },
+    ],
+  ],
+};

e2e/imports.ts

@@ -1,12 +1,12 @@
 import { readJSONSync } from 'fs-extra';
 
 /**
- * The import map used by `./utils/setupApp` to inject into the page
- * so test scripts can use modules (relative imports don't seem to work out of the box)
+ * The import map used by `./utils/setupApp` to inject into the page so test scripts can use modules.
+ *
+ * Relative imports are supported thanks to babel, see `./.babelrc.js`.
  *
  * **IMPORTANT**: be sure to update the paths field in `./tsconfig.json` to reflect imports correctly
  */
 export default {
   fabric: readJSONSync('./package.json').module.slice(1),
-  test: '/e2e/dist/test.js',
 };

e2e/setup/setupApp.ts

@@ -61,7 +61,7 @@ test.beforeEach(async ({ page }, { file }) => {
     await page.addScriptTag({
       type: 'module',
       content: `${readFileSync(
-        path.relative(process.cwd(), pathToApp)
+        path.relative(process.cwd(), pathToBuiltApp)
       ).toString()}
        window.dispatchEvent(new CustomEvent('fabric:setup'));
        `,

e2e/tests/template/index.ts

@@ -4,7 +4,7 @@
  */
 
 import * as fabric from 'fabric';
-import { beforeAll } from 'test';
+import { beforeAll } from '../test';
 
 beforeAll((canvas) => {
   const textbox = new fabric.Textbox('fabric.js test', {

e2e/tests/text/text-editing/index.ts

@@ -4,7 +4,7 @@
  */
 
 import { Textbox } from 'fabric';
-import { beforeAll } from 'test';
+import { beforeAll } from '../../test';
 
 beforeAll((canvas) => {
   const textbox = new Textbox('initial text', { width: 200, left: 50 });