如何使用 webpack 运行单元测试？答案

【问题标题】：How to run unit test with webpack?如何使用 webpack 运行单元测试？
【发布时间】：2020-05-24 23:55:35
【问题描述】：

我有一个与 webpack 捆绑在一起的 Node Js 服务器，配置如下：

module.exports = {
    entry: './build/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        devtoolModuleFilenameTemplate: '../[resource-path]',
    },

    target: 'node',
    node: {
        __dirname: true,
    },
    externals: {
        kcors: 'kcors',
        'koa-bodyparser': 'koa-bodyparser'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ["source-map-loader"],
                enforce: "pre"
            },
        ],
    },
    resolve: {
        extensions: ['.js'],
    },
    // plugins: [
    //     new webpack.DefinePlugin({
    //         "process.env": JSON.stringify(dotenv.parsed)
    //     }),
    // ],
    devtool: 'eval-source-map'
};

这在dist 内部创建了一个文件main.js

到目前为止，一切看起来都不错。我手动测试了服务器，它工作正常。

现在，在我使用 webpack 之前，我有一组单元测试，我在我的入口文件夹（build/ 文件夹）中以 .spec.js 后缀命名，每个 .js 文件都有自己的 .spec 文件同级位于.js 的同一目录中。

为了运行这些单元测试，我使用 mocha 和命令：mocha build/**/*.spec.js --recursive --timeout 20000

由于我是 webpack 和捆绑概念的新手，我如何从 main.js 文件运行相同的测试？我想确保所有测试仍在捆绑文件中传递

【问题讨论】：

如果测试在针对您的未捆绑源代码运行时通过，则您不需要针对您捆绑的源代码运行相同的测试。那时你不是在测试你的代码，你是在测试 webpack 以确保它在做正确的事情，这是不需要的。
在手动测试捆绑包后，我发现了很多问题，这些问题可能已被我的单元测试捕获。例如：__dirname 指向我的 C 驱动器的根目录，而不是客户端公共目录。这就是我将 __dirname 添加为 true 的方式。我的应用程序很大，如果不依赖我对 webpack 工作原理的了解，我怎么能确定没有其他类似的问题？
另外，我手动发现在某些配置下，尤其是在生产模式下，webpack 可能会将我的类的名称更改为最小化的名称。我的应用程序会因此中断，因为有一些逻辑取决于名称的类

标签： javascript node.js unit-testing webpack mocha.js

【解决方案1】：

使用

npm install mocha mocha-loader

像这样配置你的 webpack.config.js 文件：

module.exports = {
entry: './entry.js',
output: {
 path: __dirname,
 filename: 'bundle.js',
},
module: {
 rules: [
   {
     test: /test\.js$/,
     use: 'mocha-loader',
     exclude: /node_modules/,
   },
 ],
},
};

然后，从您的主文件中调用您的测试文件，例如：（进入 app.js）

import test from 'allMyTests';

【讨论】：