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

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

TL; DR

我需要在开发过程中从Webpack运行基于mocha/chai的基于TypeScript的测试。将所有测试和资产一起捆绑到一个文件中，依赖和mocha-webpack似乎找不到任何文件。

所有的建议表示赞赏，我只需要能够运行我的测试。

不成功的努力

我试图transpiling他们，然后在该文件运行摩卡后一起捆绑所有的测试和不同类的，但我只能通过这样得到讨厌的相关性错误，如：

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;

个

的文件“全tests.ts”和“全assets.ts”导出所有的.ts，文件在当前和子目录：

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

我也用摩卡的WebPack和尝试之后这angular testing guide看看是否会工作。这里的问题是，我似乎并没有得到任何我的测试运行...

的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 
     } 
    };

的WebPack节点测试配置在shell中运行：

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() 
     ] 
    });

摩卡的WebPack选择采用：

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

结果：

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

来源

2017-08-02 Felix Nordén

所以我终于设法得到一个解决方案：

我设法清理我的摩卡的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合并以排除所有节点模块。

运行摩卡的WebPack脚本：

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

其中真正用于忽略NPM错误信息，如果任何测试失败并引发错误。

最后是摩卡webpack.opts对于那些有兴趣谁：

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

希望这将帮助那些你在那里想运行在命令行上的非DOM的单元测试，而不是在浏览器！

来源

2017-08-02 19:23:08

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

回答

相关问题