将 Webpack 测试集成到现有的 Typescript 项目中

Question

我已经将一个已经开始的项目迁移到了更结构化的格式中，并试图让 Webpack 使用 Mocha 在 shell 中运行所有测试。我对 Webpack 和一般任务运行非常陌生，所以我的大部分尝试都是基于复制/粘贴的。 （我真的很干，我知道...）

TL;博士

我需要在开发期间从 Webpack 运行我的基于 mocha/chai 的测试，这些测试是用 TypeScript 编写的。将所有测试和资产捆绑到一个文件中会导致依赖项混乱，并且 mocha-webpack 似乎找不到任何文件。

感谢所有建议，我只需要能够运行我的测试。

---

不成功的努力

我尝试在转换所有测试和不同的类之后将它们捆绑在一起，然后在该文件上运行 Mocha，但这样做只会得到令人讨厌的依赖错误，例如：

ERROR in ./src/test/unit/cell-factory.test.ts
Module not found: Error: Can't resolve '../../assets/js/shape_module/t-shape' in '/mnt/d/Development/hestraplattan/src/test/unit'
resolve '../../assets/js/shape_module/t-shape' in '/mnt/d/Development/hestraplattan/src/test/unit'
  using description file: /mnt/d/Development/hestraplattan/package.json (relative path: ./src/test/unit)
  after using description file: /mnt/d/Development/hestraplattan/package.json (relative path: ./src/test/unit)
    using description file: /mnt/d/Development/hestraplattan/package.json (relative path: ./src/assets/js/shape_module/t-shape)
      no extension
        /mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape doesn't exist
      .js
        /mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.js doesn't exist
      .json
        /mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.json doesn't exist
      as directory
        /mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape doesn't exist
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape]
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.js]
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.json]
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape]
 @ ./src/test/unit/cell-factory.test.ts 11:16-63
 @ ./src object Object
 @ ./.tmp/mocha-webpack/415d1b658d94fc3dead3d418955249ea-entry.js

Webpack 打包和测试配置：

var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');
var WebpackShellPlugin = require('webpack-shell-plugin');

var config = {
 entry: [
            './src/test/all-tests.js',
            './src/assets/js/all-assets.js'
        ],
 output: {
    path: path.resolve(__dirname, './dist/tests'),
    filename: 'testBundle.js'       
},
 target: 'node',
 module: {
    loaders: [
        { test: /\.ts$/, loader: 'ts-loader' }
    ],

 },
 externals: [nodeExternals()],
 node: {
   fs: 'empty'
 },
 plugins: [
   new WebpackShellPlugin({
     onBuildExit: "mocha ./dist/tests/testBundle.js"
   })
 ]
};
module.exports = config;

文件“all-tests.ts”和“all-assets.ts”导出当前和子目录中的所有.ts文件：

var context = require.context('./', true, /\.ts$/);
context.keys().forEach(context);
module.exports = context;

---

我还尝试使用 Mocha Webpack 并关注此 angular testing guide 以查看是否可行。这里的问题是我似乎没有运行任何测试......

使用 mocha webpack 进行测试的 Webpack 配置：

    module.exports = {
        devtool: 'cheap-module-source-map',

        resolve: {
            extensions: ['.ts', '.js']
        },

        resolveLoader: {
            moduleExtensions: ['-loader'] // To bypass mocha-loader incompatibility with webpack :
        },

        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loaders: [/*'istanbul-instrumenter-loader',*/ 'ts-loader' ]
                },
                {
                    test: /\.ts$/,
                    include: '/mnt/d/development/hestraplattan/src/test',
                    loaders: [
                        {
                            loader: 'ts-loader',
                            options: {configFileName: '/mnt/d/development/hestraplattan/tsconfig.json'}
                        } 
                    ]
                },
                {
                    test: /\.html$/,
                    loader: 'html-loader'

                },
                {
                    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                    loader: 'null-loader'
                },
                {
                    test: /\.css$/,
                    loader: 'null-loader'
                },
                {
                    test: /\.css$/,
                    loader: 'raw-loader'
                }
            ]
        },

        performance: {
            hints: false
        }
    };

用于在 shell 中运行的 Webpack 节点测试配置：

    var webpackMerge = require('webpack-merge')
    var nodeExternals = require('webpack-node-externals')
    var webpackTestConfig = require('./webpack.test.config')
    module.exports = webpackMerge(webpackTestConfig, {
        target: 'node',

        externals: [
            nodeExternals()
        ]
    });

Mocha webpack 选择：

--webpack-config ./webpack.test.node.js
src/test/*.test.ts

结果：

$ mocha-webpack --opts ./mocha-webpack.opts 
    no files found and 0 passing

Answer 1

所以我终于设法找到了解决方案：

我设法将我的 mocha-webpack 尝试清理为以下代码：

webpack.test.config

var path = require('path');
var webpack = require('webpack');

module.exports = {
        devtool: 'cheap-module-source-map',

        resolve: {
            extensions: ['.ts', '.js']
        },

        resolveLoader: {
            moduleExtensions: ['-loader'] // To bypass mocha-loader incompatibility with webpack :
        },

        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loader:  'ts-loader',
                    options: {
                        configFileName: path.resolve(__dirname, 'tsconfig.json')
                    },

                },
                {
                    test: /\.html$/,
                    loader: 'html-loader'

                },
                {
                    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                    loader: 'null-loader'
                },
                {
                    test: /\.css$/,
                    loader: 'null-loader'
                },
                {
                    test: /\.css$/,
                    loader: 'raw-loader'
                }
            ]
        },

        performance: {
            hints: false
        }
    };

然后我将它与节点配置合并以排除所有节点模块。

运行mocha-webpack的脚本：

mocha-webpack --opts ./mocha-webpack.opts || true

其中 true 用于在任何测试失败并抛出错误时忽略 npm 错误消息。

最后是 mocha-webpack.opts 给感兴趣的人：

--colors
--webpack-config ./webpack.test.node.js
src/**/*.test.ts

希望这对那些想要在命令行而不是浏览器中运行非 DOM 单元测试的人有所帮助！