Webpack Карма с использованием реакции / аддонов

Question

У меня есть большое приложение Angular, написанное на Typescript, которое генерирует JS-файлы 1:1 плюс внешние модули, такие как Motion и React, загруженные с одного и того же сервера. Зависимости обрабатываются RequireJS.

Мы добавили несколько базовых тестов Angular Karma, которые отлично работали. При этом используется дублированный конфиг RequireJS, настроенный для загрузки тестов в Karma.

Сейчас я пытаюсь протестировать некоторые компоненты React и в процессе перехожу на Webpack. Итак, я изменил конфигурацию Karma для использования Webpack и установил внешние зависимости, используя npm. Я потратил весь день, пытаясь заставить это работать, но я не могу найти решение, которое работает для моей установки.

karma.conf.js

var path = require('path');

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', 'requirejs'],

        // list of files / patterns to load in the browser
        files: [
            'ng/*.js',
            'ng/**/*.js',
            'ng/**/tests/*.spec.js'


        ],


        // list of files to exclude
        exclude: [
                'app.js', // Old requirejs config
           ],


        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
            '*.js': ['webpack', 'sourcemap'],
            'ng/**/*.js': ['webpack', 'sourcemap'],
            'partials/**/*.html': ['ng-html2js']
        },


   webpack: { //kind of a copy of your webpack config
      devtool: 'inline-source-map', //just do inline source maps instead of the default
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel',
            exclude: path.resolve(__dirname, 'node_modules'),
            query: {
              presets: ['airbnb']
            }
          },
          {
            test: /\.json$/,
            loader: 'json',
          },
          {
            test: /\.ts$/,
            loader: 'typescript',
          },
        ],
      },

      externals: {
        'react': true,
        'react/addons': true,
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': true
      }
    },

    webpackServer: {
      noInfo: true //please don't spam the console when running in karma!
    },


        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress'],


        // 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: ['PhantomJS',
                   'Chrome'
                ],

        plugins: [
             'karma-webpack',
             'karma-sourcemap-loader',
             'karma-requirejs',
             'karma-ng-html2js-preprocessor',

             //'karma-firefox-launcher',
             'karma-chrome-launcher',
             'karma-phantomjs-launcher',
             'karma-jasmine'
        ],

    babelPreprocessor: {
      options: {
        presets: ['airbnb']
      }
    },

        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false,

        // Concurrency level
        // how many browser should be started simultanous
        concurrency: Infinity,

    });
};

Вот что я получаю:

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  ReferenceError: Can't find variable: react
  at /vagrant/app/media/website/js/ng/chartApp.js:48060 <- webpack:/external "react/addons":1:0

Как мне это настроить?

Answer 1

Это может произойти, если вы используете фермент, который использует ленивый require() призывает поддерживать совместимость с React 0.13 и 0.14, поэтому Webpack не связывает их.

Если это так, поместите это в свой karma.config.js:

webpack: { // ...whatever else you have... externals: { 'cheerio': 'window', 'react/addons': true, 'react/lib/ExecutionEnvironment': true, 'react/lib/ReactContext': true } }

Если вы не используете фермент, это может быть решением (по крайней мере, react/addons часть).

Смотрите эту страницу кармы для деталей.

Answer 2

Вот ваша первая проблема:

"У меня большое приложение Angular, написанное на Typescript, которое генерирует JS-файлы 1:1 плюс внешние модули, такие как Motion и React, загруженные с одного и того же сервера. Зависимости обрабатываются RequireJS".