Javascript 因果报应+；网页包（巴别塔加载器）和#x2B；ES6“；意外令牌导入“；

/edit：我将配置完全剥离到最低限度，以演示问题。我还将一个工作项目上传到GitHub，您可以签出该项目，以便自己查看。

GitHub上有问题的用例：（）

---

我知道有几个相关的问题，但世界发展如此之快，有如此多的因素/依赖性，我无法用当前提出的解决方案解决这个问题

我有一个webpack配置，它可以处理我所有的源代码，而且效果很好

对于测试，我重用该配置来处理加载源和测试文件的单个中心条目脚本。我找不到其他方法将模块从源代码导入到测试代码中进行测试

Karma可以很好地重用我的网页配置，但浏览器一打开就会报告错误。

源代码使用ES6导入和webpack require语句

package.json:

module.exports = function (config) {
    config.set({
        browsers: ['Chrome'],
        coverageReporter: {
            reporters: [
                { type: 'html', subdir: 'html' },
                { type: 'lcovonly', subdir: '.' }
            ]
        },
        files: ['./tests.webpack.js'],
        frameworks: ['jasmine'],
        preprocessors: { './tests.webpack.js': ['webpack'] },
        reporters: ['progress', 'coverage'],
        webpack: configureWebpack()
    });

    function configureWebpack(webpackConfigFunction) {
        var webpackConfig = require('./webpack.config');
        webpackConfig.entry = undefined; // karma will pass the proper argument for entry
        return webpackConfig;
    }
};

var testsContext = require.context('./test', true, /\.js$/);
testsContext.keys().forEach(testsContext);

var srcContext = require.context('./app', true, /\.js$/);
srcContext.keys().forEach(srcContext);

npm运行构建>>>webpack--config webpack.config.js--显示错误详细信息--颜色--进度

npm运行测试>>>karma启动--单次运行--无自动监视karma.config.js

karma.config.js:

module.exports = function (config) {
    config.set({
        browsers: ['Chrome'],
        coverageReporter: {
            reporters: [
                { type: 'html', subdir: 'html' },
                { type: 'lcovonly', subdir: '.' }
            ]
        },
        files: ['./tests.webpack.js'],
        frameworks: ['jasmine'],
        preprocessors: { './tests.webpack.js': ['webpack'] },
        reporters: ['progress', 'coverage'],
        webpack: configureWebpack()
    });

    function configureWebpack(webpackConfigFunction) {
        var webpackConfig = require('./webpack.config');
        webpackConfig.entry = undefined; // karma will pass the proper argument for entry
        return webpackConfig;
    }
};

var testsContext = require.context('./test', true, /\.js$/);
testsContext.keys().forEach(testsContext);

var srcContext = require.context('./app', true, /\.js$/);
srcContext.keys().forEach(srcContext);

正如您所看到的，我没有使用karma babel插件：我不确定为什么需要这些插件，因为我已经有了一个带有import/require语句的代码的工作构建

test\u entry.js:

module.exports = function (config) {
    config.set({
        browsers: ['Chrome'],
        coverageReporter: {
            reporters: [
                { type: 'html', subdir: 'html' },
                { type: 'lcovonly', subdir: '.' }
            ]
        },
        files: ['./tests.webpack.js'],
        frameworks: ['jasmine'],
        preprocessors: { './tests.webpack.js': ['webpack'] },
        reporters: ['progress', 'coverage'],
        webpack: configureWebpack()
    });

    function configureWebpack(webpackConfigFunction) {
        var webpackConfig = require('./webpack.config');
        webpackConfig.entry = undefined; // karma will pass the proper argument for entry
        return webpackConfig;
    }
};

var testsContext = require.context('./test', true, /\.js$/);
testsContext.keys().forEach(testsContext);

var srcContext = require.context('./app', true, /\.js$/);
srcContext.keys().forEach(srcContext);

---

网页包构建顺利成功（并发出预期文件大小的test_entry.js块），但随后Karma打开Chrome，页面加载后，我收到以下错误：

Chrome 51.0.2704（Windows 7 0.0.0）错误

未捕获的语法错误：意外的令牌导入

在路径/test\u条目中。js:41

test_entry.js没有41行，也不包含import语句，无论如何，它们应该得到处理。怎么了

如果您还想了解网页包配置：

//webpack.config.js，适用于正常构建，但不适用于Karma
var path=require（'path'）；
var webpack=require（'webpack'）；
var HtmlWebpackPlugin=require（'html-webpack-plugin'）；
module.exports={
是的，
条目：{
app:['./app/index.js']，
供应商：['./app/vendor.js']
},
输出：{
path:path.join（uu dirname，'dist'），
文件名：“js/[name].js”
},
插件：[
新HtmlWebpackPlugin({
模板：'./app/index.html'，
注射：“身体”，
缩小：假
}),
新建webpack.optimize.commonChunkPlugin（'vendor'，'js/vendor.js'），
新建webpack.SourceMapDevToolPlugin({
文件名：'[file].map'，
排除：/供应商/
})
],
决心：{
扩展名：[''，.js']，
别名：{
app:path.join（uuu dirname，'app'）
}
},
模块：{
装载机：[
{
测试：/\.js$/,，
加载器：“巴别塔加载器”，
包括：path.join（uuu dirname，'app'），
排除：path.join（\uuu dirname，'node\u modules'）
},
{
测试：/\.html$/,，
加载器：“html加载器”
}
]
},
解析加载程序：{
root:path.join（\uuu dirname，'node\u modules'）
},
};问题是您没有传输测试源-文件
src/global/filters/dateFormat.filter.spec.js
没有传输

您需要更改此加载程序配置：

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: path.join(__dirname, 'app'),
    exclude: path.join(__dirname, 'node_modules')
},

如下所示，使其工作：

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
        path.join(__dirname, 'app'),
        path.join(__dirname, 'test')
    ],
    exclude: path.join(__dirname, 'node_modules')
},

webpack.optimize.commonChunkPlugin
plugin也有问题-应该为因果报应禁用它：

禁用此插件后，测试文件中会出现错误：

import jasmine from 'jasmine-core';

import readableNumberFilter from 'readableNumber.filter';

var describe = jasmine.describe;
var it = jasmine.it;
var expect = jasmine.expect;

describe('readableNumber Filter', function () {
    describe('readableNumber Filter formatting', () => {
        it('it should support optional arguments', function () {
            expect(readableNumberFilter("50.3")).toEqual("50,30");
        });
    });
});

此测试中几乎没有错误：

从“茉莉花芯”导入茉莉花-你不应该这样做（业力会这样做，它也会添加
描述
，
它
和
期望
）

从“readableNumber.filter”导入readableNumberFilter-这不是实例化angular服务的方法，而是测试它们

您应该这样做（此测试实际上适用于上面提到的所有修复）：

注意：您需要安装模块
角度模拟


为了支持代码覆盖率报告，您需要将您的测试网页包配置配置为使用类似于
babel伊斯坦布尔加载程序
。顺便说一下，您还需要升级到Babel6

此外，您还需要使webpack配置更具可配置性（测试和生产需要的配置略有不同）

我已向您发送了一个包含所有这些修复的请求：


关于使用webpack构建angular 1.x项目，包括通过karma测试代码覆盖率-也许你会对我的项目感兴趣：-这是具有所有必需配置的初学者模板。
Ahhh，仅仅通过测试代码作为webpack的入口是不够的（webpack会看到它并负责捆绑它），babel loader明确地需要包含源代码。我现在终于明白了。谢谢当我在我的桌面上时，我会看看剩下的部分。关于测试angular代码，这是我最近看到的一个运动（测试ES6代码与测试angular代码）：和。你不同意这种方法吗？它似乎侧重于测试逻辑与验证角度上下文（通过注入）。通常，您有一些依赖于角度上下文的代码（至少是DI和内置服务），要测试它，您无论如何都需要使用
angular mock
。我认为没有办法完全停止使用它，同时拥有良好的测试覆盖率。但是，有些代码不依赖于角度上下文-您可以直接测试它们，而无需
角度模拟
。总的来说，将大部分代码与角度上下文分离是个好主意。@BogdanSavluk你能帮我解决这个问题吗？