usePrimeVue() throws "Error: PrimeVue is not installed!" in tests

[os-tohe]

Describe the bug

I am trying to create component tests for my custom DataTable wrapper, but it throws this error:

Error: PrimeVue is not installed!
 ❯ Proxy.usePrimeVue node_modules/primevue/config/config.cjs.js:161:11
    159|   var PrimeVue = vue.inject(PrimeVueSymbol);
    160|   if (!PrimeVue) {
    161|     throw new Error('PrimeVue is not installed!');
       |           ^
    162|   }
    163|   return PrimeVue;

I am using @vue/test-utils, vitest and happy-dom.

The error is caused by using usePrimeVue(). I am using it in my component in order to set the locale when the component is created.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-issue-template-evz4p2?file=src%2FCustomDataTable.vue

PrimeVue version

3.49.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Open the stackblitz link
2. Run npm run test

Expected behavior

There should be no error when I run a component test on a component, which uses usePrimeVue().

[tugcekucukoglu]

Mocking $primevue could help:

import { config } from '@vue/test-utils';
import { defaultOptions } from 'primevue/config';

config.global.mocks['$primevue'] = {
    config: defaultOptions
};

[os-tohe]

Mocking $primevue could help:

import { config } from '@vue/test-utils';
import { defaultOptions } from 'primevue/config';

config.global.mocks['$primevue'] = {
    config: defaultOptions
};

That does not seem to help: https://stackblitz.com/edit/primevue-create-vue-issue-template-td8rnc?file=src%2FCustomDataTable.test.ts

[pmnzt]

For those who use Nuxt, you may see this erorr if you call the composable in <script> </script> instead of <script setup> </script>. Some of the composable methhods will only run in the browser and not the server, if using the composable or any of its methods shows any errors such as Cannot read properties of undefined (reading 'getElementById'), to resolve the error wrap the code that causes it inside onMonted(() => {}) so that it only execute in the browser.

[tballak]

Any solution? I'm facing the same issue with nuxt.

[zhansdu]

same issue

[tballak]

I managed to fix this with (vitest.setup.ts):

beforeAll(() => {
    ...
    vi.mock('primevue/config', async (importOriginal) => await importOriginal<typeof import('primevue/config')>());

});

[os-tohe]

I managed to fix this with (vitest.setup.ts):

beforeAll(() => {
    ...
    vi.mock('primevue/config', async (importOriginal) => await importOriginal<typeof import('primevue/config')>());

});

That does not seem to work, at least not if I use Column with selection-mode="multiple", then it throws this error:

TypeError: Cannot read properties of undefined (reading 'config')
 ❯ Proxy.headerCheckboxAriaLabel node_modules/src/datatable/HeaderCheckbox.vue:59:35

It can't find this.$primevue which is used in HeaderCheckbox.vue.

[ray007]

I have the same problem with PrimeVue 4.0.7.