nuxt/test-utils

Provides with Symbol not available to rendered component

lucasecdb opened this issue · 5 comments

Environment

  • Operating System: Darwin
  • Node Version: v20.11.0
  • Nuxt Version: 3.10.0
  • CLI Version: 3.10.0
  • Nitro Version: 2.8.1
  • Package Manager: pnpm@8.14.2
  • Builder: -
  • User Config: modules, imports, typescript
  • Runtime Modules: @nuxt/test-utils/module@3.11.0
  • Build Modules: -

Reproduction

https://github.com/lucasecdb/nuxt-context-error-repro

Describe the bug

Provided value in plugin does not reach the component when using a Symbol() as key.

You can check the behavior by running pnpm test in the MRE. If you run the app using pnpm start and go to http://localhost:3006 you can see the "hello world" string correctly.

image

image

Additional context

No response

Logs

No response

@lucasecdb

Got the same issue when using vuetify.

Vuetify is using a Symbol internally. Running a test for component which is using a Vuetify Component, the test fails with the following error:

Error: [Vuetify] Could not find defaults instance

Here is a small reproduction repo: https://stackblitz.com/edit/nuxt-starter-7jgbwx?file=vitest.config.ts

FYI @danielroe

I just had a deeper look into this.

I've added a couple of breakpoints and ran vitest.

Here are a couple of findings:

  1. All Plugins are available within Init Phase (initApp and setup() of nuxt-root)
Screenshot 2024-02-16 at 18 30 26
  1. Plugins seem to be available within setup function of actual component being tested / mounted.
Screenshot 2024-02-16 at 18 31 06
  1. Within the actual inject (vue runtime-core) instance.parent.provides is an empty object. Therefore injection fails / throws.
Screenshot 2024-02-16 at 18 32 23
  1. I also found that within createApp of vue-test-utils's mounting process provides is also on empty object.
Screenshot 2024-02-16 at 18 53 10

I hope this is helpful on finding the cause of this issue. For now i have to go back to @vue/test-utils.

This is probably a regression from #726

Thank you for this quick response. Also just found this comment within the examples plugin

// TODO: investigate why `Symbol()` export without global registry doesn't match

https://github.com/nuxt/test-utils/blob/main/examples/app-vitest-full/plugins/inject-value.ts#L1

I came up with the ad-hoc solution. Sorry if you already know this.
https://github.com/lucasecdb/nuxt-context-error-repro/pull/1/files

This solution intends that the imported symbol always become same value.