Unable to use vitest spy within nuxt 3 component methods.

[LorenzoRottigni]

Environment

This is one of the environments i came across the problem:
[11:15:23 AM] Working directory: /Users/lorenzorottigni/Documents/gitlab_private/portfolio.rottigni.tech
[11:15:23 AM] Nuxt project info: (copied to clipboard)

---

• Operating System: Darwin
• Node Version: v18.13.0
• Nuxt Version: 3.9.3
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: vite
• User Config: ssr, debug, srcDir, serverDir, test, app, modules, css, postcss, unocss, tailwindcss, googleFonts, i18n, nitro, pwa, image, delayHydration, extensions, typescript, builder, vite, vue, runtimeConfig, devServer, sourcemap, experimental
• Runtime Modules: @vueuse/[email protected], @nuxtjs/[email protected], @pinia/[email protected], @unocss/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], [email protected], @kevinmarrec/[email protected], @nuxtjs/[email protected], [email protected], [email protected], @nuxt/test-utils/[email protected]
• Build Modules: -

---

[11:15:23 AM] 👉 Report an issue: https://github.com/nuxt/nuxt/issues/new

👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new

👉 Read documentation: https://nuxt.com

Reproduction

The crucial file is MyComponent.spec.ts:
https://stackblitz.com/~/github.com/LorenzoRottigni/nuxt-test-utils-vitest-spy

Describe the bug

I'm currently facing challenges in testing a component method within a Nuxt environment. Specifically, I'm attempting to spy on a component method to test its interactions within template events. Despite researching similar cases online, I've yet to find a clear solution to this issue.

One suggestion I encountered was to define the spy before the component mounts. However, I'm unable to access wrapper.vm before mount time, complicating this approach. Additionally, I experimented with spying on the global injected $fetch method from the 'ofetch' library. Unfortunately, this led to another error regarding the inability to redefine the variable $fetch when attempting variations like:

import OFetch from 'ofetch'
const spy = vi.spyOn(OFetch, '$fetch')
// or
const spy = vi.spyOn(global, '$fetch')
// or
const spy = vi.spyOn({ $fetch }, '$fetch')

It appears that this issue may not be directly tied to the nuxt-test-utils package. Nevertheless, I wanted to bring it to your attention in the hopes that someone might offer guidance or assistance. I'm eager to find a resolution and would appreciate any insights or suggestions you might have.

I'm also considering reporting a similar issue to the vue-test-utils package, as I suspect that this problem might be reproducible outside of the Nuxt environment.

Thank you for your time and assistance.

Additional context

No response

Logs

No response