karma-webpack 找不到模块“反应”

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
  })
}

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

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

感谢您提供的任何帮助！ -克里斯

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 进行正常构建时，我没有得到这个，只是通过业力。