Configuring a Test Environment

[00:00:00]
>> Alex Okrushko: And then I'm going to touch extremely briefly on one more thing that came to us with Angular 21. And this is Vitest testing. For the longest time, Karma was a default test runner for Angular. Personally, in projects that I was involved with Angular, we moved to Jest many, many years ago, probably like, you know, six or seven years ago. We moved off Karma.

[00:00:39]
Karma did its trick. Jest was the next big thing, but Jest has its own disadvantages. Vitest is super fast. It's like really, really great replacement, so I'm going to introduce it very briefly here. So in the source, I'm going to create something that would be our setup file for all of our tests. And this is actually done not only for Vitest but for Karma as well.

[00:01:14]
You typically have the setup file that is run for every test, right, as test setup. And in this test setup, I'm going to do a few things. I'm going to initialize my test bed, right, with a browser's testing mode and platform browser, right? And also before each, it will configure a testing module with the zoneless change detection, because that's what we have by default now.

[00:01:42]
I'm going to add the Vitest config here as well. I'm going to put it all the way at the root. So I'm going to add, let's see, add. Collapse all of these things. All right, new file. And I call it the Vite config. And this is universal through all frameworks. The Vitest config is what Vitest picks up at the top level, and we're going to tell it what exactly it should be running, like how to find the test.

[00:02:21]
And this includes very much universal for all the frameworks. Some frameworks have tests, some frameworks have spec, some have .js, some .ts, and some have .tsx, right? But this, if you want just your tests, you can just do .ts. That's fine. Like that would work. This is like a standard example, and what the environment that I'm choosing right now here would be jsdom.

[00:02:55]
One thing to note is that Angular or Vitest is also very much compatible with Playwright. And I recommend for component tests to use Playwright as well. It is awesome because it can do the real browser. You don't have to, we'll have to patch a few things right now, but you don't have to. You're not limited by jsdom limitations where a lot of things are not patched, right?

[00:03:24]
Jsdom is good for purity test, but it's not the real DOM environment. Playwright can run tests in the real browser like Chromium or whatever, even in the headless mode, so you don't even see the test popping up. You can run those tests in the headless mode. But again, this is beyond today's conversation. There's some testing courses, I'm sure maybe Frontend Masters might be just with Playwright testing as well.

[00:03:56]
All right, so those are some of the things. One thing we need to do is an update JSON file as well. Right now we have our builder test builder. We have the builder, but we don't have, we need to specify that, hey, runner config, this is for Angular, for Angular itself. Vitest knows about it, but we say Angular, by the way, we have this options. And we have the config for the runner.

[00:04:28]
Vitest knows about its config, but Angular would just need to tell, hey, when you do ng test, use Vitest with this config .ts, right? Vitest knows about its config, but Angular would just need to tell, hey, when you do ng test, use Vitest with this config.