Question

我一直试图将非常简单的使用业力和反应的演示放在一起，并最终为React编写测试，但我在过去的10个小时里一直被困住了，我希望有人之前遇到过这个问题，并且可以告诉我一些愚蠢的小事我错过了或不理解。

这是我的karma.conf.js：

// Karma configuration
// Generated on Sun Apr 10 2016 10:10:34 GMT-0700 (PDT)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    resolve: {
      extensions: ['', '.js', '.jsx','.ts']
    },
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['commonjs','jasmine'],


    // list of files / patterns to load in the browser
    files: [
      // only specify one entry point
      // and require all tests in there
      //'node_modules/babel-polyfill/browser.js',
      //'node_modules/react/react.js',
      'test_index.js'
    ],

    // list of files to exclude
    exclude: [
    ],

    preprocessors: {
      'node_modules/react/react.js':['babel','commonjs'],
      'src/**/*.js':['babel','commonjs'],
      'spec/**/*.js':['babel','commonjs'],
      'test_index.js': ['babel','commonjs','webpack']
    },

    babelPreprocessor: {
      options: {
        presets: ['es2015','react']
      }
    },




    webpack: {
      module : {
        loaders: [ {
          loader : 'babel-loader',
          query: {
            presets: ['es2015','react']
          }
        }
        ]
      }
    },

    webpackMiddleware: {
      // webpack-dev-middleware configuration
      // i. e.
      noInfo: true
    },

    // 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: false,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: [],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

当我做业力运行时，我收到以下错误：

Chrome 49.0.2623 (Mac OS X 10.10.5) ERROR
  Uncaught Error: Could not find module 'react' from '/Users/chris/web-projects/project-template/src/scripts/app.js'
  at /Users/chris/web-projects/project-template/node_modules/karma-commonjs/client/commonjs_bridge.js:85

如果您想查看我的其他任何文件，可以在此处访问repo的当前分支：

感谢您提供的任何帮助！ -Chris

Answer 1

从

更改

     qi::phrase_parse(it, str.end(), g, ascii::space, v) && it == str.end())

resolve

到

resolve: {
  extensions: ['', '.js', '.jsx','.ts']
},

Answer 2

好的，我认为我的工作正常。我认为我的问题是预处理器太多了，但实际上我并不确定。这是我的karma.conf.js现在：

// Karma configuration
// Generated on Sun Apr 10 2016 10:10:34 GMT-0700 (PDT)

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'],


    // list of files / patterns to load in the browser
    files: [
      // only specify one entry point
      // and require all tests in there
      //'node_modules/babel-polyfill/browser.js',
      //'node_modules/react/react.js',
      'test_index.js'
    ],

    // list of files to exclude
    exclude: [
    ],

    preprocessors: {
      'src/**/*.js':['babel','webpack'],
      'spec/**/*.js':['babel','webpack'],
      'test_index.js': ['babel','webpack']
    },

    babelPreprocessor: {
      options: {
        presets: ['es2015','react']
      }
    },

    webpack: {
      module : {
        loaders: [ {
          loader : 'babel-loader',
          query: {
            presets: ['es2015','react']
          }
        }
        ]
      }

    },

    webpackMiddleware: {
      // webpack-dev-middleware configuration
      // i. e.
      noInfo: true
    },

    // 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: false,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: [],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

现在加载模块很好，但现在告诉我：

未捕获的不变违规：_registerComponent（...）：目标容器不是DOM元素。

当我使用webpack进行正常构建时，我没有得到这个，只是通过业力。

karma-webpack找不到模块＆＃39;反应＆＃39;

2 个答案: