Question

我正在尝试使用 Karma ， Webpack 为我的 angularjs es-6 应用构建单元测试>和 mocha 。

源代码位于 src 文件夹下，而入口点为 src / index.js ：

import angular from 'angular';
import kramerWeb from './root/app.module';

import './assets/styles/app.less';

angular.module(kramerWeb);

我的测试位于 test 文件夹下：

let should = require('chai').should();
let expect = require('chai').expect;

import {K_Parser} from '../src/core/parsers/ParserFactory';
describe('K_Parser', function () {

    beforeEach(function () {
    });

    it('should have a decode function', function () {
        K_Parser.decode.should.be.a('function');
    })

Webpack.config.js ：

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');


var outputPath;
if (process.env.path_for_build)
    outputPath = path.resolve(__dirname, process.env.path_for_build);
else
    outputPath = path.resolve(__dirname, 'dist');

console.log(outputPath);
const config = {
    entry: {
        root: [path.resolve(__dirname, 'src/index.js')]
    },
    output: {
        filename: '[name].main.js',
        path: outputPath,
        chunkFilename: "[name].main.js"
    },
    optimization: {

        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    priority: -20,
                    chunks: "all"
                },
                components:{
                    test: /[\\/]components[\\/]/,
                    name: "components",
                    priority: -20,
                    chunks: "all"
                }
            }
        }
    },
    devServer: {
        contentBase: path.join(__dirname, 'devices')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader//('style-loader' // creates style nodes from JS strings
                }, {
                    loader: 'css-loader' // translates CSS into CommonJS
                }, {
                    loader: 'resolve-url-loader'
                }, {
                    loader: 'less-loader', // compiles Less to CSS
                    options: {
                        javascriptEnabled: true
                    }
                }]
            },
            {
                test: /\.(html)$/,
                loader: 'html-loader',
                options: {
                    loaders: {
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include:[path.join(__dirname, 'test')],
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    name: './fonts/[name].[ext]?[hash]'
                }
            }
        ]
    },
    plugins: [
        // new BundleAnalyzerPlugin(),
        new WebpackShellPlugin({onBuildStart: ['echo "Webpack Start"'], onBuildEnd: ['echo "Webpack End"']}),//'copy "devices\\VS-88UT\\index.html" "devices\\VS-88UT\\dist"']}),
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
        new webpack.ProvidePlugin({
            'window.jQuery': 'jquery',
            // Promise: 'es6-promise-promise',
            _: 'underscore'
        })

    ]
};
module.exports = config;

karma.config.js

var webpackConfig = require('./webpack.config');

module.exports = function(config) {
    config.set({
        browsers:   ['Chrome'],
        frameworks: ['mocha'],
        reporters:  ['mocha'],

        logLevel: config.LOG_INFO,
        autoWatch: true,
        singleRun: false,
        colors: true,
        port: 9876,

        basePath: '',
        files: [
            'webpack.karma.context.js'
        ],
        preprocessors: {
            'webpack.karma.context.js': ['webpack']
        },
        exclude: [],
        webpack: webpackConfig,
        webpackMiddleware: {
            noInfo: true
        }
    });
};

webpack.karma.context.js

import angular from 'angular';
import mocks from 'angular-mocks';

import * as root from './src/index';

let context = require.context('./test', false, /\.spec\.js$/);
context.keys().forEach(context);

我在 package.json 中的脚本：

"mocha": "mocha --require babel-register  ./test/*.spec.js -r jsdom-global/register",
"karma": "karma start karma.conf.js"

问题：当我运行业力脚本时，我什么都没有，它报告：

√完成0个测试

运行mocha脚本时，我遇到一个问题：

未定义角度

我花了一整天的时间，真的很感谢您的帮助。

谢谢

更新

我通过（完成0个测试）解决了我的业力问题。这是因为我的karma.conf。我将框架设置为茉莉花而不是摩卡。但是现在我有一个新问题：

意外令牌{

Answer 1

好，我解决了我的问题。

对于那些可能遇到相同问题的人，我在这里设置答案：

首先有一个不好的订单

webpack.karma.context.js

//I remove the import fro angular (angular is imported in the index file)

import * as root from './src/index';
import mocks from 'angular-mocks';// angular-mocks need to come AFTER the source code


let context = require.context('./test', false, /\.spec\.js$/);
context.keys().forEach(context);

我要做的另一件事，这是困难的部分

在webpack 4中，默认情况下启用优化，这似乎阻止了单元测试的进行。我在

中更改了webpack配置

karma.conf.js

 webpack: { ...webpackConfig, optimization: undefined },
//instead of : webpack: webpackConfig,

现在一切正常：）

我的单元测试配置出现几个问题

1 个答案: