Bug: incomplete rendering

[hzhoup]

Describe the bug

test file like:

it('xxx', async () => {
  const wrapper = mount(() => <Button />)

  expect(wrapper.attributes('role')).toBe('button')
})

at the Button.vue there is a computed property to bind some attributes, this is true in browser, but the expect is false, that is undefined.

must call wrapper.vm$nextTick() to make expect to be true.

why? only called wrapper.vm$nextTick()?

To Reproduce

Expected behavior

consistent with the browser

Related information:

"@vue/test-utils": "^2.4.1" "jsdom": "^22.1.0" "vitest": "^0.34.2" "vue": "^3.3.4"

Additional context

try debug, i think it's because first render the computed property depend on some state is null/undefined resulting in the need to recalculate.

what can i do to make the test consistent with the browser.

can you tell me the reason behind this? thanks.

[cexbrayat]

I think this is expected, but it's hard to say without more info.

Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

It only takes a few minutes, and we'll be able to take a look.

[hzhoup]

yes, this is expected, that is mini link https://stackblitz.com/edit/github-jun3n8?file=src%2Fcomponents%2FHelloWorld.vue,src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts

my doubt is if i have computed property like this, i can only call await wrapper.vm$nextTick()?

[hzhoup]

maybe my code is not good, what's better to realize, thanks

[cexbrayat]

If I run npm run test:unit in your repro, the test does not work (even after adding the missing import). Can you try to simplify the repro as much as possible (there are a lot of unrelated things in the component) and make the test succeed with nextTick?

[hzhoup]

sorry, that is can run link: https://stackblitz.com/edit/github-jun3n8?file=src%2Fcomponents%2FHelloWorld.vue,src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts

[cexbrayat]

OK so you have a computed properties that depends on a template ref and the other computed property that depends on the first one, so it is expected that you have to call nextTick for your computed properties to be actually computed. (note that you can call await nextTick() directly, as Vue exports nextTick).

If you rewrite getBindValue to not depend on tagname but rather to depend on your prop as then both tests succeeds.

Anyway this is not an issue with VTU as far as I can see, and the behavior is expected.