Question

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

TL; DR

我需要在开发过程中从Webpack运行基于Type4编写的基于mocha / chai的测试。将所有测试和资产捆绑在一起组成一个单独的文件混乱依赖和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;

文件＆＃34; all-tests.ts＆＃34;和＆＃34; all-assets.ts＆＃34;导出当前和子目录中的所有.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
        }
    };

然后我将它与node-config合并以排除所有节点模块。

运行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单元测试的人！

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

1 个答案: