primevue icon indicating copy to clipboard operation
primevue copied to clipboard

v4: `TypeError: Theme__default.default.setPreset is not a function` when configuring theme configuration using `definePreset` in vitest tests

Open sceee opened this issue 9 months ago • 0 comments

Describe the bug

When configuring the PrimeVue Plugin for tests in vitest using config.global.plugins like this:

import { config } from '@vue/test-utils';
import PrimeVue from 'primevue/config';
import { definePreset } from 'primevue/themes';
import Aura from 'primevue/themes/aura';

export const ThemePreset = definePreset(Aura, {});

config.global.plugins = [
  [
    PrimeVue,
    {
      theme: {
        preset: ThemePreset,
        options: {
          prefix: 'p',
        },
      },
    },
  ],
];

...it's not possible to set a theme that is created using definePreset as it throws the following error when executing the tests:

TypeError: Theme__default.default.setPreset is not a function
 ❯ Proxy.definePreset node_modules/primevue/themes/actions/index.cjs.js:13:29
 ❯ eval src/__tests__/vitest-setup.ts:9:43
      9|   [
     10|     PrimeVue,
     11|     {
       |   ^
     12|       theme: {
     13|         preset: ThemePreset,

Sidenote: If you omit the PrimeVue configuration object completely in the config.global.plugins (just include PrimeVue without options there) like this:

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

config.global.plugins = [
  [
    PrimeVue,
  ],
];

...you will receive a lot of Vue warnings when executing tests like this:

[Vue warn]: Invalid watch source:  undefined A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template-2u1dct?file=src%2FApp.vue

PrimeVue version

4.0.0-beta.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

n/a

Steps to reproduce the behavior

  1. Open the attached stackblitz
  2. Potentially stop the execution using Ctrl+C in the terminal
  3. Run npm test in the terminal to "execute" the test

This shows the error.

  1. Now, comment out the definePreset(...) row and the theme.preset property
  2. Execute npm test again

Now the error does no longer appear and the test executes (actually it fails with a document is not defined error but that's probably caused by stackblitz - when executing it in a local project on a real machine, it works).

Background info: When trying to debug into this, I guess this has something to do with the cjs.js files being used when executing vitest but I am not sure. It seems that Theme__default["default"].setPreset(newPreset); is being called in primevue/themes/actions/index.cjs.js l13 and Theme__default["default"] does not have a setPreset() defined.

Expected behavior

It's possible to use the same PrimeVue vue plugin options (= the same theme configuration) for vitest tests as used for the "production" app.

sceee avatar May 04 '24 20:05 sceee