Webpackカルマ、反応/アドオンを使用

Question

私は大型アングルアプリをTypescriptで書いて、JSファイルを1：1に加え、瞬間やReactなどの外部モジュールを同じサーバからロードしました。依存関係はRequireJSによって処理されます。

正常に動作したいくつかの基本的な角度カルマテストを追加しました。これは、テストをカルマにロードするために調整された重複したRequireJS設定を使用します。

今、Reactコンポーネントをテストしようとしていますが、その過程で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一部）であるかもしれません。

詳細はthis Karma pageを参照してください。とがロードされたに反応1つのプラス外部モジュールな瞬間として：

「私は大っぽい角度アプリは1は、JSファイルを生成する活字体で書かれてあります。

Answer 2

は、ここにあなたの最初の問題です依存関係はRequireJSによって処理されます。