Karma测试与ES6 / Babel的反应

时间:2015-11-10 18:57:11

标签: javascript testing karma-runner babeljs

我正在尝试使用karma作为我的测试运行器来测试我的项目,使用webpack babel-loader。代码全部构建成功(我认为?或CLI说它确实如此,但是当我打开浏览器时,所有文件都无法通过es6导入immedialey。我知道我做错了吗?

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 [业力]:延迟执行,这些浏览器尚未就绪:Chrome 46.0.2490(Windows 8.1 0.0.0) Chrome 46.0.2490(Windows 8.1 0.0.0)错误   您需要包含一些实现业力 .start方法的适配器!

Chrome 46.0.2490(Windows 8.1 0.0.0)错误   您需要包含一些实现业力 .start方法的适配器!

browser errors here

2 个答案:

答案 0 :(得分: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个文件。

答案 1 :(得分:1)

这是最终的文件。

我做错了两件事(1,如下面的评论中所述):

  1. 我在文件数组中添加了未传输的代码,这当然会在浏览器中中断。根据Karma的文档,"文件是要在浏览器中加载的文件/模式列表,'所以当然它在es6令牌上打破了jsx。

  2. 我没有选择茉莉作为我的框架,所以Karma亚军不知道从哪里开始这就是为什么我得到了启动方法错误。

  3. 最后,我需要将我的测试包含在files数组中,否则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
            }
        }
    });
    };