karma-webpack找不到模块“react”

Question

我一直试图把使用karma和react的非常简单的演示放在一起，并最终为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
  })
}

当我运行karma时，我得到以下错误：

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的当前分支：

https://github.com/watzthisco/tdd-react-es6/tree/lab18

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

Answer 1

将您的resolve从

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

至

resolve: {
  modulesDirectories: [
    'node_modules'
  ],
  extensions: ['', '.json', '.js']
},

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一起做一个普通的构建时，我不会得到这个，只是通过因果报应。