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

Question

我已经将一个已经开始的项目迁移到一个更结构化的格式中，并且正在尝试使用 Mocha 使 Webpack 运行 shell 中的所有测试。总的来说，我对 Webpack 和任务运行ning 很陌生，所以我的大部分尝试都是 copy/paste-based。（我真的很干，我知道...）

TL;博士

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

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

努力未果

我尝试将所有测试和不同的类转换后捆绑在一起，然后在该文件上运行ning 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 中运行ning 的 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
        }
    };

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

运行ning mocha-webpack 的脚本：

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

如果任何测试失败并抛出错误，true 表示忽略 npm 错误消息。

最后是摩卡咖啡-webpack.opts 给感兴趣的人：

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

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

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

Integrating Webpack testing into existing Typescript project

unit-testing

typescript

webpack-2