[updated - primevue v4] InputText fail to render in tests

[Juraci]

Describe the bug

All component tests that render PrimeVue InputText component fail with the following error

Reproducer

https://codesandbox.io/p/devbox/primevue-test-bug-6qd7qq?file=%2Fsrc%2F__tests__%2FApp.spec.js%3A12%2C1

Just run

npm run test:unit

PrimeVue version

4

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Here are the steps to create a minimal vue app that reproduces the bug

1. use npm create vue@3 to create a minimal project selecting the following options

✔ Project name: … prime-vue-vitest-bug ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit Testing? … No / Yes ✔ Add an End-to-End Testing Solution? › No ✔ Add ESLint for code quality? … No / Yes

2. Should end up with the following packages after installing prime-vue and primeicons

{
  "name": "prime-vue-bug",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test:unit": "vitest"
  },
  "dependencies": {
    "vue": "^3.2.47",
    "primeicons": "^6.0.1",
    "primevue": "3.28.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.1",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/test-utils": "^2.3.2",
    "jsdom": "^22.0.0",
    "vite": "^4.3.4",
    "vitest": "^0.31.0"
  }
}

3. Configure main.js as follows

import { createApp } from 'vue'
import PrimeVue from 'primevue/config';
import App from './App.vue'

// PrimeVue
import 'primevue/resources/themes/md-dark-indigo/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';

const app = createApp(App)
app.use(PrimeVue);

app.mount('#app')

3 Use the Card component on App.vue as follows

<script setup>
import Card from 'primevue/card';
</script>

<template>
  <Card>
    <template #title> My title </template>
    <template #content> My Description </template>
  </Card>
</template>

<style scoped></style>

4. Create a very basic vitest for it as follows

   
   import { describe, it, expect } from 'vitest'

import { mount } from '@vue/test-utils' import App from '../App.vue'

describe('App', () => { it('renders properly', () => { const wrapper = mount(App) expect(wrapper.text()).toContain('My title') }) })

Actual

FAIL src/tests/App.spec.js > App > renders properly TypeError: Cannot read properties of undefined (reading 'config') ❯ Proxy.getPTValue node_modules/primevue/basecomponent/basecomponent.cjs.js:21:69 ❯ Proxy.ptm node_modules/primevue/basecomponent/basecomponent.cjs.js:27:25 ❯ Proxy.render node_modules/primevue/card/card.cjs.js:16:111 14| 15| function render(_ctx, _cache, $props, $setup, $data, $options) { 16| return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "p-card p-component" }, _ctx.ptm('root')), [ | ^ 17| (_ctx.$slots.header) 18| ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ ❯ renderComponentRoot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:906:44 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5587:57 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25 ❯ instance.update node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5701:56 ❯ setupRenderEffect node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5715:9 ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5497:9 ❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5455:17

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Test Files 1 failed (1) Tests 1 failed (1) Start at 11:04:49 Duration 832ms (transform 77ms, setup 0ms, collect 109ms, tests 18ms, environment 312ms, prepare 109ms)

screenshot of the same issue
![screenshot_20230507_110844](https://user-images.githubusercontent.com/2266929/236682554-c35a0648-6a79-4031-8b71-d0d3a432309d.png)

### Expected behavior

Expected: Vitest should pass (as it was passing prior to  version `3.28.0`)

[felixzapata]

I have the same problem. My tests worked with the 3.27.0 version.

[felixzapata]

in some of my tests, I fixed temporarily these errors by making a stub of the primevue components:

global: {
        plugins: [
          createTestingPinia({ createSpy: vi.fn() }),
          i18n,
        ],
        directives: {
          tooltip: Tooltip,
        },
        stubs: {
          Skeleton: true,
        },
      },

[Juraci]

Managed to create a codesandbox.io that reproduces the issue here

changing primeVue version to 3.27.0 or earlier makes the spec pass.

[bahadirsofuoglu]

Hi, you can try using PrimeVue components as stubs. It doesn't need to be included in unit tests in your project. It is expected to have already been tested.

[dariusznurzynski]

Hi @bahadirsofuoglu What when user want to update/upgrade packages and check if everything works correctly? Stubbing here will show nothing and catch possible problems using vitest will be not possible. Should i use cypress then?

It would be nice to could use real components in mounting for tests.

[bahadirsofuoglu]

There was no such problem in previous versions. Some changes are needed with new features. Our major features are nearing completion. We will then update the tests.

[fskarmeta]

up !

[fskarmeta]

It's completely valid to not want to stub this components, you could have logic inside the component template. How is this closed?

[bahadirsofuoglu]

It's completely valid to not want to stub this components, you could have logic inside the component template. How is this closed?

You are completely correct. A considerable feature has arrived (unstyled + pass through). We are now trying to fix the problem that comes with these features. Stub is a temporary solution. Prevents you from getting errors until this issue in tests is fixed. But I know I didn't explain the situation well enough. A related issue will be opened and a link will be given here.

[bahadirsofuoglu]

While investigating the issue, shallowMount can also be utilized to prevent encountering errors.

[lol768]

FWIW, the inability to be able to do a full mount of our application components, including children PrimeVue components, is one of the reasons we unfortunately ultimately decided not to go with PrimeVue in a commercial project I am currently working on. I think this is quite an unfortunate regression in supported functionality, and shallowMount doesn't allow us to properly perform integration tests on our components.

Hopefully this is something that can be addressed fully in the near future.

[Juraci]

FWIW, the inability to be able to do a full mount of our application components, including children PrimeVue components, is one of the reasons we unfortunately ultimately decided not to go with PrimeVue in a commercial project I am currently working on. I think this is quite an unfortunate regression in supported functionality, and shallowMount doesn't allow us to properly perform integration tests on our components.

Hopefully this is something that can be addressed fully in the near future.

Exactly, in the project I work on integration tests with full mount are a must have, and being unable to do it due to a regression bug introduced in a regular package upgrade is unacceptable.

[bahadirsofuoglu]

I bypassed the error given in the example by adding the PrimeVue config globally. We are working on permanent solutions and will support this with a more detailed example. I am sharing the example below. I hope that will be useful.

https://codesandbox.io/p/sandbox/primevue-test-bug-forked-gfrnzw?file=%2Fpackage.json%3A15%2C5

[robokozo]

Ran into a similar problem

TypeError: Cannot read properties of undefined (reading 'unstyled')
 ❯ Proxy.isUnstyled node_modules/primevue/basecomponent/basecomponent.cjs.js:249:73
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:182:19
 ❯ ComputedRefImpl.get value [as value] node_modules/@vue/reactivity/dist/reactivity.cjs.js:1143:33
 ❯ Object.get [as isUnstyled] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3399:22
 ❯ Object.get node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2925:19
 ❯ getter node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3508:90
 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:32
 ❯ ReactiveEffect.getter [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1689:22
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:182:19
 ❯ job node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1745:31

@bahadirsofuoglu your suggestion serves as a good band aid. I just have to update hundreds of tests now :(

[bahadirsofuoglu]

Ran into a similar problem

TypeError: Cannot read properties of undefined (reading 'unstyled')
 ❯ Proxy.isUnstyled node_modules/primevue/basecomponent/basecomponent.cjs.js:249:73
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:182:19
 ❯ ComputedRefImpl.get value [as value] node_modules/@vue/reactivity/dist/reactivity.cjs.js:1143:33
 ❯ Object.get [as isUnstyled] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3399:22
 ❯ Object.get node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2925:19
 ❯ getter node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3508:90
 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:32
 ❯ ReactiveEffect.getter [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1689:22
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:182:19
 ❯ job node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1745:31

@bahadirsofuoglu your suggestion serves as a good band aid. I just have to update hundreds of tests now :(

We have merged this PR. The issue will be resolved in the new version. https://github.com/primefaces/primevue/issues/4360