Upgrade Vitest, use a real browser for Map Bridges tests

Author: Kocal

.github/workflows/test.yaml

@@ -141,4 +141,5 @@ jobs:
                   restore-keys: |
                       ${{ runner.os }}-yarn-
             - run: yarn --immutable
+            - run: yarn playwright install  
             - run: yarn test

package.json

@@ -19,10 +19,12 @@
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-typescript": "^11.1.6",
         "@symfony/stimulus-testing": "^2.0.1",
+        "@vitest/browser": "^2.0.5",
         "clean-css-cli": "^5.6.2",
+        "playwright": "^1.47.0",
         "rollup": "^4.21.0",
         "tslib": "^2.6.3",
         "typescript": "^5.5.4",
-        "vitest": "^0.34.6"
+        "vitest": "^2.0.5"
     }
 }

src/Map/src/Bridge/Google/assets/package.json

@@ -33,7 +33,6 @@
     "devDependencies": {
         "@googlemaps/js-api-loader": "^1.16.6",
         "@hotwired/stimulus": "^3.0.0",
-        "@types/google.maps": "^3.55.9",
-        "happy-dom": "^14.12.3"
+        "@types/google.maps": "^3.55.9"
     }
 }

src/Map/src/Bridge/Google/assets/vitest.config.js

@@ -9,9 +9,21 @@ export default mergeConfig(
                 '@symfony/ux-map/abstract-map-controller': __dirname + '/../../../../assets/src/abstract_map_controller.ts',
             },
         },
+        define: {
+            // Prevent the following error:
+            //      ReferenceError: global is not defined
+            //       ❯ ../../../../../../node_modules/pretty-format/build/plugins/AsymmetricMatcher.js ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:139:19
+            //       ❯ ../../../../../../node_modules/pretty-format/build/index.js ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:805:7
+            //       ❯ ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:13445:36
+            global: {}
+        },
         test: {
-            // We need a browser(-like) environment to run the tests
-            environment: 'happy-dom',
+            browser: {
+                enabled: true,
+                provider: 'playwright', // or 'webdriverio'
+                name: 'chromium', // browser name is required
+                headless: true,
+            },
         },
     })
 );

src/Map/src/Bridge/Leaflet/assets/package.json

@@ -33,7 +33,6 @@
     "devDependencies": {
         "@hotwired/stimulus": "^3.0.0",
         "@types/leaflet": "^1.9.12",
-        "happy-dom": "^14.12.3",
         "leaflet": "^1.9.4"
     }
 }

src/Map/src/Bridge/Leaflet/assets/vitest.config.js

@@ -10,9 +10,21 @@ export default mergeConfig(
                 'leaflet/dist/leaflet.min.css': 'leaflet/dist/leaflet.css',
             },
         },
+        define: {
+            // Prevent the following error:
+            //      ReferenceError: global is not defined
+            //       ❯ ../../../../../../node_modules/pretty-format/build/plugins/AsymmetricMatcher.js ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:139:19
+            //       ❯ ../../../../../../node_modules/pretty-format/build/index.js ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:805:7
+            //       ❯ ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:13445:36
+            global: {}
+        },
         test: {
-            // We need a browser(-like) environment to run the tests
-            environment: 'happy-dom',
+            browser: {
+                enabled: true,
+                provider: 'playwright', // or 'webdriverio'
+                name: 'chromium', // browser name is required
+                headless: true,
+            },
         },
     })
 );