将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
所以我终于设法得到一个解决方案:
我设法清理我的摩卡的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的单元测试,而不是在浏览器!