Karma+Mocha+Browserify+ES6 测试栈设置问题

Question

我正在尝试按照这些准则创建一个可测试的前端项目：

• React 组件架构与每个组件文件夹中的 __test__ 文件夹；
• 测试使用 ES6 模块；
• browserify 将所有内容捆绑到一个文件中，而 babelify 转译 ES6；
• karma 使用捆绑包进行测试。

这是我的karma.conf.js：

module.exports = function (karma) {
    const testFiles = __dirname + '/proj/static/src/**/__tests__/*.js';

    karma.set({
        frameworks: ['browserify', 'mocha'],
        browsers: ['Chrome'],
        files: [
            testFiles
        ],
        logLevel: 'LOG_DEBUG',
        preprocessors: {
            testFiles: ['browserify'],
        },
        reporters: ['dots'],
        singleRun: true,

        browserify: {
            debug: true,
            transform: [ 'babelify' ]
        },
    });
};

这是我的.babelrc

{
  presets: ['es2015', 'react']
}

但是，在启动 karma 后，我收到此错误：

...
Uncaught SyntaxError: Unexpected token import
  at proj/static/src/js/some-component/__tests__/some.test.js:1

显然代码没有被转译。我已经阅读了多个教程，并且都使用了不同的技术。任何想法如何解决这个问题？

附：我对前端的 TDD 还是很陌生。

编辑 这些是已安装的 npm 依赖项：

"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"expect": "^1.20.2",
"karma": "^1.3.0",
"karma-browserify": "^5.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-mocha": "^1.3.0",
"mocha": "^3.1.2",
"reactify": "^1.1.1",
"watchify": "^3.7.0"

Answer 1

问题是testFiles 是preprocessors 配置中键的值。您需要键的值是与要预处理的文件匹配的 glob。没有文件被匹配，所以没有文件被预处理。

我会试试这个：

preprocessors: {
    '**/*.js': ['browserify']
}

您的问题没有详细介绍您的项目目录结构，因此我建议了一个与所有 .js 文件匹配的 glob。您可以对其进行细化以仅匹配需要转译的源文件。

请注意，glob 需要匹配您的所有源文件 - 而不仅仅是测试。