primevue
primevue copied to clipboard
v4: `TypeError: Theme__default.default.setPreset is not a function` when configuring theme configuration using `definePreset` in vitest tests
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
- Open the attached stackblitz
- Potentially stop the execution using Ctrl+C in the terminal
- Run
npm test
in the terminal to "execute" the test
This shows the error.
- Now, comment out the
definePreset(...)
row and thetheme.preset
property - 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.