1

Typescript で記述された大規模な Angular アプリがあり、JS ファイルを 1:1 で生成し、さらに同じサーバーからロードされた瞬間や React などの外部モジュールを使用しています。依存関係は RequireJS によって処理されます。

正常に機能する基本的な Angular Karma テストをいくつか追加しました。これは、テストを Karma にロードするために微調整された RequireJS 構成の複製を使用します。

現在、いくつかの React コンポーネントをテストしようとしていますが、その過程で Webpack に移行しています。そのため、Webpack を使用するように Karma 構成を変更し、npm を使用して外部依存関係をインストールしました。これを機能させるために一日中費やしましたが、私のセットアップで機能する解決策が見つかりません。

カルマ.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

これをどのように設定すればよいですか？

4

2 に答える 2

-2

最初の問題は次のとおりです。

「 Typescriptで記述された大規模なAngularアプリがあり、 JS ファイルを 1:1 で生成し、 momentやReactなどの外部モジュールを同じサーバーからロードしました。依存関係はRequireJSによって処理されます。」

于 2016-11-01T20:54:55.007 に答える