PR Issue: Return Clean Attribute Selector for Node Environments

[K3TH3R]

Describe the bug

I've run into an issue when trying to do snapshot testing with my components using PrimeVue in our unit tests. We use XState for all of our state management, which means our Vue components are almost all "dumb" components that only render specific states based on the props provided to them. This makes them really easy to unit test because all we're testing is basic interactions and their rendering which we capture via the snapshot testing.

However, we've started integrating PrimeVue into our app rebuild, and our snapshot tests are now becoming flakey because of this $attrSelector in the beforeCreate(). Depending on the run order of the unit tests in Vitest, which can vary between runs because of it's multi-threading capabilities, this attribute selector can be a different number on every single run:

We essentially can't use snapshot testing with PrimeVue components unless we manually mock every PrimeVue component when they're used (which is very tedious) or shallowRender every component which is doable but isn't actually an option if you're using Vue Testing Library because they don't provide shallow render capabilities.

Primarily opening this issue in order to provide documentation for the PR I'm about to open.

Reproducer

N/A

PrimeVue version

4.2.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[tugcekucukoglu]

Cannot replicate it. Could you share a reproducer link?

[K3TH3R]

@tugcekucukoglu Here's the reproduction details:

1. git clone git@github.com:K3TH3R/ts-issue-starter-template.git
2. cd ts-issue-starter-template && git checkout primevue-unit-test-issue && yarn install
3. yarn app1:test --watch and the tests should pass as expected.
4. Open up apps/app1/src/app/App.spec.ts in your text editor

Isolating Tests Breaks Snapshots

If you change this line on line 40:

it('renders properly #3', async () => {

to

it.only('renders properly #3', async () => {

You'll see that the snapshot tests start failing with something like this:

Prepending Tests Breaks Snapshots

Uncomment the lines 14-25 and you'll see that adding new unit tests with snapshots in it breaks any snapshots that come after the new test.

I may have been mistaken about the run order/multithreading being the cause of the problem in my first message. However, it's still problematic that if I try to work on a single test in isolation, or add a new test anywhere but at the end of the file, that I start getting snapshot failures.

[tugcekucukoglu]

Thanks for the explanations. When this #6895 issue is solved the problem will be solved. Please track #6895