Intro to Vitest for Vue Developers: Testing in the Age of AI

Hello everybody and welcome to the course. I bet the reason you're here is because you or your AI agent have written some code that has come back and bitten you in the butt in one way or another. Don't worry, it happens to us all, but you're in the right place. e.

bugs that crop up from things that were already working in the past from happening to you. again, or at least minimizing how often they happen. So maybe you've even started writing some unit tests, just the little small ones on pure functions here and there, because you see the value within automated testing. But then you get to actually testing your full view application and you run into some complexities that unit tests alone fail to address.

Things like components that speak with browser APIs or even your own REST APIs over the network layer. which have to speak to a database and maybe have some kind of authentication and authorization in place to protect certain resources and data. Complexities that unit tests alone simply aren't built to test. That's why we've created this course.

So what can you expect to learn? First, we'll talk about why testing still absolutely matters and in fact matters even more in the age of AI. Second, we'll talk about why Vtest is the right tool for your automated testing suite if you're a Vue developer. Third, we'll talk about the tools that Vtest gives you and the different parts of your app that each of those tools complement.

Unit tests, component tests, browser mode for real browser APIs, visual regression testing, and more. Fourth, we'll also get clear on what kind of tests belong where. That way you're not writing a slow into intest for something a focused unit test would catch in half a second. Then we'll get to the real skill.

That is application architecture that is optimized for automated testing. How do you slice a full-stack view app into layers? UI, client logic, platform, network, backend, database, so on and so forth. And how to make clear seams and contracts between those layers to make testing almost boring.

but in a good way. Throughout this entire process, we'll treat tests as part of the harness that keeps AI agents honest, not as an afterthought bolted on after the agent ships a PR, but as a loop the agent runs after every change. Finally, there will be lots of code to look at in this course. But very, very importantly, I want to make sure that you know We will not be spending time on the nitty gritty details of the syntax of that code.

So we'll be skipping a project and testing setup. You can go and read the VTest docs for yourself or have your AI agent do that. We will not be diving into the VTest internals or how the runner works under the hood. Yeah, sure, that's useful for contributors, but it's certainly not the bottleneck for shipping trustworthy view apps.

and we're not going to do an exhaustive tour of the vtest syntax. You will see the APIs that we end up needing within context, but if you want a reference manual, the docs are better at that than I am. So why are we going about it this way? Well, because syntax changes, frameworks evolve, but the judgment to architecture application in a way that makes it easily testable is a skill that will last forever.

So... Let's get ready to learn VTest for Vue in the age of AI.