Karma 测试 React 与 ES6/Babel答案

【问题标题】：Karma Testing React with ES6/BabelKarma 测试 React 与 ES6/Babel
【发布时间】：2015-11-10 18:57:11
【问题描述】：

我正在尝试使用 karma 作为我的测试运行器，使用 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 方法的适配器！

【问题讨论】：

标签： javascript testing karma-runner babeljs

【解决方案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 文件。

【讨论】：

我更新了我的新配置——现在它看起来正在构建我的所有文件，但它说我需要实现一个业力启动方法？
不需要包含src 组件。您的test 文件将根据需要包含它们
您是在学习教程还是示例？这可能是一个有用的例子：github.com/webpack/karma-webpack
还有这个相关的问题：stackoverflow.com/questions/24220888/…

【解决方案2】：

这是最终的工作文件。

我做错了两件事（1 如下 cmets 所述）：

我在文件数组中添加了未编译的代码，这当然会在浏览器中中断。从 Karma 的文档中，“文件是要在浏览器中加载的文件/模式的列表”，因此它当然会在 jsx 上的 es6 令牌上中断。
我没有选择 jasmine 作为我的框架，所以 Karma 跑步者不知道从哪里开始，这就是我收到 start 方法错误的原因。

最后，我需要将我的测试包含在 files 数组中，否则 Karma 不会加载我的测试并运行它们。（注意：测试也必须包含在 preprocssor 数组中）。

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

【讨论】：