Angular unit testing: How to serve css files now in karma with angular 6+

Question

I wanna have material css in my specs. Before I had it like this in karma config:

files: [
   // make sure material styles are served
   { pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', watched: true, included: true, served: true },

   { pattern: './src/test.ts', watched: false }
]

But new projects don't have a files property anymore in karma config.

I tried adding it in angular.json but it doesnt work:

"test": {
      ...
      "options": {
        "main": "src/test.ts",
        ...
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "src/styles.scss"
        ],

Any idea how to do it now?

score 1 · Answer 1 · answered Sep 05 '18 at 12:57

1

Nevermind, path was wrong This works (karma config):

files: [
  // make sure angular material styles are served
  { pattern: '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css', watched: true, included: true, served: true },
]

answered Sep 05 '18 at 12:57

fr00t

681
1
4
19

score 1 · Answer 2 · answered Nov 05 '18 at 21:52

My files where being served out of the full path of the url. http://localhost:9876/Users/david/myapp/src/test/data/pages/table.html

the solution is to access your files with the word "base" in the url

http://localhost:9876/base/test/data/pages/table.html

  files: [{pattern: 'test/data/pages/**.html', watched: true, served: true, included: false, nocache: true}]

Angular unit testing: How to serve css files now in karma with angular 6+

2 Answers2