Our Vitest is configured and running, but if you take a closer look at the tested component on the page, it seems kind of off:
Well, that's because it has no styles! The CSS file that contains the styles for this component is imported all the way in main.tsx, which isn't rendered as a part of this test:
render(<FilePreview file={...} />)That's quite an oversight. Styling is important, not only to see the UI as the user would see it, but also because improper styles can lead to inaccessible elements in the DOM.
I think this is a great problem for you to fix!
👨💼 In this exercise, you will create a custom browser setup file that will run as a global setup for all component tests.
🐨 First, create a vitest.browser.setup.ts file. In that file, import any assets you wish to apply to all tests (e.g. ./src/index.css).
🐨 Enable TypeScript for the new file by adding it to the include array in tsconfig.test.json.
Once you do all this, you will spot that the *.css imports fail to resolve in TypeScript.
Cannot find module './src/index.css' or its corresponding type declarations.ts(2307)🐨 To fix this, we need to pull in some of the Vite built-in type definitions to help us. At the top of the vitest.browser.setup.ts file, add the following type reference comment:
/// <reference path="./src/vite-env.d.ts" />Lastly, provide the path to the setup file in vite.config.ts as the setupFiles value of a concrete browser instance (follow the instructions in the configuration file for more details).
Once you have it ready, run the tests again to see the <FilePreview /> component reclaim its striking visuals ✨.