test: fix test failures due to $route not being stringified (#3095)

specs/basic_usage.spec.ts

@@ -83,11 +83,11 @@ describe('basic usage', async () => {
     expect(await getText(page, '#locale-path')).toEqual('/nl/nuxt-context-extension')
 
     const localeRoute = JSON.parse(await getText(page, '#locale-route')) as RouteLocation
-    // remove absolute file path which differs where test is run
+    // remove properties that vary based on test environment and vue-router version
+    // we only need to know if the correct route (object) is returned
     localeRoute.matched = localeRoute.matched.map(x => {
       for (const component in x.components) {
-        // @ts-ignore
-        delete x.components[component].__file
+        x.components[component] = {}
       }
       // @ts-ignore
       delete x.mods
@@ -107,18 +107,14 @@ describe('basic usage', async () => {
             },
             "enterCallbacks": {},
             "instances": {},
-            "leaveGuards": {
-              "Set(0)": [],
-            },
+            "leaveGuards": {},
             "meta": {},
             "name": "nuxt-context-extension___en",
             "path": "/nuxt-context-extension",
             "props": {
               "default": false,
             },
-            "updateGuards": {
-              "Set(0)": [],
-            },
+            "updateGuards": {},
           },
         ],
         "meta": {},

specs/fixtures/basic_usage/pages/nuxt-context-extension.vue

@@ -1,9 +1,11 @@
+<script setup></script>
+
 <template>
   <div>
     <p id="get-route-base-name">{{ $nuxt.$getRouteBaseName($route) }}</p>
     <p id="switch-locale-path">{{ $nuxt.$switchLocalePath('ja') }}</p>
     <p id="locale-path">{{ $nuxt.$localePath('nuxt-context-extension', 'nl') }}</p>
-    <p id="locale-route">{{ $nuxt.$localeRoute($route) }}</p>
+    <p id="locale-route">{{ JSON.stringify($nuxt.$localeRoute()) }}</p>
     <p id="locale-head">{{ $nuxt.$localeHead({}) }}</p>
   </div>
 </template>

specs/fixtures/routing/pages/index.vue

@@ -53,32 +53,32 @@ const localeRoute = useLocaleRoute()
     </section>
     <ClientOnly>
       <section id="locale-route">
-        <span class="index">{{ localeRoute('/') }}</span>
-        <span class="index-name-ja">{{ localeRoute('index', 'ja') }}</span>
-        <span class="about-name">{{ localeRoute('about') }}</span>
-        <span class="about-ja">{{ localeRoute('/about', 'ja') }}</span>
-        <span class="about-name-ja">{{ localeRoute('about', 'ja') }}</span>
-        <span class="about-object-ja">{{ localeRoute({ name: 'about' }, 'ja') }}</span>
-        <span class="path-match-ja">{{ localeRoute('/:pathMatch(.*)*', 'ja') }}</span>
-        <span class="path-match-name">{{ localeRoute('pathMatch') }}</span>
-        <span class="path-match-name-ja">{{ localeRoute('pathMatch', 'ja') }}</span>
-        <span class="undefined-path-ja">{{ localeRoute('/vue-i18n', 'ja') }}</span>
-        <span class="undefined-name-ja">{{ localeRoute('vue-i18n', 'ja') }}</span>
+        <span class="index">{{ JSON.stringify(localeRoute('/')) }}</span>
+        <span class="index-name-ja">{{ JSON.stringify(localeRoute('index', 'ja')) }}</span>
+        <span class="about-name">{{ JSON.stringify(localeRoute('about')) }}</span>
+        <span class="about-ja">{{ JSON.stringify(localeRoute('/about', 'ja')) }}</span>
+        <span class="about-name-ja">{{ JSON.stringify(localeRoute('about', 'ja')) }}</span>
+        <span class="about-object-ja">{{ JSON.stringify(localeRoute({ name: 'about' }, 'ja')) }}</span>
+        <span class="path-match-ja">{{ JSON.stringify(localeRoute('/:pathMatch(.*)*', 'ja')) }}</span>
+        <span class="path-match-name">{{ JSON.stringify(localeRoute('pathMatch')) }}</span>
+        <span class="path-match-name-ja">{{ JSON.stringify(localeRoute('pathMatch', 'ja')) }}</span>
+        <span class="undefined-path-ja">{{ JSON.stringify(localeRoute('/vue-i18n', 'ja')) }}</span>
+        <span class="undefined-name-ja">{{ JSON.stringify(localeRoute('vue-i18n', 'ja')) }}</span>
       </section>
     </ClientOnly>
     <ClientOnly>
       <section id="locale-location">
-        <span class="index">{{ localeLocation('/') }}</span>
-        <span class="index-name-ja">{{ localeLocation('index', 'ja') }}</span>
-        <span class="about-name">{{ localeLocation('about') }}</span>
-        <span class="about-ja">{{ localeLocation('/about', 'ja') }}</span>
-        <span class="about-name-ja">{{ localeLocation('about', 'ja') }}</span>
-        <span class="about-object-ja">{{ localeLocation({ name: 'about' }, 'ja') }}</span>
-        <span class="path-match-ja">{{ localeLocation('/:pathMatch(.*)*', 'ja') }}</span>
-        <span class="path-match-name">{{ localeLocation('pathMatch') }}</span>
-        <span class="path-match-name-ja">{{ localeLocation('pathMatch', 'ja') }}</span>
-        <span class="undefined-path-ja">{{ localeRoute('/vue-i18n', 'ja') }}</span>
-        <span class="undefined-name-ja">{{ localeRoute('vue-i18n', 'ja') }}</span>
+        <span class="index">{{ JSON.stringify(localeLocation('/')) }}</span>
+        <span class="index-name-ja">{{ JSON.stringify(localeLocation('index', 'ja')) }}</span>
+        <span class="about-name">{{ JSON.stringify(localeLocation('about')) }}</span>
+        <span class="about-ja">{{ JSON.stringify(localeLocation('/about', 'ja')) }}</span>
+        <span class="about-name-ja">{{ JSON.stringify(localeLocation('about', 'ja')) }}</span>
+        <span class="about-object-ja">{{ JSON.stringify(localeLocation({ name: 'about' }, 'ja')) }}</span>
+        <span class="path-match-ja">{{ JSON.stringify(localeLocation('/:pathMatch(.*)*', 'ja')) }}</span>
+        <span class="path-match-name">{{ JSON.stringify(localeLocation('pathMatch')) }}</span>
+        <span class="path-match-name-ja">{{ JSON.stringify(localeLocation('pathMatch', 'ja')) }}</span>
+        <span class="undefined-path-ja">{{ JSON.stringify(localeRoute('/vue-i18n', 'ja')) }}</span>
+        <span class="undefined-name-ja">{{ JSON.stringify(localeRoute('vue-i18n', 'ja')) }}</span>
       </section>
     </ClientOnly>
   </div>