🧑‍💻 [#724] Use aliases for tests

When using relative imports, vite/vitest complain about ESM modules
being used through a CJS package, and setting type: module in
package.json breaks a lot of other things. Renaming the module to
.mts pushes the problem down the chain. It seems that using the
import alias seems to work to resolve the api-mocks package,
but there are plenty of other problems...

.prettierrc.json

@@ -12,7 +12,7 @@
   "tabWidth": 2,
   "trailingComma": "es5",
   "useTabs": false,
-  "importOrder": ["^((api-mocks|components|data|formio|hooks|map|story-utils|types)/(.*)|(api|api-mocks|cache|Context|errors|headers|i18n|sdk|sentry|types|utils))$", "^[./]"],
+  "importOrder": ["^@/.*", "^((api-mocks|components|data|formio|hooks|map|story-utils|types)/(.*)|(api|api-mocks|cache|Context|errors|headers|i18n|sdk|sentry|types|utils))$", "^[./]"],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true
 }

jsconfig.json

@@ -1,6 +1,9 @@
 {
   "compilerOptions": {
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["./*"]
+    },
   },
   "include": ["src"]
 }

src/vitest.setup.js

@@ -4,7 +4,7 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
 
-import mswServer from 'api-mocks/msw-server';
+import mswServer from '@/api-mocks/msw-server';
 
 beforeAll(() => mswServer.listen());
 afterEach(() => mswServer.resetHandlers());

vite.config.mts

@@ -35,5 +35,8 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true, // for compatibility with jest
     setupFiles: ['./src/vitest.setup.js'],
+    alias: {
+      '@/': new URL('./src/', import.meta.url).pathname,
+    },
   },
 });