Setup Global CSS Properties for Cypress Component Tests
Importing styles is going to be essential for all of our components to render properly. We will do this similarly as we do in our application - at top level. component.ts file is the proper file for this, as this is the one that gets loaded before running our specs. Importing our index.css file here will make all of our components render with the correct styles.
Instructor: [0:00] Our index.css file is going to be important for all of our component tests. Instead of importing it like this into every file, we can import it globally. A good place for that would be inside our Cypress project and inside the component.ts file. [0:20] Here, we have defined our custom command for mounting our components and this is where everything global should be. I'm going to import that CSS file in here, but I need to define the correct path.
[0:35] Of course, I could use the relative path to that, but since we are in TypeScript, I can define my paths in tsconfig file so that anything maps to @/ is going to be mapped to the src folder. This means that inside my component.ts file, I can just go @/index.css, and it's going to work. Now, when I save both of my tests, I can see that everything is still unchanged, and my component looks the way it should.