fix(runtime-utils): support registerEndpoint with FormData in jsdom

examples/app-vitest-full/components/FormBlobSubmit.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const file = useTemplateRef('file')
+const output = ref('')
+
+async function submit() {
+  const data = await $fetch('/api/forms/blob', {
+    method: 'post',
+    body: file.value?.files?.item(0),
+  })
+  output.value = JSON.stringify(data, null, 2)
+}
+</script>
+
+<template>
+  <div>
+    <form @submit.prevent>
+      <label for="file">File</label>
+      <input
+        id="file"
+        ref="file"
+        name="file"
+        type="file"
+      >
+      <button @click="submit">
+        Submit
+      </button>
+    </form>
+    <pre id="output">{{ output }}</pre>
+  </div>
+</template>

examples/app-vitest-full/components/FormMultipartSubmit.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const form = useTemplateRef('form')
+const output = ref('')
+
+async function submit() {
+  const data = await $fetch('/api/forms/mutlipart', {
+    method: 'post',
+    body: new FormData(form.value!),
+  })
+  output.value = JSON.stringify(data, null, 2)
+}
+</script>
+
+<template>
+  <div>
+    <form
+      ref="form"
+      @submit.prevent
+    >
+      <label for="name">Name</label>
+      <input
+        id="name"
+        name="name"
+      >
+      <label for="file">File</label>
+      <input
+        id="file"
+        name="file"
+        type="file"
+      >
+      <button @click="submit">
+        Submit
+      </button>
+    </form>
+    <pre id="output">{{ output }}</pre>
+  </div>
+</template>

examples/app-vitest-full/nuxt.config.ts

@@ -26,7 +26,7 @@ export default defineNuxtConfig({
     },
   },
   testUtils: {
-    startOnBoot: true,
+    startOnBoot: process.env.START_ON_BOOT === '1',
     logToConsole: true,
     vitestConfig: {
       setupFiles: ['./tests/setup/mocks'],

examples/app-vitest-full/package.json

@@ -8,7 +8,7 @@
     "dev:prepare": "nuxt prepare",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "test:dev": "nuxt dev --no-fork",
+    "test:dev": "START_ON_BOOT=1 nuxt dev --no-fork",
     "test:unit": "vitest",
     "test:types": "nuxt prepare && vue-tsc --noEmit",
     "test:jsdom": "VITEST_DOM_ENV=jsdom pnpm test:unit --run",

examples/app-vitest-full/pages/forms/files.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <section>
+      <h1>Multipart</h1>
+      <FormMultipartSubmit />
+    </section>
+    <section>
+      <h1>Blob</h1>
+      <FormBlobSubmit />
+    </section>
+  </div>
+</template>

examples/app-vitest-full/server/api/forms/blob.post.ts

@@ -0,0 +1,6 @@
+import { defineEventHandler, getHeader, readRawBody } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const body = await readRawBody(event, 'utf8')
+  return { body, contentType: getHeader(event, 'content-type') }
+})

examples/app-vitest-full/server/api/forms/mutlipart.post.ts

@@ -0,0 +1,6 @@
+import { defineEventHandler, readMultipartFormData } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const parts = await readMultipartFormData(event)
+  return parts?.map(part => ({ ...part, data: part.data.toString('utf8') })) ?? []
+})

examples/app-vitest-full/tests/nuxt/fetch.spec.ts

@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
 
 import { listen } from 'listhen'
-import { createApp, eventHandler, toNodeListener, readBody, getHeaders, getQuery, setCookie } from 'h3'
+import { createApp, eventHandler, toNodeListener, readBody, getHeaders, getQuery, setCookie, readFormData } from 'h3'
 
 import FetchComponent from '~/components/FetchComponent.vue'
 
@@ -16,7 +16,7 @@ describe('server mocks and data fetching', () => {
     const server = await listen(toNodeListener(app))
     const urls = await server.getURLs()
     const { url } = urls[0]!
-    expect(await $fetch<unknown>('/todos/1', { baseURL: url })).toMatchObject({
+    expect(await $fetch('/todos/1', { baseURL: url })).toMatchObject({
       id: 1,
     })
     await server.close()
@@ -37,7 +37,7 @@ describe('server mocks and data fetching', () => {
       title: 'mocked',
     }))
     expect(
-      await $fetch<unknown>('/with-query', { query: { test: true } }),
+      await $fetch('/with-query', { query: { test: true } }),
     ).toMatchObject({
       title: 'mocked',
     })
@@ -56,16 +56,16 @@ describe('server mocks and data fetching', () => {
 
   it('can override and remove request mocks', async () => {
     const unsubFirst = registerEndpoint('/overrides', () => ({ title: 'first' }))
-    expect(await $fetch<unknown>('/overrides')).toStrictEqual({ title: 'first' })
+    expect(await $fetch('/overrides')).toStrictEqual({ title: 'first' })
 
     const unsubSecond = registerEndpoint('/overrides', () => ({ title: 'second' }))
-    expect(await $fetch<unknown>('/overrides')).toStrictEqual({ title: 'second' })
+    expect(await $fetch('/overrides')).toStrictEqual({ title: 'second' })
 
     unsubSecond()
-    expect(await $fetch<unknown>('/overrides')).toStrictEqual({ title: 'first' })
+    expect(await $fetch('/overrides')).toStrictEqual({ title: 'first' })
 
     unsubFirst()
-    await expect($fetch<unknown>('/overrides')).rejects.toMatchInlineSnapshot(`[FetchError: [GET] "/overrides": 404 Cannot find any path matching /overrides.]`)
+    await expect($fetch('/overrides')).rejects.toMatchInlineSnapshot(`[FetchError: [GET] "/overrides": 404 Cannot find any path matching /overrides.]`)
   })
 
   it('can mock fetch requests with explicit methods', async () => {
@@ -77,10 +77,10 @@ describe('server mocks and data fetching', () => {
       method: 'GET',
       handler: () => ({ method: 'GET' }),
     })
-    expect(await $fetch<unknown>('/method', { method: 'POST' })).toMatchObject({
+    expect(await $fetch('/method', { method: 'POST' })).toMatchObject({
       method: 'POST',
     })
-    expect(await $fetch<unknown>('/method')).toMatchObject({ method: 'GET' })
+    expect(await $fetch('/method')).toMatchObject({ method: 'GET' })
   })
 
   it('can mock native fetch requests', async () => {
@@ -120,7 +120,7 @@ describe('server mocks and data fetching', () => {
       },
     })
 
-    expect(await $fetch<unknown>('/with-data', {
+    expect(await $fetch('/with-data', {
       method: 'POST',
       body: { data: 'data' },
       headers: { 'x-test': 'test' },
@@ -149,21 +149,21 @@ describe('server mocks and data fetching', () => {
       },
     })
 
-    expect(await $fetch<unknown>('/with-data', { query: { q: 1 } })).toMatchObject({ query: { q: '1' } })
+    expect(await $fetch('/with-data', { query: { q: 1 } })).toMatchObject({ query: { q: '1' } })
     expect(await fetch('/with-data?q=1').then(res => res.json())).toMatchObject({ query: { q: '1' } })
   })
 
   it('can mock fetch requests with url including query param', async () => {
     registerEndpoint('/with-url-including-query-param/1?q=1', () => 'ok')
 
-    expect(await $fetch<unknown>('/with-url-including-query-param/1?q=1')).toBe('ok')
+    expect(await $fetch('/with-url-including-query-param/1?q=1')).toBe('ok')
     expect(await fetch('/with-url-including-query-param/1?q=1').then(res => res.text())).toBe('ok')
   })
 
   it('fails when query params do not match', async () => {
     registerEndpoint('/with-url-including-query-param/2?q=2', () => 'ok')
 
-    await expect($fetch<unknown>('/with-url-including-query-param/2?q=3')).rejects.toMatchObject({ status: 404 })
+    await expect($fetch('/with-url-including-query-param/2?q=3')).rejects.toMatchObject({ status: 404 })
     expect(await fetch('/with-url-including-query-param/2?q=3').then(r => r.status)).toBe(404)
   })
 
@@ -183,13 +183,85 @@ describe('server mocks and data fetching', () => {
 
     const request = new Request('/with-request?q=1', { headers: { 'content-type': 'application/json' } })
 
-    expect(await $fetch<unknown>(request)).toMatchObject({ title: 'with-request', data: { q: '1' } })
+    expect(await $fetch(request)).toMatchObject({ title: 'with-request', data: { q: '1' } })
     expect(await fetch(request).then(res => res.json())).toMatchObject({ title: 'with-request', data: { q: '1' } })
 
-    expect(await $fetch<unknown>(request, { method: 'POST', body: [1] })).toMatchObject({ title: 'with-request', data: [1] })
+    expect(await $fetch(request, { method: 'POST', body: [1] })).toMatchObject({ title: 'with-request', data: [1] })
     expect(await fetch(request, { method: 'POST', body: '[1]' }).then(res => res.json())).toMatchObject({ title: 'with-request', data: [1] })
   })
 
+  it('can mock fetch requests with FormData', async () => {
+    registerEndpoint('/with-form-data', {
+      method: 'POST',
+      handler: event => readFormData(event).then(form => [...form.entries()]),
+    })
+
+    const createBody = () => {
+      const form = new FormData()
+      form.append('Name', 'Nuxt')
+      form.append('Message', 'Hello')
+      return form
+    }
+    const expected = [['Name', 'Nuxt'], ['Message', 'Hello']]
+
+    expect(await $fetch('/with-form-data', { method: 'post', body: createBody() })).toEqual(expected)
+    expect(await fetch('/with-form-data', { method: 'post', body: createBody() }).then(res => res.json())).toEqual(expected)
+  })
+
+  it('can mock fetch requests with Blob', async () => {
+    registerEndpoint('/with-blob-data', {
+      method: 'POST',
+      handler: await import('#server/api/forms/blob.post').then(r => r.default),
+    })
+
+    const createBody = () => {
+      return new Blob([Buffer.from('this is blob', 'utf8')], { type: 'text/plain' })
+    }
+    const expected = { body: 'this is blob', contentType: 'text/plain' }
+
+    expect(await $fetch('/with-blob-data', { method: 'post', body: createBody() })).toEqual(expected)
+    expect(await fetch('/with-blob-data', { method: 'post', body: createBody() }).then(res => res.json())).toEqual(expected)
+  })
+
+  it('can mock fetch requests with File', async () => {
+    registerEndpoint('/with-file-data', {
+      method: 'POST',
+      handler: await import('#server/api/forms/blob.post').then(r => r.default),
+    })
+
+    const createBody = () => {
+      return new File([Buffer.from('this is file', 'utf8')], 'hello1.txt', { type: 'text/plain' })
+    }
+    const expected = { body: 'this is file', contentType: 'text/plain' }
+
+    expect(await $fetch('/with-file-data', { method: 'post', body: createBody() })).toEqual(expected)
+    expect(await fetch('/with-file-data', { method: 'post', body: createBody() }).then(res => res.json())).toEqual(expected)
+  })
+
+  it('can mock fetch requests with FormData with files', async () => {
+    registerEndpoint('/with-form-data-with-file', {
+      method: 'POST',
+      handler: await import('#server/api/forms/mutlipart.post').then(r => r.default),
+    })
+
+    const createBody = () => {
+      const form = new FormData()
+      form.append('meta', 'this is meta data')
+      form.append('file', new File([Buffer.from('this is file 1', 'utf8')], 'hello1.txt', { type: 'text/plain' }))
+      form.append('file', new File([Buffer.from('this is file 2', 'utf8')], 'hello2.txt', { type: 'text/plain' }))
+      return form
+    }
+
+    const expected = [
+      { name: 'meta', data: 'this is meta data' },
+      { name: 'file', type: 'text/plain', filename: 'hello1.txt', data: 'this is file 1' },
+      { name: 'file', type: 'text/plain', filename: 'hello2.txt', data: 'this is file 2' },
+    ]
+
+    expect(await $fetch('/with-form-data-with-file', { method: 'post', body: createBody() })).toMatchObject(expected)
+    expect(await fetch('/with-form-data-with-file', { method: 'post', body: createBody() }).then(r => r.json())).toMatchObject(expected)
+  })
+
   it('can mock fetch requests with URL', async () => {
     registerEndpoint('http://localhost:3000/with-url', {
       method: 'GET',
@@ -232,18 +304,18 @@ describe('server mocks and data fetching', () => {
       },
     })
 
-    expect(await fetch<unknown>('/1')).toMatchObject({
+    expect(await fetch('/1')).toMatchObject({
       title: 'title from mocked api1',
       headers: { authorization: 'Bearer <access_token>' },
     })
 
-    expect(await fetch<unknown>('/2')).toMatchObject({
+    expect(await fetch('/2')).toMatchObject({
       title: 'title from mocked api2',
       headers: { authorization: 'Bearer <access_token>' },
     })
 
-    await expect(fetch<unknown>('/error')).rejects.toMatchObject({ status: 500, statusText: 'Mock Server Error' })
-    await expect(fetch<unknown>('/error', { baseURL: '"INVALID"' })).rejects.toThrow()
+    await expect(fetch('/error')).rejects.toMatchObject({ status: 500, statusText: 'Mock Server Error' })
+    await expect(fetch('/error', { baseURL: '"INVALID"' })).rejects.toThrow()
 
     expect(onRequest).toHaveBeenCalledTimes(4)
     expect(onResponse).toHaveBeenCalledTimes(3)
@@ -258,30 +330,30 @@ describe('server mocks and data fetching', () => {
     registerEndpoint('/with-once-options?q=2', { handler: () => '4', once: true })
     registerEndpoint('/with-once-options?q=2', { handler: () => '5', once: true })
 
-    expect(await $fetch<unknown>('/with-once-options?q=1')).toBe('1')
-    expect(await $fetch<unknown>('/with-once-options?q=1')).toBe('2')
-    await expect($fetch<unknown>('/with-once-options?q=1')).rejects.toMatchObject({ status: 404 })
-    expect(await $fetch<unknown>('/with-once-options?q=2')).toBe('5')
-    expect(await $fetch<unknown>('/with-once-options?q=2')).toBe('4')
-    expect(await $fetch<unknown>('/with-once-options?q=2')).toBe('3')
-    await expect($fetch<unknown>('/with-once-options?q=2')).rejects.toMatchObject({ status: 404 })
+    expect(await $fetch('/with-once-options?q=1')).toBe('1')
+    expect(await $fetch('/with-once-options?q=1')).toBe('2')
+    await expect($fetch('/with-once-options?q=1')).rejects.toMatchObject({ status: 404 })
+    expect(await $fetch('/with-once-options?q=2')).toBe('5')
+    expect(await $fetch('/with-once-options?q=2')).toBe('4')
+    expect(await $fetch('/with-once-options?q=2')).toBe('3')
+    await expect($fetch('/with-once-options?q=2')).rejects.toMatchObject({ status: 404 })
   })
 
   it('endpoint priority 1', async () => {
     registerEndpoint('/endpoint/priority/1?q=1', { handler: () => '1' })
     registerEndpoint('/endpoint/priority/1', { handler: () => '2' })
 
-    expect(await $fetch<unknown>('/endpoint/priority/1')).toBe('2')
-    expect(await $fetch<unknown>('/endpoint/priority/1?q=1')).toBe('1')
-    expect(await $fetch<unknown>('/endpoint/priority/1?q=1')).toBe('1')
+    expect(await $fetch('/endpoint/priority/1')).toBe('2')
+    expect(await $fetch('/endpoint/priority/1?q=1')).toBe('1')
+    expect(await $fetch('/endpoint/priority/1?q=1')).toBe('1')
   })
 
   it('endpoint priority 2', async () => {
     registerEndpoint('/endpoint/priority/2', { handler: () => '1' })
     registerEndpoint('/endpoint/priority/2?q=1', { handler: () => '2' })
 
-    expect(await $fetch<unknown>('/endpoint/priority/2')).toBe('1')
-    expect(await $fetch<unknown>('/endpoint/priority/2?q=1')).toBe('1')
-    expect(await $fetch<unknown>('/endpoint/priority/2?q=1')).toBe('1')
+    expect(await $fetch('/endpoint/priority/2')).toBe('1')
+    expect(await $fetch('/endpoint/priority/2?q=1')).toBe('1')
+    expect(await $fetch('/endpoint/priority/2?q=1')).toBe('1')
   })
 })