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

Question

I cannot configure angular-cli + scss + karma to test my components together. Running ng test the kamra unit tests are only including the components' own scss styles.

In order to apply my main styles.scss in tests, I've tried to configure them in karma.conf.js:

files: [ 
  { pattern: './src/test.ts', watched: false },
  { pattern: './src/styles.scss' },   // main scss
  { pattern: './src/test.css' },      // just some test css to see if it is working
]
preprocessors: {
  './src/test.ts': ['@angular/cli'],
  './src/styles.scss': [ '@angular/cli' ]
}

Main scss is still not included during karma tests. But the components own scss and the global css are applied.

How can I make it work?

Answer 1

NO NPM PACKAGE: Angular Way

Add files in the angular.json-file within the stylePreprocessorOptions-property.

projects.your-project-name.architect.build.options and projects.your-project-name.architect.test.options should be the same:

{
  "projects": {
    "your-project-name": {
      "architect": {

        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/styles"
              ]
            },
            ...
          },
          ...
        },

        "test": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/styles"
              ]
            },
            ...
          },
          ...
        },

        ...

      },
      ...
    },
    ...
  },
  ...
}

---

@istibekesi, Angular framework has an angular.json configuration file in which you can add your style paths, so it will be included into the Karma/test build. Therefore it is not needed to install the karma-scss-preprocessor.

I was running into the same problem when importing my variables.scss into the stylesheets of my components (@import 'variables').

Answer 2

Summary

Angular CLI supports all major CSS preprocessors, including sass/scss. Simply generate the project like this and almost everything will work:

ng new sassy-project --style=sass

However, if Karma is also involved, during tests the global scss files are not included. It seems an additional prepocessor is required for karma to process these scss files.

It was very confusing for me, but note there are two similar preprocessors out there. I do not recommend 'karma-sass-preprocessor', it is still available via npm, but the project seems to be deprecated. Use 'karma-scss-preprocessor' instead (karma-scss-preprocessor)

Installation

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

If you installed karma-sass-prepocessor before, first uninstall it by removing from package.json

Configuration

karma.conf.js

module.exports = function (config) {
  config.set({

    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-scss-preprocessor')
    ],

    files: [
      { pattern: './src/test.ts', watched: false },
      { pattern: './src/dummy.scss', watched: true,  included: true, served: true },
      { pattern: './src/styles.scss', watched: true,  included: true, served: true }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli'],
      './src/dummy.scss': ['scss'],
      './src/styles.scss': ['scss']
    },

  });
};