1

我有一个用 Typescript 编写的大型 Angular 应用程序，生成 JS 文件 1:1 加上外部模块，例如从同一服务器加载的 moment 和 React。依赖项由 RequireJS 处理。

我们添加了一些运行良好的基本 Angular Karma 测试。这使用了一个重复的 RequireJS 配置来将测试加载到 Karma 中。

现在我正在尝试测试一些 React 组件并在此过程中转移到 Webpack。因此，我修改了 Karma 配置以使用 Webpack 并使用 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

1

如果您使用的是 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 } }

如果您不使用 Enzyme，这可能仍然是一种解决方案（至少是react/addons部分解决方案）。

有关详细信息，请参阅此业力页面。

于 2016-11-01T20:36:53.847 回答
-2

这是你的第一个问题：

“我有一个用Typescript编写的大型Angular应用程序，生成 JS 文件 1:1加上外部模块，例如从同一服务器加载的moment和React。依赖项由RequireJS处理。”

于 2016-11-01T20:54:55.007 回答