Unable to use vitest spy within nuxt 3 component methods.

LorenzoRottigni commented 7 months ago

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: yarn@1.22.21
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/nuxt@10.7.2, @nuxtjs/tailwindcss@6.10.4, @pinia/nuxt@0.5.1, @unocss/nuxt@0.58.3, @nuxtjs/i18n@8.0.0, @nuxt/image@1.3.0, nuxt-jsonld@2.0.8, @kevinmarrec/nuxt-pwa@0.17.0, @nuxtjs/google-fonts@3.1.3, nuxt-calendly@0.1.18, nuxt-delay-hydration@1.3.3, @nuxt/test-utils/module@3.10.0
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

then3rdman commented 4 months ago

Bumping this as it seems to have been complete forgotten but is still and issue. Just like the OP I have found no working way to actually ,spy on user defined component methods...

LorenzoRottigni commented 4 months ago

It definitely require additional developments

nuxt / test-utils