00:00 This exercise will take you through the steps you need to have Vitas Browser Mode installed and configured in your project. In fact, let's go through those together. So open your Playground directory and follow along. Let's start by removing the packages that we will no longer need.

00:14 I'm talking about GSDOM of course, because we will replace it with the Browser Mode, but also about React Testing Library. You can still use RTL with the Browser Mode, but you don't have to. RTL has been a huge influence on the testing patterns and testing tools that we have,

00:28 and you will see how that influence manifests itself in Vitas Browser Mode, because it ships a lot of those APIs natively. And also I will remove Testing Library extensions for Matchers, which is just DOM. Okay, now let's install the things we do need.

00:45 Starting from Vitest slash Browser, which is the Browser Mode extension for Vitest. And now we need the package to render our React components in tests. You see, the Browser Mode feature is not specific to any front-end framework. You could use it just as well with things like Vue as well, but we will be testing React components in this workshop,

01:04 so we need a package that's able to render React in the browser. There is a package from Vitas called Vitas Browser React. And I will install those dependencies as dev dependencies, which is not a big difference when you build in applications, but this is just some differentiation that I personally like to do.

01:21 Now we have all the dependencies we need, but there is still one more step remaining. We need to tell Vitas to actually use the Browser Mode and configure the browser instances that we need for our tests. Let's do just that.

01:34 First, head to your VitConfig or VitestConfig and remove the Environment.js DOM, because we will be using the Browser Mode. To enable the Browser Mode in Vitas, provide BrowserEnabled equal true. This will tell Vitas to use the Browser Mode for your tests. Now you need to set up the browser instances that you will be using in your test.

01:53 Vitas allows you to spawn multiple browsers if you need, for example, if you want to test certain behaviors across different browsers. We will start simple and provide a single browser instance in this instances array and a browser called Chromium, because this is what we're going to use for our automation today.

02:10 And now the only thing that remains is to fix the type annotations. Remember, we uninstalled those from React Testing Library, so now we need to use the ones provided by Vitas. I will go to our test file first. Now we'll remove this TestingLibrary.jsDOM.vitas, because this is no longer present.

02:26 And instead, I will add those types on the TypeScript level in the TypeScript config for tests, tsconfig.test.json. I will go to Compiler Options and its Types key, and I will add the type annotations for our DOM matchers, like to be in the document or to be visible, from the vitas-browser-matchers file.

02:45 And that's it. That concludes the installation and the setup of Vitas Browser Mode.