使用ES6 / Babel进行Karma测试React

Question

我正在尝试使用webpack babel-loader使用业力作为测试运行者来测试我的项目。 所有代码都可以成功构建（我认为？或CLI表示可以），但是当我打开浏览器时，es6导入中的所有文件都立即失败。我知道我在做什么错吗？

var path = require('path');

module.exports = function(config) {
    config.set({
    basePath: '',
    // frameworks: ['jasmine', 'karma-webpack'],

    files: [
        'lib/bundle.js'
    ],

    exclude: ['*.styl'],

    preprocessors: {
        'test/**/*.js': ['webpack'],
        'test/**/*.jsx': ['webpack'],
        'src/**/*.jsx': ['webpack'],
        'src/**/*.js': ['webpack']
    },

    plugins: [
        require("karma-webpack")
    ],

    webpack: {
        entry: './src/entry.js',
         module: {
             loaders: [
                {
                    test: path.join(__dirname, 'src'),  
                    loader: 'babel-loader?stage=0&optional=runtime',
                    excludes: /node_modules/,
                    options: {
                        optional: ['runtime']
                    }
                }, 
                {
                    test: /\.styl$/,
                    loaders: ['style-loader', 'css-loader', 'stylus-loader']
                }
            ]
        },
        webpackMiddleware: {
          noInfo: true
        }
    }
});
};

10 11 2015 13：16：47.156：INFO [karma]：延迟执行，这些浏览器尚未就绪：Chrome 46.0.2490（Windows 8.1 0.0.0）Chrome 46.0.2490（Windows 8.1 0.0.0）错误您需要包括一些实现karma .start方法的适配器！

Chrome 46.0.2490（Windows 8.1 0.0.0）错误您需要包括一些实现karma .start方法的适配器！

Answer 1

您将在测试中包含转译的文件。 例如，在您的错误中看到以下行：

WARNING in ./~/routes/dist/routes.js
Critical dependencies:
1:406-413 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/routes/dist/routes.js 1:406-413

为什么包含dist文件？ 您应该只包括src文件和依赖项。

files: [
    '../node_modules/react/react.js',
    '../node_modules/babel-polyfill/dist/polyfill.js',
    '**/*.js',
    '**/*.jsx'
],

最后两个看起来不正确。 您要告诉它加载所有js/jsx文件..包括dist文件。

Answer 2

这是有效的最终文件。

我做错了两件事（下面的评论中提到了1）：

1. 我向文件数组中添加了未编译的代码，这当然在浏览器中会中断。 从Karma的文档中，“文件是要在浏览器中加载的文件/模式的列表，”因此，它当然在esx令牌上的jsx上中断了。

2. 我没有选择茉莉花作为我的框架，所以业力赛跑者不知道从哪里开始，这就是为什么我遇到启动方法错误的原因。

3. 最后，我需要将测试包含在文件数组中，否则Karma不会加载并运行测试。 （ 注意：测试也必须包含在preproccssor数组中 ）。

    var path = require('path'); module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine'], files: [ 'lib/bundle.js', 'test/**/*.jsx', 'test/**/*.js' ], exclude: ['*.styl'], preprocessors: { 'test/**/*.js': ['webpack'], 'test/**/*.jsx': ['webpack'], 'src/**/*.jsx': ['webpack'], 'src/**/*.js': ['webpack'] }, webpack: { entry: './src/entry.js', module: { loaders: [ { test: /\\.js$|.jsx$/, loader: 'babel-loader?stage=0&optional=runtime', excludes: /node_modules/ }, { test: /\\.styl$/, loaders: ['style-loader', 'css-loader', 'stylus-loader'] } ] }, webpackMiddleware: { noInfo: true } } }); };