Our team is working on a large Vue.js application with TypeScript and Vite. We have about 50 frontend developers working on this project.
Right now we use Vitest with Testing Library and JSDom for our tests. The unit tests work fine but integration testing is not great. The fake environment makes it hard to test complex user interactions and we can’t test CSS properly.
We also want to be able to see our tests running visually when debugging issues.
I used Cypress component testing at my old job and it worked okay. I think testing components in isolation helps write better code.
But we don’t want to use Cypress at our company. We need something else that can:
Run tests in real browsers like Chrome and Firefox
Mock API calls so tests are isolated
Has good module mocking features
Can run with a UI or headless
Uses familiar syntax like Playwright or Testing Library
I found these options:
Playwright Component Testing
Still experimental after years. Has what we need but not sure how well it works with Vue.
Vitest Browser Mode
Also experimental. I tried it quickly but the UI feels basic and incomplete.
Storybook Testing
Making a story for every test seems like too much work. We already use Storybook for visual testing but worried about slow build times. Their mocking setup is also complicated.
Has anyone used these tools with a big team? How did it affect your workflow?
we switched from Cypress to Playwright component testing last year, and it’s been super solid, even being experimental. Vue integration is great, and our 40-person team hasn’t run into major issues. browser support is top-notch, and API mocking is way better than what we had before.
Used Vitest Browser Mode with a 30-person team for 8 months. The UI’s rough around the edges, but testing itself is solid after setup. Browser environment fixed our CSS and DOM issues we had with JSDom. Module mocking works just like regular Vitest - no learning curve. Don’t let the “experimental” tag fool you, it’s stable for daily use. Hit some config issues with Vite plugins but nothing major. Performance’s good in headless mode, though visual mode slows down with big test suites.
Had this exact same decision 6 months ago with our 45-dev team. We went with Storybook Testing despite worrying about the overhead - turned out way better than expected. Yeah, writing stories takes time up front, but the visual docs alongside tests have been amazing for component reviews and getting new devs up to speed. Build times are definitely an issue though. We had to optimize our config and use selective story loading to keep it reasonable. Mocking setup’s complex at first, but once you get your patterns down it’s pretty routine. Unexpected bonus: writing stories made us think about edge cases we’d totally miss with regular unit tests. The visual regression testing caught several CSS bugs that would’ve hit production. If your team’s already heavy on Storybook, the tooling integration makes debugging way smoother than jumping between different frameworks.