Clever Geek Handbook

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

I cannot setup angular-cli + scss + karma to test my components. When executing ng test

, the kamra block tests include only native scss styles.

To apply my main styles.scss in tests, I tried to set them up in the karma.conf.js file:

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' ]
}

Basic scss is still not included during karma tests. But native scss and global css are used.

How can I get it to work?

+4


source to share


5 answers


Summary

Angular CLI supports all major CSS preprocessors including sass / scss. Just create a project like this and almost everything will work:

ng new sassy-project --style=sass

However, if karma is also involved, the global scss files are not included during the tests. It seems an additional framework is needed to handle these scss files.

This was very confusing for me, but note that there are two similar preprocessors. I don't recommend it 'karma-sass-preprocessor'

, it's still available via npm, but the project seems to be outdated. Use 'karma-scss-preprocessor'

( karma-scss-preprocessor ) instead

Installation



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

If you have already installed karma-sass-prepocessor, first remove it by removing it 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']
    },

  });
};
+13


source


The configuration scss

is karma

done as follows:

module.exports = function(config) {
  config.set({
    files: [
      {
        pattern: 'scss/**/*.scss',
        watched: true,
        included: false,
        served: true
      },
      'test/unit-sass.css'
    ],
    preprocessors: {
      'scss/**/*.scss': ['sass']
    },
    sassPreprocessor: {
      source: 'scss/*.scss',
      createSourceMaps: true,
      outputDir:  __dirname + '/test/',
      outputFile: 'unit-sass.css'
    }    
  });
};

  • The easiest way is to save karma-sass-preprocessor

    as devDependency

    in package.json

    .

    {"devDependencies": {"karma": "~ 0.10", "karma-sass-preprocessor": "~ 0.0.1"}}

  • You can simply do this:

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

However, it is sass-preprocessor

not worth the time and is not really a best practice, as the code in the question should already work, which will be explained below.



So at the end of the chat discussion, we finally figured out what was missing, which was pretty silly:

required ('karma-scs-preprocessor')

This was missing in the code itself, and it finally managed to fix the problem! Hope this can help any future users looking at this answer :)

+2


source


The (simple) angular way

@istibekesi, Angular Framework has an angular.json config file where you can add your style paths so that it will be included in the Karma / test build. Moreover, there is no need to install karma-scss-preprocessor

.

I faced the same problem while importing my variables. Scss to my components stylesheets ( @import 'variables'

).

Answer: Add global file paths to angular.json

To include your global scss files in your karma build, you must add these file paths stylePreprocessorOptions

in your angular.json file.

projects.your-project-name.architect.build.options

and projects.your-project-name.architect.test.options

must match:

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

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

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

        ...

      },
      ...
    },
    ...
  },
  ...
}
+2


source


Angular CLI already uses node-sass

if you configure it to use sass. Therefore, there is no need to install it again:

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

should be enough. Also, you don't have multiple versions of node-sass in your project.

The rest of @istibekesi's solution works like a charm.

+1


source


If you are using Bootstrap-sass you should describe karma.conf.js

preprocessors : {
  './src/test.ts': [ '@angular/cli' ],
  './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss': [ 'scss' ],
  './src/*.scss': [ 'scss' ]
},

It is important that the write order is loaded faster than your file.

0


source






More articles:


All Articles