I often struggle with test strategy decisions. Should I use Vitest and JSDOM for all tests? This would include using the testing library and mocking the entire Vue app for each test. It's much faster than using Playwright with a real browser. But it has some downsides. What's your take on this for a project? How would you balance tests between Vitest and Playwright with an actual browser?
This is also often my struggle when it comes to testing :), despite how many projects I built. For me, I tend to:
Break the logic into testable code (like utilities, composable) and test them without Vue context if possible.
Never write a test just to test the component toBeInDocument() only.
Not use toMatchSnapshot(), instead favoring Playwright's screenshot() for actual visual regression tests.
Depending on the component's nature, such as an isolated component with a minimum of dependency, Vitest + JSDOM + Vue test utils can be good enough. But for component that requires interaction with or controlled by other component, or browser APIs (such as a Cart component whose state is changeable by an Item's action, or a search box whose query state is synchronised with the browser's URL), there is not much point of unit-testing it with Vitest + JSDOM when you still need to do the same in E2E test :).
If a component requires accessibility test, especially behavior test - straight to Playwright + Axecore. No point of checking ARIA attributes in unit test when you can have Axe-core do that for you in the page/view level :).
But really, it all depends on the project's type and what you want to test. If Vitest's browser mode is fully production-ready, I can say we probably won't need JSDOM anymore for independent component testing.
Btw, I did a talk on similar topic on choosing testing strategy when it comes to component testing with Vue Nation a while ago. You can check the video out, or take a look at my slides.
Hope it helps :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I often struggle with test strategy decisions. Should I use Vitest and JSDOM for all tests? This would include using the testing library and mocking the entire Vue app for each test. It's much faster than using Playwright with a real browser. But it has some downsides. What's your take on this for a project? How would you balance tests between Vitest and Playwright with an actual browser?
This is also often my struggle when it comes to testing :), despite how many projects I built. For me, I tend to:
toBeInDocument()only.toMatchSnapshot(), instead favoring Playwright'sscreenshot()for actual visual regression tests.But really, it all depends on the project's type and what you want to test. If Vitest's browser mode is fully production-ready, I can say we probably won't need JSDOM anymore for independent component testing.
Btw, I did a talk on similar topic on choosing testing strategy when it comes to component testing with Vue Nation a while ago. You can check the video out, or take a look at my slides.
Hope it helps :)