Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
sceee opened this issue May 4, 2024 · 1 comment
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@sceee
Copy link

sceee commented May 4, 2024

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 sceee added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 4, 2024
@mertsincan mertsincan added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels May 14, 2024
@mertsincan mertsincan added this to the 4.0.0-beta.3 milestone May 14, 2024
@mertsincan mertsincan self-assigned this May 14, 2024
@mertsincan
Copy link
Member

Fixed for the next version. Also, I added the following line for test-utils error;

export default defineConfig({
  test: {

    globals: true,
    environment: "jsdom",
  },
...
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants