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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!