2017-07-07 119 views
1

我想让我的第一个JS单元测试与Karma和Jasmin。我正在测试一个反应应用程序。在karma.conf.js中忽略了babel webpack配置?

我使用“karma init”生成了karma配置并对其进行了修改,请参阅下面的karma.config.js karma.config.js中需要webpack.config,但babel加载程序完全被忽略,为什么? 我注意到它被忽略,因为它导致错误的未定义变量,等等...... 当在karma.config.js(复制/粘贴)中直接添加部分webpack.config.js,它的工作原理,但不是我想要什么,因为我像我的装载机和别名等复制代码...如何解决这个问题?请参阅下面也webpack.config.js

的karma.config.js:

module.exports = function (config) { 
    config.set({ 
     // base path that will be used to resolve all patterns (eg. files, exclude) 
     basePath: 'src/js/', 
     frameworks: ['jasmine'], 
     files: [ 
      'tests/*.test.js', 
     ], 
     preprocessors: { 
      '**/tests/*.test.js': ['webpack', 'sourcemap'], 
     }, 

     webpack: require("../webpack.conf.js"), 
     webpackMiddleware: { 
      stats: "errors-only" 
     }, 
     reporters: ['progress'], 
     port: 9876, 
     colors: true, 
     logLevel: config.LOG_INFO, 
     autoWatch: true, 
     browsers: ['PhantomJS'], 
     phantomJsLauncher: {exitOnResourceError: true}, 
     singleRun: false, 
     concurrency: Infinity 
    }) 
}; 

的webpack.config.js:

module.exports = function (env) { 
    if (env !== undefined) { 
     let analyse = !!env.analyse; 
     console.log("Analyse?: " + analyse); 
     if (analyse) { 
      plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'static'})); 
     } 
    } 

    return { 
     entry: { 
      entry: ['./src/entry.js', './src/js/utils.js'], 
     }, 
     devtool: devTool, 
     devServer: devServer, 
     output: { 
      path: __dirname + '/dist', 
      filename: '[name]-[hash].cache.js', // it contains the name ".cache", that is used in the webserver config. 
      sourceMapFilename: '[name]-[hash].cache.js.map', 
     }, 
     module: { 
      rules: [ 
       { // The Babel loader: 
        test: /(\.jsx|\.js)$/, 
        exclude: /(node_modules|bower_components)/, 
        use: [{ 
         loader: 'babel-loader', 
         options: { 
          presets: ['babel-preset-es2015', 'babel-preset-react'].map(require.resolve), 
          plugins: ['babel-plugin-transform-react-jsx-img-import'].map(require.resolve) // It will convert the used images to to "require" statements such that it's used by a loader below. 
         } 
        }] 
       }, 
       { 
        test: /\.s?css$/, 
        use: ['style-loader', 'css-loader', 'sass-loader'] 
       }, 
       { 
        test: /\.(png|gif|jpe?g)$/, 
        use: [{ 
         loader: 'file-loader', 
         options: { 
          name: 'resources/images/[name]-[hash]-cache.[ext]' 
         } 
        }] 
       }, 
       { 
        test: /\.(otf|svg|eot|ttf|woff2?)(\?.*$|$)/, 
        use: [{ 
         loader: 'file-loader', 
         options: { 
          name: 'resources/fonts/[name]-[hash]-cache.[ext]' 
         } 
        }] 
       }, 
      ] 
     }, 
     plugins: plugins, 
     externals: ['axios'], 
     resolve: { 
      alias: { 
       // Ref: https://webpack.js.org/configuration/resolve/ 
       Context: path.resolve(__dirname, 'src/js/context'), 
       Utils: path.resolve(__dirname, 'src/js/utils'), 
       ....etc... 
      }, 
     } 
    }; 
}; 
+0

问题是否解决? – taha

回答

1
在karma.config.js

webpack: require("../webpack.conf.js") 

你给“webpack”一个函数而不是一个对象。您应该立即调用它(带或不带env参数)require("../webpack.conf.js")()

+1

它很好,谢谢。 – edbras