Невозможно запустить карму, получая ошибки, связанные с ```extract-text-webpack-plugin```

Question

Когда я запускаю карму, я получаю следующую ошибку:

"extract-text-webpack-plugin" loader is used without the corresponding plugin

Эта проблема возникает после того, как я импортировал некоторые стили из библиотеки.

Он попытался добавить "extract-text-webpack-plugin" в мой файл package.json. и импортировать то же самое в моем test.js файл:

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

environment.plugins.get('Manifest').opts.writeToFileEmit = process.env.NODE_ENV !== 'test'
environment.loaders.append('istanbul-instrumenter', {
  test: /\.(js|jsx)$/,
  exclude: [/node_modules/, /test/],
  loader: 'istanbul-instrumenter-loader',
  query: {
    esModules: true
  }
})

environment.loaders.append({
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
})

/* optional */
module.exports = environment.toWebpackConfig()

как показано в https://github.com/webpack-contrib/extract-text-webpack-plugin

мой karma.conf.js файл:

const webpack = require('webpack')
const webpackConfig = require('./webpack/test.js')
// process.env.PHANTOMJS_BIN = './../node_modules/.bin/phantomjs'

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

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      {pattern: './../test/javascript/tests.webpack.js', watched: true}
    ],

    // list of files to exclude
    exclude: [
      './../node_modules/'
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './../test/javascript/tests.webpack.js': ['webpack', 'sourcemap']
    },

    webpack: {
      devtool: 'inline-source-map',
      module: webpackConfig.module,
      resolve: webpackConfig.resolve,
      externals: {
        'react/addons': true,
        'react/lib/ReactContext': true,
        'react-addons-test-utils': true,
        'react/lib/ExecutionEnvironment': true
      }
    },

    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'html', 'coverage'],
    htmlReporter: {
      outputFile: './../reports/karma_test_results.html',
      // Optional
      pageTitle: 'Unit Tests',
      subPageTitle: 'A sample project description',
      groupSuites: true,
      useCompactStyle: true,
      useLegacyStyle: true
    },
    coverageReporter: {
      dir: '../reports/coverage/karma/',
      subdir: '.',
      check: {
        global: {
          statements: 88,
          branches: 81,
          functions: 86,
          lines: 89,
          excludes: []
        }
      }
      // Would output the results into: .'../reports/coverage/'
    },

    webpackMiddleware: {
      noInfo: true // please don't spam the console when running in karma!
    },
    plugins: [
      'karma-sourcemap-loader',
      'karma-htmlfile-reporter',
      'karma-jasmine',
      'karma-coverage',
      'karma-chrome-launcher',
      'karma-webpack',
      'karma-ievms',
      'istanbul-instrumenter-loader'
    ],
    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['ChromeHeadless'],
    customLaunchers: {
      ChromeHeadless: {
        base: 'Chrome',
        flags: [
          '--disable-gpu',
          '--headless',
          '--no-sandbox',
          '--remote-debugging-port=9222'
        ]
      }
    },

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

мой webpacker.yml файл:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .erb
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: 0.0.0.0
    port: 5080
    public: 0.0.0.0:5080
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default
  public_output_path: cals/packs

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

Запустить все мои тесты.