fix(runtime): allow registerEndpoint to work with $fetch.create (#1403)

Author: MikeBellika

examples/app-vitest/components/TestFetchComponent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+async function normalFetcher() {
+  const fetcher = $fetch.create({})
+  await fetcher('/test1/')
+}
+
+async function customFetcher() {
+  const fetcher = $fetch.create({
+    onRequest() {},
+  })
+  await fetcher('/test2/')
+}
+</script>
+
+<template>
+  <div>
+    <button
+      id="normal-fetcher"
+      @click="normalFetcher"
+    >
+      normal fetch
+    </button>
+    <button
+      id="custom-fetcher"
+      @click="customFetcher"
+    >
+      custom fetch
+    </button>
+  </div>
+</template>

examples/app-vitest/test/registerEndpoint.nuxt.spec.ts

@@ -0,0 +1,31 @@
+import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
+import { it, expect, vi, describe } from 'vitest'
+import TestFetchComponent from '../components/TestFetchComponent.vue'
+
+describe('registerEndpoint tests', () => {
+  it('/test1/ called WITHOUT onRequest intercepted', async () => {
+    const endpoint = vi.fn(() => '')
+    registerEndpoint('/test1/', () => endpoint())
+    const component = await mountSuspended(TestFetchComponent)
+
+    component
+      .find<HTMLButtonElement>('#normal-fetcher')
+      .element.click()
+
+    expect(endpoint).toHaveBeenCalled()
+    component.unmount()
+  })
+
+  it('/test2/ called WITH onRequest intercepted', async () => {
+    const endpoint = vi.fn(() => '')
+    registerEndpoint('/test2/', () => endpoint())
+    const component = await mountSuspended(TestFetchComponent)
+
+    component
+      .find<HTMLButtonElement>('#custom-fetcher')
+      .element.click()
+
+    expect(endpoint).toHaveBeenCalled()
+    component.unmount()
+  })
+})

src/runtime/shared/environment.ts

@@ -74,6 +74,11 @@ export async function setupWindow(win: NuxtWindow, environmentOptions: { nuxt: N
   // @ts-expect-error fetch types differ slightly
   win.$fetch = createFetch({ fetch: win.fetch, Headers: win.Headers })
 
+  // @ts-expect-error fetch types differ slightly
+  win.$fetch.create = (options = {}) => {
+    return createFetch({ fetch: win.fetch, Headers: win.Headers, ...options })
+  }
+
   win.__registry = registry
   win.__app = h3App