fix: make visual test works in CI

Author: florianduros

.github/workflows/shared-component-visual-tests.yaml

@@ -49,7 +49,17 @@ jobs:
               if: steps.playwright-cache.outputs.cache-hit != 'true'
               run: "yarn playwright install --with-deps --only-shell"
 
-            - name: Run Visual tests
+            - name: Build Element Web resources
+              # Needed to prepare language files
+              run: "yarn build:res"
+
+            - name: Build storybook dependencies
+              # When the first test is ran, it will fail because the dependencies are not yet built.
+              # This step is to ensure that the dependencies are built before running the tests.
+              run: "yarn test:storybook:ci"
+              continue-on-error: true
+
+            - name: Run Visual tests 2
               run: "yarn test:storybook:ci"
 
             - name: Upload received images & diffs

.storybook/main.ts

@@ -7,12 +7,8 @@ Please see LICENSE files in the repository root for full details.
 
 import type { StorybookConfig } from "@storybook/react-vite";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
-import { mergeConfig } from "vite";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const { mergeConfig } = await import("vite");
 
 const config: StorybookConfig = {
     stories: ["../src/shared-components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -30,7 +26,7 @@ const config: StorybookConfig = {
             resolve: {
                 alias: {
                     // Alias used by i18n.tsx
-                    $webapp: path.resolve(__dirname, "../webapp"),
+                    $webapp: path.resolve("webapp"),
                 },
             },
             // Needed for counterpart to work