test: reenable nuxt runtime tests (with latest test-utils) (#2497)

tests/nuxt/__snapshots__/content-rich.test.ts.snap

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`content-rich > block with backticks 1`] = `"<p><pre class=\\"code-block\\">[(\`number string) (\`tag string)]</pre></p>"`;
+exports[`content-rich > block with backticks 1`] = `"<p><pre class="code-block">[(\`number string) (\`tag string)]</pre></p>"`;
 
 exports[`content-rich > block with injected html, with a known language 1`] = `
 "<pre>
-        <code class=\\"language-js\\">
+        <code class="language-js">
           &lt;a href=&quot;javascript:alert(1)&quot;&gt;click me&lt;/a&gt;
         </code>
       </pre>
@@ -13,7 +13,7 @@ exports[`content-rich > block with injected html, with a known language 1`] = `
 
 exports[`content-rich > block with injected html, with an unknown language 1`] = `
 "<pre>
-        <code class=\\"language-xyzzy\\">
+        <code class="language-xyzzy">
           &lt;a href=&quot;javascript:alert(1)&quot;&gt;click me&lt;/a&gt;
         </code>
       </pre>
@@ -30,7 +30,7 @@ exports[`content-rich > block with injected html, without language 1`] = `
 `;
 
 exports[`content-rich > code frame 1`] = `
-"<p>Testing code block</p><p></p><p><pre class=\\"code-block\\">import { useMouse, usePreferredDark } from &apos;@vueuse/core&apos;
+"<p>Testing code block</p><p></p><p><pre class="code-block">import { useMouse, usePreferredDark } from &apos;@vueuse/core&apos;
 // tracks mouse position
 const { x, y } = useMouse()
 // is the user prefers dark theme
@@ -39,34 +39,34 @@ const isDark = usePreferredDark()</pre></p>"
 
 exports[`content-rich > code frame 2 1`] = `
 "<p>
-  <span class=\\"h-card\\"
+  <span class="h-card"
     ><a
-      class=\\"u-url mention\\"
-      rel=\\"nofollow noopener noreferrer\\"
-      to=\\"/webtoo.ls/@antfu\\"
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/webtoo.ls/@antfu"
     ></a
   ></span>
   Testing<br />
-  <pre class=\\"code-block\\">const a = hello</pre>
+  <pre class="code-block">const a = hello</pre>
 </p>
 "
 `;
 
-exports[`content-rich > code frame empty 1`] = `"<p><pre class=\\"code-block\\"></pre><br></p>"`;
+exports[`content-rich > code frame empty 1`] = `"<p><pre class="code-block"></pre><br></p>"`;
 
-exports[`content-rich > code frame no lang 1`] = `"<p><pre class=\\"code-block\\">hello world</pre><br>no lang</p>"`;
+exports[`content-rich > code frame no lang 1`] = `"<p><pre class="code-block">hello world</pre><br>no lang</p>"`;
 
 exports[`content-rich > custom emoji 1`] = `
 "Daniel Roe
-<picture alt=\\":nuxt:\\" class=\\"custom-emoji\\" data-emoji-id=\\"nuxt\\"
+<picture alt=":nuxt:" class="custom-emoji" data-emoji-id="nuxt"
   ><source
-    srcset=\\"
+    srcset="
       https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png
-    \\"
-    media=\\"(prefers-reduced-motion: reduce)\\" />
+    "
+    media="(prefers-reduced-motion: reduce)" />
   <img
-    src=\\"https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png\\"
-    alt=\\":nuxt:\\"
+    src="https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png"
+    alt=":nuxt:"
 /></picture>
 "
 `;
@@ -75,11 +75,11 @@ exports[`content-rich > empty 1`] = `""`;
 
 exports[`content-rich > group mention > html 1`] = `
 "<p>
-  <span class=\\"h-card\\"
+  <span class="h-card"
     ><a
-      class=\\"u-url mention\\"
-      rel=\\"nofollow noopener noreferrer\\"
-      to=\\"//@pilipinas@lemmy.ml\\"
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/m.webtoo.ls/@pilipinas@lemmy.ml"
     ></a
   ></span>
 </p>
@@ -106,7 +106,7 @@ exports[`content-rich > handles formatting from servers 1`] = `
 exports[`content-rich > handles html within code blocks 1`] = `
 "<p>
   HTML block code:<br />
-  <pre class=\\"code-block\\">
+  <pre class="code-block">
 &lt;span class=&quot;icon--noto icon--noto--1st-place-medal&quot;&gt;&lt;/span&gt;
 &lt;span class=&quot;icon--noto icon--noto--2nd-place-medal-medal&quot;&gt;&lt;/span&gt;</pre
   >
@@ -128,26 +128,26 @@ exports[`content-rich > link + mention 1`] = `
 "<p>
   Happy
   <img
-    src=\\"/emojis/twemoji/1f917.svg\\"
-    alt=\\"🤗\\"
-    class=\\"iconify-emoji iconify-emoji--twemoji\\"
+    src="/emojis/twemoji/1f917.svg"
+    alt="🤗"
+    class="iconify-emoji iconify-emoji--twemoji"
   />
   we’re now using
-  <span class=\\"h-card\\"
+  <span class="h-card"
     ><a
-      class=\\"u-url mention\\"
-      rel=\\"nofollow noopener noreferrer\\"
-      to=\\"/webtoo.ls/@vitest\\"
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/webtoo.ls/@vitest"
     ></a
   ></span>
   (migrated from chai+mocha)
   <a
-    href=\\"https://github.com/ayoayco/astro-reactive-library/pull/203\\"
-    rel=\\"nofollow noopener noreferrer\\"
-    target=\\"_blank\\"
-    ><span class=\\"invisible\\">https://</span
-    ><span class=\\"ellipsis\\">github.com/ayoayco/astro-react</span
-    ><span class=\\"invisible\\">ive-library/pull/203</span></a
+    href="https://github.com/ayoayco/astro-reactive-library/pull/203"
+    rel="nofollow noopener noreferrer"
+    target="_blank"
+    ><span class="invisible">https://</span
+    ><span class="ellipsis">github.com/ayoayco/astro-react</span
+    ><span class="invisible">ive-library/pull/203</span></a
   >
 </p>
 "

tests/nuxt/__snapshots__/html-parse.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`html-parse > code frame > html 1`] = `
-"<p>Testing code block</p><p></p><p><pre><code class=\\"language-ts\\">import { useMouse, usePreferredDark } from '@vueuse/core'
+"<p>Testing code block</p><p></p><p><pre><code class="language-ts">import { useMouse, usePreferredDark } from '@vueuse/core'
 // tracks mouse position
 const { x, y } = useMouse()
 // is the user prefers dark theme
@@ -23,17 +23,17 @@ const isDark = usePreferredDark()
 
 exports[`html-parse > code frame 2 > html 1`] = `
 "<p>
-  <span class=\\"h-card\\"
+  <span class="h-card"
     ><a
-      href=\\"https://webtoo.ls/@antfu\\"
-      class=\\"u-url mention\\"
-      rel=\\"nofollow noopener noreferrer\\"
-      target=\\"_blank\\"
+      href="https://webtoo.ls/@antfu"
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      target="_blank"
       >@<span>antfu</span></a
     ></span
   >
   Testing<br />
-  <pre><code class=\\"language-ts\\">const a = hello</code></pre>
+  <pre><code class="language-ts">const a = hello</code></pre>
 </p>
 "
 `;
@@ -48,15 +48,15 @@ const a = hello
 
 exports[`html-parse > custom emoji > html 1`] = `
 "Daniel Roe
-<picture alt=\\":nuxt:\\" class=\\"custom-emoji\\" data-emoji-id=\\"nuxt\\"
+<picture alt=":nuxt:" class="custom-emoji" data-emoji-id="nuxt"
   ><source
-    srcset=\\"
+    srcset="
       https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png
-    \\"
-    media=\\"(prefers-reduced-motion: reduce)\\" />
+    "
+    media="(prefers-reduced-motion: reduce)" />
   <img
-    src=\\"https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png\\"
-    alt=\\":nuxt:\\"
+    src="https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png"
+    alt=":nuxt:"
 /></picture>
 "
 `;
@@ -65,23 +65,23 @@ exports[`html-parse > custom emoji > text 1`] = `"Daniel Roe :nuxt:"`;
 
 exports[`html-parse > emojis > html 1`] = `
 "<img
-  src=\\"/emojis/twemoji/1f1eb-1f1f7.svg\\"
-  alt=\\"🇫🇷\\"
-  class=\\"iconify-emoji iconify-emoji--twemoji\\"
+  src="/emojis/twemoji/1f1eb-1f1f7.svg"
+  alt="🇫🇷"
+  class="iconify-emoji iconify-emoji--twemoji"
 />
 <img
-  src=\\"/emojis/twemoji/1f468-200d-1f469-200d-1f466.svg\\"
-  alt=\\"👨‍👩‍👦\\"
-  class=\\"iconify-emoji iconify-emoji--twemoji\\"
+  src="/emojis/twemoji/1f468-200d-1f469-200d-1f466.svg"
+  alt="👨‍👩‍👦"
+  class="iconify-emoji iconify-emoji--twemoji"
 />
 <img
-  src=\\"/emojis/twemoji/1f469-200d-1f692.svg\\"
-  alt=\\"👩‍🚒\\"
-  class=\\"iconify-emoji iconify-emoji--twemoji\\"
+  src="/emojis/twemoji/1f469-200d-1f692.svg"
+  alt="👩‍🚒"
+  class="iconify-emoji iconify-emoji--twemoji"
 /><img
-  src=\\"/emojis/twemoji/1f9d1-1f3fd-200d-1f680.svg\\"
-  alt=\\"🧑🏽‍🚀\\"
-  class=\\"iconify-emoji iconify-emoji--twemoji\\"
+  src="/emojis/twemoji/1f9d1-1f3fd-200d-1f680.svg"
+  alt="🧑🏽‍🚀"
+  class="iconify-emoji iconify-emoji--twemoji"
 />
 "
 `;
@@ -99,7 +99,7 @@ exports[`html-parse > html entities > html 1`] = `
 
 exports[`html-parse > html entities > text 1`] = `"Hello <World />."`;
 
-exports[`html-parse > inline markdown > html 1`] = `"<p>text <code>code</code> <b>bold</b> <em>italic</em> <del>del</del></p><p></p><p><pre><code class=\\"language-js\\">code block</code></pre></p>"`;
+exports[`html-parse > inline markdown > html 1`] = `"<p>text <code>code</code> <b>bold</b> <em>italic</em> <del>del</del></p><p></p><p><pre><code class="language-js">code block</code></pre></p>"`;
 
 exports[`html-parse > inline markdown > text 1`] = `
 "text \`code\` **bold** *italic* ~~del~~
@@ -114,28 +114,28 @@ exports[`html-parse > link + mention > html 1`] = `
 "<p>
   Happy
   <img
-    src=\\"/emojis/twemoji/1f917.svg\\"
-    alt=\\"🤗\\"
-    class=\\"iconify-emoji iconify-emoji--twemoji\\"
+    src="/emojis/twemoji/1f917.svg"
+    alt="🤗"
+    class="iconify-emoji iconify-emoji--twemoji"
   />
   we’re now using
-  <span class=\\"h-card\\"
+  <span class="h-card"
     ><a
-      href=\\"https://webtoo.ls/@vitest\\"
-      class=\\"u-url mention\\"
-      rel=\\"nofollow noopener noreferrer\\"
-      target=\\"_blank\\"
+      href="https://webtoo.ls/@vitest"
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      target="_blank"
       >@<span>vitest</span></a
     ></span
   >
   (migrated from chai+mocha)
   <a
-    href=\\"https://github.com/ayoayco/astro-reactive-library/pull/203\\"
-    rel=\\"nofollow noopener noreferrer\\"
-    target=\\"_blank\\"
-    ><span class=\\"invisible\\">https://</span
-    ><span class=\\"ellipsis\\">github.com/ayoayco/astro-react</span
-    ><span class=\\"invisible\\">ive-library/pull/203</span></a
+    href="https://github.com/ayoayco/astro-reactive-library/pull/203"
+    rel="nofollow noopener noreferrer"
+    target="_blank"
+    ><span class="invisible">https://</span
+    ><span class="ellipsis">github.com/ayoayco/astro-react</span
+    ><span class="invisible">ive-library/pull/203</span></a
   >
 </p>
 "

tests/nuxt/content-rich.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { renderToString } from 'vue/server-renderer'
 import { format } from 'prettier'
 import type { mastodon } from 'masto'
-import { mockComponent } from 'nuxt-vitest/utils'
+import { mockComponent } from '@nuxt/test-utils/runtime'
 import { contentToVNode } from '~/composables/content-render'
 import type { ContentParseOptions } from '~/composables/content-parse'
 
@@ -91,47 +91,47 @@ describe('content-rich', () => {
     })
     expect(formatted).toMatchInlineSnapshot(`
       "<p>
-        <span class=\\"h-card\\"
+        <span class="h-card"
           ><a
-            class=\\"u-url mention\\"
-            rel=\\"nofollow noopener noreferrer\\"
-            to=\\"/m.webtoo.ls/@elk\\"
+            class="u-url mention"
+            rel="nofollow noopener noreferrer"
+            to="/m.webtoo.ls/@elk"
           ></a
         ></span>
-        <span class=\\"h-card\\"
+        <span class="h-card"
           ><a
-            class=\\"u-url mention\\"
-            rel=\\"nofollow noopener noreferrer\\"
-            to=\\"/m.webtoo.ls/@elk\\"
+            class="u-url mention"
+            rel="nofollow noopener noreferrer"
+            to="/m.webtoo.ls/@elk"
           ></a
         ></span>
         content
-        <span class=\\"h-card\\"
+        <span class="h-card"
           ><a
-            class=\\"u-url mention\\"
-            rel=\\"nofollow noopener noreferrer\\"
-            to=\\"/m.webtoo.ls/@antfu\\"
+            class="u-url mention"
+            rel="nofollow noopener noreferrer"
+            to="/m.webtoo.ls/@antfu"
           ></a
         ></span>
-        <span class=\\"h-card\\"
+        <span class="h-card"
           ><a
-            class=\\"u-url mention\\"
-            rel=\\"nofollow noopener noreferrer\\"
-            to=\\"/mastodon.roe.dev/@daniel\\"
+            class="u-url mention"
+            rel="nofollow noopener noreferrer"
+            to="/mastodon.roe.dev/@daniel"
           ></a
         ></span>
-        <span class=\\"h-card\\"
+        <span class="h-card"
           ><a
-            class=\\"u-url mention\\"
-            rel=\\"nofollow noopener noreferrer\\"
-            to=\\"/m.webtoo.ls/@sxzz\\"
+            class="u-url mention"
+            rel="nofollow noopener noreferrer"
+            to="/m.webtoo.ls/@sxzz"
           ></a
         ></span>
-        <span class=\\"h-card\\"
+        <span class="h-card"
           ><a
-            class=\\"u-url mention\\"
-            rel=\\"nofollow noopener noreferrer\\"
-            to=\\"/m.webtoo.ls/@patak\\"
+            class="u-url mention"
+            rel="nofollow noopener noreferrer"
+            to="/m.webtoo.ls/@patak"
           ></a
         ></span>
         content
@@ -158,11 +158,11 @@ describe('content-rich', () => {
     })
     expect(formatted).toMatchInlineSnapshot(`
       "<p>
-        <span class=\\"h-card\\"
+        <span class="h-card"
           ><a
-            class=\\"u-url mention\\"
-            rel=\\"nofollow noopener noreferrer\\"
-            to=\\"/m.webtoo.ls/@antfu\\"
+            class="u-url mention"
+            rel="nofollow noopener noreferrer"
+            to="/m.webtoo.ls/@antfu"
           ></a
         ></span>
         content
@@ -179,25 +179,25 @@ describe('content-rich', () => {
     expect(formatted).toMatchInlineSnapshot(`
       "<p>
         <mention-group
-          ><span class=\\"h-card\\"
+          ><span class="h-card"
             ><a
-              class=\\"u-url mention\\"
-              rel=\\"nofollow noopener noreferrer\\"
-              to=\\"/m.webtoo.ls/@antfu\\"
+              class="u-url mention"
+              rel="nofollow noopener noreferrer"
+              to="/m.webtoo.ls/@antfu"
             ></a
           ></span>
-          <span class=\\"h-card\\"
+          <span class="h-card"
             ><a
-              class=\\"u-url mention\\"
-              rel=\\"nofollow noopener noreferrer\\"
-              to=\\"/m.webtoo.ls/@patak\\"
+              class="u-url mention"
+              rel="nofollow noopener noreferrer"
+              to="/m.webtoo.ls/@patak"
             ></a
           ></span>
-          <span class=\\"h-card\\"
+          <span class="h-card"
             ><a
-              class=\\"u-url mention\\"
-              rel=\\"nofollow noopener noreferrer\\"
-              to=\\"/m.webtoo.ls/@sxzz\\"
+              class="u-url mention"
+              rel="nofollow noopener noreferrer"
+              to="/m.webtoo.ls/@sxzz"
             ></a></span></mention-group
         >content
       </p>