@ariperkkio.dev
@vitest.dev Core Team • Open Source @chromatic.com • github.com/AriPerkkio
@ariperkkio.devThis Thursday we'll be discussing about Visual Regression Testing using @vitest.dev and @chromatic.com. Join me and @kylegach.com to hear how you can get VRT that's stable across your whole team, not just on your local machine. 📸
@ariperkkio.devMaybe worth to mention for inspiration if you end up building something for your case: ~6 years ago I built a tool for eslint plugins to do exactly this. It allows custom eslint plugins to test themselves against ~10K Github repos (or as many as they can in 6 hours) and see if they work as expected.
@chromatic.comReposted by @ariperkkio.devChromatic for @vitest.dev Browser Mode is live. 🧪📸
Browser Mode runs your component tests in a real browser. Now Chromatic checks how those components look by capturing the rendered UI.
No new screenshot assertions. No second suite to maintain. 🧵 (1/4)
@ariperkkio.devYes. I'm not a fan of forking widely used projects like this. Instead I would like the whole ecosystem to contribute in one shared project like the original istanbuljs repository. But this time forking was the only choice as istanbuljs has zero maintenance at this point.
@ariperkkio.devYes, definitely! We are already thinking about modernizing the most-used "html" reporter with features like dark mode and Vitest color theme. Feel free to open issues in github.com/vitest-dev/i...
@ariperkkio.devThe @vitest/istanbuljs fork is now ready and will ship in the next version of Vitest. Compared to the original istanbuljs packages it's ESM-only, ships its own typings, drops unnecessary runtime deps, and moves Node 8→22, Babel 7→8 (lib-instrument), React→Preact (html-spa reporter), and more!
@ariperkkio.devYeah it might cause unexpected changes in visual testing. Though same issue will happen with the "playwright install chromium" too. I've had so bad experience trying to setup stable visual testing infra myself that I just gave up on that approach many years ago. Now I'd recommend Chromatic+Vitest 🤝
@ariperkkio.devYes definitely. For projects that don't target specific browser versions it should be enough. If you are testing how some specific browser version works, a typical "playwright install chromium" might not be good option either.
@ariperkkio.devYes! Apparently Ubuntu has had it pre-installed for a while. I've wasted so much CI time and energy installing chromium over and over again.
@ariperkkio.devTIL when running Vitest browser mode (or plain Playwright) on Github Actions on Ubuntu, you can skip the slow "playwright install chromium" step completely by providing channel option. This makes Playwright use the pre-installed Chrome. So many projects out there that could speed their CIs with this
@43081j.comReposted by @ariperkkio.devis the distributed code readable? yes - don't ship a sourcemap. no - make the distributed code readable.
@chromatic.comReposted by @ariperkkio.devGet first access to our @vitest.dev plugin, which adds Chromatic’s visual testing and review to your browser tests. It’s built by @ariperkkio.dev, a Vitest core maintainer.
It’s free to use while in beta and requires no changes to your test files.
Read on for more info 🧵
@ariperkkio.devAnd it's open source! github.com/chromaui/chr...
@ariperkkio.devBuilding this integration has been amazing opportunity to dogfood all APIs we've added into @vitest.dev in past years. It's using features like new Reporter APIs, Vitest plugin hooks, browser commands, CDP, test tags and much more! Vitest is definitely one of the most extensible JS tools out there.
@ariperkkio.devIf you've published a package using staged publishing before this fix, all that's needed now is to re-publish the same package and @npmx.dev will display the trusted publishing label again 🤝
@ariperkkio.devWhich coverage metrics do you find the most useful? Which ones would be good defaults for typical users? JS coverage ecosystem relies on defaults that were set ~12 years ago. Modern tools could break the cycle, but changing this old defaults is scary.
@chromatic.comReposted by @ariperkkio.devWe’re launching early access for Vitest visual testing with Chromatic! ⚡️
Built with @vitest.dev core maintainer ariperkkio.dev, Chromatic adds visual testing to the browser tests you already write. 🧵 (1/4)
@ariperkkio.devTesting terminal output is hard. Especially in cases that involve clearing screen partially while maintaining stable log output elsewhere on screen. With ansivision it's possible to simulate what output all the ansi codes would render visually in real terminal. No need to use heavy node-pty anymore.
@ariperkkio.devThanks, it works! We can finally test Vitest's fast-updating SummaryReporter with this! I always thought it would be too difficult to simulate terminal's behaviour, but this library does it perfectly 💯 Also found one edge-case bug in Vitest while setting this up. 🙃
@ariperkkio.devSo writing on multiple cursor positions on a single line causes multiple frames? We use synchronized updates to define what is a frame.
