karma-webpack無法找到模塊「反應」

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 

如果你想看看我的任何其他文件，您可以訪問回購的當前分支在這裏：

​​

感謝您提供任何幫助！ 克里斯

Answer 1

更改您的resolve從

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

到

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

Answer 2

OK，我想我得到了這個工作。我認爲我的問題是太多的預處理器，但我其實並不確定。這是我現在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正常構建，只是通過業力。