如何配置Typescript、Karma、Webpack在浏览器中运行测试

我正在用Phaser3开发一个游戏，并决定为游戏的某些组件添加一些测试

我使用TypeScript3.3和Webpack4作为我的主要工具。我想在浏览器上运行测试，其中一些测试可能依赖于Phaser游戏库。在过去，我曾使用Karma+Jasmine测试Angular.js应用程序，所以我想我会使用它

经过一些设置后，我让测试运行，但由于某些原因，测试文件不能导入其他模块，而是给出了错误消息

Compiled with warnings.
ℹ ｢wdm｣: Compiling...
✖ ｢wdm｣: 
ERROR in ./src/test/core/EntityFactory.spec.ts
Module not found: Error: Can't resolve './foo' in '<path to the project>/src/test/core'
 @ ./src/test/core/EntityFactory.spec.ts 1:0-26
ℹ ｢wdm｣: Failed to compile.

Module not found: Error: Can't resolve './foo' in '/<path to the project>/src/test/core'

下面是我的karma配置文件及其使用的网页包配置：

//Karma配置
//2019年3月17日星期日17:03:14 GMT+0200（EET）生成
const webpackConfig=require（'./webpack.config'）.test；
module.exports=函数（配置）{
config.set({
//用于解析所有模式（例如文件、排除）的基本路径
基本路径：“”，
//要使用的框架
//现有框架：https://npmjs.org/browse/keyword/karma-adapter
框架：['jasmine']，
//要在浏览器中加载的文件/图案列表
档案：[
“***规格ts”
//每个文件都充当Web包配置的入口点
],
默剧：{
“text/x-typescript”：[“ts”，“tsx”]，
},
//要排除的文件/模式列表
排除：[
//“***规格ts”
],
//在将匹配文件提供给浏览器之前对其进行预处理
//可用的预处理器：https://npmjs.org/browse/keyword/karma-preprocessor
预处理器：{
//添加网页包作为预处理器
“***.spec.ts”：[“网页包”]，
},
webpack:webpackConfig，
Web包中间件：{
//Web包开发中间件配置
//即。
统计数据：“仅错误”
},
//要使用的测试结果报告器
//可能值：“点”、“进度”
//现有记者：https://npmjs.org/browse/keyword/karma-reporter
记者:[进展],，
//web服务器端口
港口：9876，
//启用/禁用输出中的颜色（报告器和日志）
颜色：对，
//记录级别
//可能值：config.LOG_DISABLE | | config.LOG_ERROR | | config.LOG_WARN | | config.LOG_INFO | | config.LOG_DEBUG
日志级别：config.LOG\u INFO，
//启用/禁用监视文件并在任何文件更改时执行测试
自动观察：错误，
//启动这些浏览器
//可用的浏览器启动器：https://npmjs.org/browse/keyword/karma-launcher
浏览器：['Chrome']，
//连续集成模式
//如果为真，Karma将捕获浏览器，运行测试并退出
singleRun：是的，
//并发级别
//应同时启动多少个浏览器
并发：无限
})
}

和网页包配置：

const baseConfig={
条目：'./src/index.ts'，
模式:"发展",，
输出：{
path:path.resolve（uu dirname，'build'），
公共路径：“/”，
chunkFilename:“[name].js”，
文件名：'[name].js'
},
决心：{
扩展名：['.ts'，'.tsx'，'.js']
},
//源代码映射支持（“内联源代码映射”也适用）
devtool:'源映射'，
模块：{
规则：[
{
测试：/\.tsx？$/,，
加载器：“ts加载器”
},
{
测试：/\.js$/,，
使用：['source-map-loader']，
强制执行：“预”
}
]
},
优化：{
运行时块：{
名称：“清单”
},
分割块：{
缓存组：{
公地：{
测试：/[\/]节点单元模块[\\/]/,，
名称：'供应商'，
块：'首字母'
}
}
}
},
插件：[
新的CopyWebpackPlugin([
{
from:path.resolve（uu dirname，'assets'），
收件人：path.resolve（_dirname，'build'，'assets'）
}
]),
新的webpack.DefinePlugin({
CANVAS_渲染器：JSON.stringify（true），
WEBGL_渲染器：JSON.stringify（true）
}),
新的MiniHtmlWebpackPlugin({
背景：{
标题：“移相器游戏”
},
//FIXME:CSS加载器和默认的minithmlwebpack模板可能会更好地处理这个问题
模板：（{js，title，publicPath}）=>
`
${title}
身体{
填充：0；
保证金：0；
}
帆布{
显示：块；
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
${generateJSReferences（js，publicPath）}
`
})
]
};
函数getTestConfig（）{
const config=uu.cloneDeep（baseConfig）；
删除config.entry；
返回配置；
}

getTestConfig（）

函数稍微更改baseConfig，并将结果传递给Karma配置

最后，如果有什么东西可能会有所帮助，请检查开发人员的依赖关系：

  "devDependencies": {
    "@types/jasmine": "^3.3.10",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "copy-webpack-plugin": "^4.6.0",
    "jasmine": "^3.3.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^2.0.1",
    "karma-webpack": "^3.0.5",
    "mini-html-webpack-plugin": "^0.2.3",
    "prettier": "^1.16.4",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^5.3.3",
    "tslint": "^5.12.1",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  },

---

所以我的问题是，为什么测试似乎无法导入我想要测试的模块？问题出在网页包中，是Karma还是Typescript？

听起来Typescript没有编译您试图包含的模块（

foo

）。这将有助于组合一个小的测试用例来再现错误，但是您应该检查

tsconfig.json

，以确保它包含您希望能够测试的所有代码

我有一个单独的

tsconfig.test.json

，它涵盖了应用程序的主要入口点（

文件：[“src/index.ts”]

），以及所有测试（

包括：[“src/***.spec.ts”]

）。如果你走这条路，也许可以用公共选项制作一个

tsconfig.base.json

，然后将它包括在你的产品

tsconfig.json

以及测试中。然后，您需要将您的Webpack配置指向正确的文件，如<

  "devDependencies": {
    "@types/jasmine": "^3.3.10",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "copy-webpack-plugin": "^4.6.0",
    "jasmine": "^3.3.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^2.0.1",
    "karma-webpack": "^3.0.5",
    "mini-html-webpack-plugin": "^0.2.3",
    "prettier": "^1.16.4",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^5.3.3",
    "tslint": "^5.12.1",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  },