Global helpers from plugins not available in test context

[yschroe]

Environment

Working directory: /home/projects/github-shtgaydv nuxi 17:57:03
Nuxt project info: nuxi 17:57:03

---

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.15.3
• CLI Version: 3.20.0
• Nitro Version: 2.10.4
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools, compatibilityDate
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-shtgaydv

Describe the bug

Hello,

first of all I am not sure if this is a bug or if I did something wrong in configuring my tests or if this just normal behaviour.

I run into the problem that global variables ($<something>) provided via plugins are not available in the nuxt test context. I have a simple component, that uses the example function from the docs $hello('world') in the template section and the test fails with the error TypeError: _ctx.$hello is not a function.

I can fix this by providing $hello via a global mock to the options of mountSuspended, but I was under the impression that @nuxt/test-utils should provide the same context to vitest as when I run the nuxt app normally via the dev server.

This also affects modules like dayjs-nuxt for which I need to mock the $dayjs() function. A mock does not need to be provided for all modules though, e.g. the $t() function of @nuxt/i18n works without mocking it. Why is this the case?

MyComponent.spec.ts

// @vitest-environment nuxt
import { describe, it } from 'vitest';
import { mountSuspended } from '@nuxt/test-utils/runtime';
import MyComponent from '../components/MyComponent.vue';

describe('my test', () => {
  it('Should render the component', async () => {
    /* ❌ Fails with '_ctx.$hello is not a function' */
    const wrapper = await mountSuspended(MyComponent);

    /* ✅ Does only work with mocked $hello. */
    // const wrapper = await mountSuspended(MyComponent, {
    //   global: { mocks: { $hello: (msg: string) => `Hello ${msg}!` } },
    // });
  });
});

plugins/hello

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`,
    },
  };
});

MyComponent.vue

<template>
  <div>
    {{ $hello('world') }}
  </div>
</template>

Additional context

There are similar issues reported here for when the function is provided via a Symbol but I did not find anything regarding this exact problem and error message.

Logs

[yunyuyuan]

same problem, all providers just don't work.

[paulmelero]

I added a reproduction here: #1314