我正在使用Phaser3开发一款游戏，并决定为游戏的某些组件添加一些测试。
我正在使用 Typescript 3.3 和 webpack 4 作为我的主要工具。我想在浏览器上运行测试，其中某些测试可能依赖于 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'
上述/test/core目录包含EntityFactory.spec.ts和foo.ts的文件。导入在套件中编写为：
import thing from './foo';
以下是我的业力配置文件及其使用的 webpack 配置：
// Karma configuration
// Generated on Sun Mar 17 2019 17:03:14 GMT+0200 (EET)
const webpackConfig = require('./webpack.config').test;
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'**/*.spec.ts'
// each file acts as entry point for the webpack configuration
],
mime: {
"text/x-typescript": ["ts", "tsx"],
},
// list of files / patterns to exclude
exclude: [
// '**/*.spec.ts'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
// add webpack as preprocessor
'**/*.spec.ts': [ 'webpack' ],
},
webpack: webpackConfig,
webpackMiddleware: {
// webpack-dev-middleware configuration
// i. e.
stats: 'errors-only'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
和 Webpack 配置：
const baseConfig = {
entry: './src/index.ts',
mode: 'development',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
chunkFilename: '[name].js',
filename: '[name].js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
// Source maps support ('inline-source-map' also works)
devtool: 'source-map',
module: {
rules: [
{
test: /.tsx?$/,
loader: 'ts-loader'
},
{
test: /.js$/,
use: ['source-map-loader'],
enforce: 'pre'
}
]
},
optimization: {
runtimeChunk: {
name: 'manifest'
},
splitChunks: {
cacheGroups: {
commons: {
test: /[\/]node_modules[\/]/,
name: 'vendor',
chunks: 'initial'
}
}
}
},
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'assets'),
to: path.resolve(__dirname, 'build', 'assets')
}
]),
new webpack.DefinePlugin({
CANVAS_RENDERER: JSON.stringify(true),
WEBGL_RENDERER: JSON.stringify(true)
}),
new MiniHtmlWebpackPlugin({
context: {
title: 'Phaser game'
},
// FIXME: CSS-loader and default minithmlwebpack template would probably handle this better
template: ({js, title, publicPath } ) =>
`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${title}</title>
<style type = "text/css">
body {
padding: 0;
margin: 0;
}
canvas {
display:block;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
${generateJSReferences(js, publicPath)}
</body>
</html>
`
})
]
};
function getTestConfig() {
const config = _.cloneDeep(baseConfig);
delete config.entry;
return config;
}
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"
},
所以我的问题是，为什么测试似乎无法导入我想要测试的模块？问题是在 Webpack、Karma 还是 Typescript 中？
这听起来像 Typescript 没有编译您尝试包含的模块(foo)。 将重现错误的小型测试用例放在一起会有所帮助，但您应该检查您的tsconfig.json以确保它包含您希望能够测试的所有代码。
我有一个单独的tsconfig.test.json，涵盖了应用程序的主要入口点(files: ["src/index.ts"])以及所有测试(include: ["src/**/*.spec.ts"])。 如果你走这条路，也许做一个带有常见选项的tsconfig.base.json，然后将其包含在你的生产tsconfig.json以及测试中。 然后，您需要将 Webpack 配置指向正确的文件，例如
{
test: /.tsx?$/,
use: {
loader: 'ts-loader',
options: {
configFile: 'tsconfig.test.json',
}
}
},
默认情况下，您可以将configFile设置为tsconfig.json，然后您的getTestConfig()函数可以更改它以供karma-webpack使用。