javascript - 使用 React/addons 的 Webpack Karma

Question

我有一个用 Typescript 编写的大型 Angular 应用程序，生成 1:1 的 JS 文件以及从同一服务器加载的外部模块(例如 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: { //...无论你还有什么... 外部:{ 'cheerio': '窗口', ' react /插件':正确， 'react/lib/ExecutionEnvironment':true， ' react /lib/ReactContext':true } }

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

参见this Karma page了解详情。