webpack css-loader doesn't work as expected with karma

Question

I'm using css-loader Local Scope feature, and having a bit trouble with it. I'm writing a directive for Vue.js. This directive is importing a scss file and using the exported classes created by the loader to assign it to some elements the directive is creating. This works when I build for prod/dev, but when I build for test it doesn't work. I import my directive file, and I test one of the directive functions by creating a dom element using jQuery, and then assign it the class the css-loader exported. I use karma for testing, so when I launch the karma server in my browser to debug the test, I see the elements are assigned the classes, but they have no styling whatsoever. I am suspecting my webpack config for my test environment is at fault. This is my webpack config for my test environment:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint'
      }
    ],
    loaders: [
      {
        test: /.json$/,
        loader: 'json'
      },
      {
        test: /\.(css|scss)$/,
        loaders: ExtractTextPlugin.extract({
          fallbackLoader: 'style',
          loader: 'css!sass!postcss'
        })
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /.vue$/,
        loader: 'vue'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ],
  vue: {
    loaders: {
      sass: ExtractTextPlugin.extract("css!sass")
    }
  },
  debug: true,
  devtool: 'source-map'
};

And then I use it with karma config file:

const conf = require('./gulp.conf');

module.exports = function (config) {
  const configuration = {
    basePath: '../',
    singleRun: false,
    autoWatch: true,
    logLevel: 'INFO',
    junitReporter: {
      outputDir: 'test-reports'
    },
    browsers: [
      'PhantomJS'
    ],
    frameworks: [
      'jasmine'
    ],
    files: [
      'node_modules/es6-shim/es6-shim.js',
      conf.path.src('app.spec.js')
    ],
    preprocessors: {
      [conf.path.src('app.spec.js')]: [
        'webpack'
      ]
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },
    webpack: require('./webpack-test.conf'),
    webpackMiddleware: {
      noInfo: true
    },
    plugins: [
      require('karma-jasmine'),
      require('karma-junit-reporter'),
      require('karma-coverage'),
      require('karma-phantomjs-launcher'),
      require('karma-phantomjs-shim'),
      require('karma-webpack')
    ]
  };

  config.set(configuration);
};

Here's my directive, importing the scss file:

import classes from '../../css/directives/tooltip.scss';

const TOOLTIP_CLASS = classes.tooltip;
const TOOLTIP_ARROW_CLASS = classes.arrow;

And then I use it in my test to assign the classes for test created dom elements:

...
const $arrow = $(document.createElement('span'));
$arrow.addClass(TooltipRewireAPI.__get__('TOOLTIP_ARROW_CLASS'));
...

So the classes are assigned, but I don't see any style.css like specified in the ExtractTextPlugin of webpack with my styles, and no styles are actually applied to my test created dom elements. Anyone got an idea what have I done wrong?

Answer 1

Apparently not supported. I used style loader instead for my tests.