Bug: The execution order of `watch` is different from that of the browser

[jevin98]

Describe the bug

Clone repo.
Run pnpm test
The result is

1
1
2
3
1
2
3

Run pnpm dev In the browser, click button 1 and button 2 in sequence, and get the following sequence

1
3
1
2
3
1
2

Reproduction

https://github.com/jevin98/vue-test-utils-watch-demo

Expected behavior

Environment

 System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12500
    Memory: 6.48 GB / 31.69 GB

Additional context

[cexbrayat]

Hi @jevin98

Can you clarify what you're expecting? Your test is manually mounting a wrapper component, with the watcher declared in the test, whereas your App has the watcher in the component, so I'm not surprised the execution order is different.

What is the real issue you're encountering?

[jevin98]

I am glad to get your reply. @cexbrayat

What is the reason for the different execution order here?
In the test case, I simulated the manual operation in the browser. Shouldn't the order of log printing be consistent here?

For example, when I click button 1 in the browser, it will print 3 first and then print 1, 2 in Test component.
But in the test case, I also simulated the above browsing, but it printed 1, 2 in Test component first, and then 3

[cexbrayat]

watchers timing are tied to where they are declared (there is a small explanation in the docs https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing). As the watcher in your test is not tied to a component, I suppose its timing is different, that's why I'm not really surprised you're not seeing the same execution order. VTU is doing anything special with watchers, so I doubt it can be solved.

To be honest, I wouldn't rely on this in tests: if you want to have a robust unit tests, you should interact with your rendered component and check if the template is properly displayed. All this timing considerations will then be inconsequential.

[jevin98]

Indeed, this is the problem with my use of watch. watch should be placed inside the entire mount component. Thanks again for your reply.