Karma puts app styles in front of reporter

Question

I'm trying to do karma test with angular-cli and the app styles I have keep getting in front of the reporter. It's a bit frustrating and I want to be remove the app styles completely.

My current fix is:

app.component.scss

:host /deep/ {
  visibility: hidden;
  pointer-events: none;
}

I don't want to have to visit this sass file and comment/uncomment out these lines of code every time I do npm run test .

How can I remove the app styles so I can see the actual reporter?

A related question I also posted: Question About Dark Theme

Answer 1

My answer to your other question should help: merely include your hide CSS in karma.css as described there. Notably you won't have to edit the original Karma HTML files for this particular functionality.

An extract from that answer:

Karma allows you to add files to its config, which allows insertion of CSS or JS. Source .

 // list of files / patterns to load in the browser files: [ 'karma.css' ] 

These are relative to the config, which would be the root of your project if you use the default setup for Angular.io .