Webpack Karma使用react / addons

Question

我有一個在Typescript中編寫的大型Angular應用程序，生成JS文件1：1以及外部模塊，例如moment和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

如果您使用Enzyme，可能會發生這種情況，Enzyme使用一些惰性的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部分）。

有關詳細信息，請參閱此Karma頁面 。

Answer 2

這是你的第一個問題：

“我有一個在Typescript中編寫的大型Angular應用程序，生成JS文件1：1 以及外部模塊，例如moment和React加載到同一台服務器上。依賴關系由RequireJS處理。”