Migrate to Vitest Browser Mode

[maxpatiiuk]

Priority impact

p - medium

Unstable Tests

Follow up on #11262 (comment)

With migration to Lumina, Calcite switched from Jest to Vitest. However, we are still using Puppeteer.
Vitest browser mode has recently been released as experimental. It offers better developer experience as tests run in the browser (vs puppeteer approach where tests run in node.js and actions are proxied in the dom).
This means tests are able to use the native DOM API and access objects from the browser easily, and synchronously. However, it does mean that a different API needs to be used - given the number of tests Calcite has, this would likely require writing a small codemod.

Benefits of migration:

• better developer experience
• tests run in the browser, which is closer to how components are actually used, thus tests are more faithful
• performance should be faster, since there is no overhead of communication with the browser for each DOM change
• tests should get more stable. at present, some flakiness occurs because Node.js keeps a copy of the browser DOM, and syncs it with the browser after every change - despite this, it can still get out of date
• easy access to DOM APIs and dom libraries (in exchange for making access to node.js APIs harder, but not impossible)

Note, while vitest browser mode is gaining features rapidly, it is still marked as experimental. Similarly, Storybook has integration with Vitest browser mode to permit using stories as templates in tests, however, this integration is still in active development for web components. Thus, Calcite team can wait till Vitest browser mode is marked as stable before doing the switch.

[DitwanP]

Revisit milestone assignment after vitest is out of experimental mode.