Post

Haz
@haz.dev

Ariakit has hundreds of component tests duplicated across happy-dom and Playwright. happy-dom is 6× faster, so humans and agents use it for quick feedback during dev. Playwright is authoritative and runs once when each task is complete. This setup has sped up development. Highly recommend it.

0 reposts14 likes

Haz
@haz.dev

Worth noting that we use @⁠ariakit⁠/⁠test, which provides user event methods and works around many happy-dom quirks. We can reliably reproduce browser behavior in most cases.

npmjs.comnpmjs.com
Artem Zakharchenko
@kettanaito.com

I recommend migrating from pure Playwright to Vitest Browser Mode. Components shouldn't need multi-page setups so Playwright is largely an overkill. With Vitest, you'lll be able to run the same test file against happy-dom and real browser, which is huge.

Haz
@haz.dev

We may try that at some point, but we're not just testing components. We're also testing our examples, which cover all the use cases. Some involve page navigation and broader page context beyond the component itself.

Artem Zakharchenko
@kettanaito.com

Got it. Yes, for things needing page navigation and deeper browser integrations, Playwright is still the best choice. For anything rest, migration to Vitest will be something you won't regret.

Artem Zakharchenko
@kettanaito.com

We're using this test setup for Interceptors in MSW where we need behavior compliance across Node.js and the browser. One test file, two environments via Vitest projects. Saves us a ton of space and time for 1000+ tests.