Calendar: [Vue warn]: Property "`$primevue`" was accessed during render but is not defined on instance.

[raymondDoanAtPropertyMe]

Describe the bug

Hey PrimeVue team, I have been using the PrimeVue library for the past few months and have been loving it so far! Keep up the great work!

On the issue and potentially silly question - TL;DR: Has something changed in the way that the :pt props work? If so, would you kindly be able to point me in the right direction to find the documentation? (unfortunately I was not able to find it in the changelogs or the issue tracker that specifically talked about this)

Long version:

After upgrading from v3.38.1 to latest (v3.49.1) in order to use the Calendar component, I am experiencing the following error when running vitest (v0.34.6) and vue/test-utils (v2.4.1) against it:

[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.

followed by:

TypeError: Cannot set properties of undefined (setting 'value')
 ❯ Proxy.mounted ../node_modules/primevue/calendar/calendar.cjs.js:383:24
 ❯ ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2669:88
 ❯ callWithErrorHandling ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18
 ❯ callWithAsyncErrorHandling ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:164:17
 ❯ Array.hook.__weh.hook.__weh ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2649:19
 ❯ flushPostFlushCbs ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:321:41
 ❯ render ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6291:5
 ❯ mount ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3814:13
 ❯ Object.app.mount ../node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1379:19
 ❯ Module.mount ../node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs:8319:18

I was able to pinpoint to the use of the pt prop as being the issue as this same error was experienced across other components where the same pt prop was passed. My current workaround is to use global.plugins (https://test-utils.vuejs.org/api/#global) pass in the PrimeVue config (see below) but it does not seem ideal given as the project and unit tests will start expanding and using these same components.

mount(Calendar, {
  global: {
    plugins: [PrimeVue]
  },
  props: { ... }
}

Reproducer

https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template-gckfjy

Run npm test

PrimeVue version

3.49.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 122

Steps to reproduce the behavior

1. Add a component with pt as a prop (ie. Calendar, Checkbox, InputText)
2. Pass values in the pt prop
3. Add a test using vitest and vue/test-utils
4. Add a script in package.json

"test": "vitest"

5. Run the test using npm run test

Expected behavior

No warning or error preventing the test from executing

[tugcekucukoglu]

Mocking $primevue could help:

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

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

[ebisbe]

Just to add to @tugcekucukoglu comment. Ideally add that into a setup file to reuse the code better:

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      setupFiles: 'vitest.setup.ts',
    },
  }),
)

[raymondDoanAtPropertyMe]

Thanks guys. I will give these a shot and see how it goes.

Flagging this issue as closed now.