How to add styles .css files from .angular-cli.json into karma unit test

Question

I'm using ag-grid v.17 and in order for it to show the grid correctly, I had to import ag-grid .css in .angular-cli.json, but when I'm creating a testBed in karma unit test, how can I add those css files?

styles I added in .angular-cli.json

  "styles": [
    "styles/app.scss",
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/ag-theme-balham.css",
    "../node_modules/ag-grid/dist/styles/compiled-icons.css"
  ],

Answer 1

You can add it inside your karma.config.js file

files: [
  "../node_modules/ag-grid/dist/styles/ag-grid.css",
  "../node_modules/ag-grid/dist/styles/ag-theme-balham.css",
  "../node_modules/ag-grid/dist/styles/compiled-icons.css",
  { pattern: './src/app.scss', watched: true,  included: true, served: true }
],
preprocessors: {
  './src/styles.scss': ['scss']
},

You might also have to add preprocessors for karma

npm install karma-scss-preprocessor node-sass --save-dev

Reference: How to configure Karma to include global scss files for an angular-cli project?

Another reference: Angular 4 Karma Loading CSS in Unit Testing