00:00 First, let's talk about why our component appears unstyled in tests. If you take a look at how we render it, we render this FilePreview component in isolation. And by itself, this component and its module doesn't have any CSS file references.

00:14 Instead, it gets its styles from this index.css file, which gets imported at the root of our application in main.dsx. Now we don't want to render the entire root of our app in component tests. That would defeat the whole purpose. So instead, we want to add the static assets we need, like styles, next to the component

00:34 tests. There's actually two ways that we can solve this. First, you already know that our test files run in the browser. So what we can do, we can just import that CSS file over here. This will trigger Vite to process it and serve it during the test run.

00:48 This works really well if you want some static assets that are specific to this test suite. But in our case, we want to apply the style consistently to all component tests, no exception. And for that, we're going to use a global browser setup.

01:02 Go to the root of your app and create a new file called vitest.browser.setup.ts. The exact naming doesn't really matter here. This will be the file that Vitest will evaluate before the entire test run. And this is precisely where we want to import our CSS. So let's do that.

01:19 Let's import srcindex.css. As it is now, there are two problems with this setup. First, this file is a new TypeScript module, and none of our existing TypeScript configurations know how to handle it. TypeScript simply doesn't know what types should be available in the context of this module.

01:37 But we plan to run this module in the browser, the same as our tests. So let's head to our TypeScript configuration for tests, tsconfig.test.json, and add this new file in the include array, vitest.browser.setup.ts. And the second problem is that TypeScript doesn't know what is the resulting type of importing a CSS module.

01:56 To help it know that, let's actually rely on Vite. So if you take a look at this src directory, because this is a Vite app, we have this vite-environment.d.ts file, and it includes type reference to vite-slash-client. These are the types that allow Vite to import a bunch of assets, including CSS files.

02:14 So let's rely on the same types, but instead not the direct reference to vite-slash-client, but to this vite-environment.d.ts file to stay consistent. So let's add a type reference with triple-slash reference types. Let's provide a path. It will be src vite-environment.d.ts.

02:34 This will make the consistent type behavior between our tests and between our production application. And if you're not using Vite for your apps, you can simply reference the same vite-slash-client types as you just saw before. Now that that's done, the only thing remaining is to tell Vite to use this file, to actually run it as a part of our test run.

02:53 To do that, let's head to our Vite's configuration. In our case, it will be vite.config.ts. Find the browser instance we need, so this Chromium browser, and add a new property called setup files. I will assign an array to it and provide the path to this vite-browser.setup.ts file, our global setup.

03:11 You may notice that although this is a global browser setup, we are using the setup files property and not the global setup property. There's actually the difference between the two. The global setup will act very similarly, but it will apply the modules you provide to the node.js part of Vite. Remember that layer of context when you run browser tests?

03:31 So global setup is the global setup for node.js part, but the setup files will apply also globally only to the browser side, which is exactly what we want. So let's leave setup files. And now the only thing that's left is to verify that our setup is working.

03:46 Let's open the terminal and run our browser tests, npm test. And you can see that our component here is styled as it is in production, which is incredible. I highly encourage you to utilize the power of global setup for things like shared assets

04:01 like CSS or maybe other things that all of your components will need during the test. But also take advantage of the files, your test files running in the browser. So if you need some assets specific to the test suite, just import them there.