【发布时间】：2019-06-17 07:15:51
【问题描述】：
编辑：来自another answer 我决定尝试从 karma-webpack 3.0.5 升级到 4.0.0-rc.2，但我开始遇到实际错误。它开始抱怨没有定义角度，然后我意识到我正在从tests.bundle.spec 文件导入我的home.spec.js 文件，而不是依赖上下文来导入它（在调试时这样做并忘记了它）。删除额外的导入后，我的测试成功运行！一旦 SO 允许我回答我自己的问题，我会用答案更新这个问题。
我相当肯定 karma 甚至没有加载我的测试包文件，尽管 webpack 似乎创建了包。
我似乎无法从tests.bundle.spec.js 或home.spec.js 文件中看到任何console.logs。当我有 singleRun=false，并且我在刷新后检查生成的 Chrome 窗口中的控制台（测试应该重新运行）时，我在网络选项卡中看到 tests.bundle.spec.js 文件已加载，但我在控制台，并且它没有在 html 文件中引用。 html 页面中加载的唯一脚本是 socket.io.js 和 karma.js。
编辑：从 Chrome 打开调试页面后，我确实看到我的 tests.bundle.spec.js 包正在加载，但包含的模块都没有运行。我已经在测试脚本甚至tests.bundle.spec.js 代码中设置了断点（例如，在为require 设置上下文时），但没有一个断点被触发。我一定在某处遗漏了一些东西，因为 Karma 从未初始化任何这些模块。我什至在__webpack_require__ 函数中设置了断点，但它们并没有被触发。所以我的模块都不需要/导入。
Webpack 肯定会构建模块，我在控制台的输出中看到了这一点，来自我的 yarn test 命令（运行 karma start）：
Entrypoint src/tests.bundle.spec = vendors~src/tests.bundle.spec.bundle.js src/tests.bundle.spec.js
[./ sync recursive home\.spec\.js$] . sync home\.spec\.js$ 192 bytes {src/tests.bundle.spec} [built]
这是我的结构/配置
结构：
-src
--app
---home
----home.js
----home.spec.js
--tests.bundle.spec.js
karma.conf.js
webpack.test.js
karma.conf.js
var webpackConfig = require('./webpack.test.js');
module.exports = function (config) {
process.env.BABEL_ENV = 'karma';
config.set({
basePath: '',
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
{
pattern: './src/tests.bundle.spec.js',
watched: false
}
],
// plugins
plugins: [
'karma-webpack',
'karma-jasmine',
'karma-sourcemap-loader',
'karma-chrome-launcher'
],
preprocessors: {
'./src/tests.bundle.spec.js': ['webpack', 'sourcemap']
},
// Webpack config
webpack: webpackConfig,
webpackServer: {
noInfo: false
},
reporters: ['progress'],
// web server port
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: [
'Chrome'
],
singleRun: false,
concurrency: Infinity
})
}
webpack.test.js
const webpack = require("webpack");
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: {
app: path.resolve(__dirname, './src/index.js')
},
output: {
path: path.resolve(__dirname, './build_app/'),
filename: 'app-[name].js',
chunkFilename: 'app-vendors.[chunkhash].js'
},
module: {
rules: [
// JavaScript source files for the LeadingReach application
{
test: /\.js$/,
exclude: /(node_modules)(\.spec\.js$)/,
rules : [
{
loader: 'babel-loader'
},
{
loader: 'eslint-loader',
options: {
emitError: true,
emitWarning: true,
failOnError: true,
globals: [
'_',
'angular',
'lrenums',
'readJSON'
]
}
}
]
},
// JavaScript test files
{
test: /\.spec.js$/,
exclude: /(node_modules)/,
use : [
'babel-loader'
]
},
// Templates (non-compiled)
{
test: /\.tpl.html$/,
exclude: /\.tpl.html2js$/,
loader: ['file-loader?name=[path][name].[ext]?[hash]', 'extract-loader', 'html-loader']
},
// LESS files
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
// CSS files
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
},
// Static files
{
test: /\.(jpe?g|gif|png|ico)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
outputPath: 'assets/images/'
}
}]
},
// Font files
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
outputPath: 'fonts/'
}
}]
}
]
},
optimization: {
namedChunks: true,
splitChunks: {
chunks: "all",
minSize: 0,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'all',
minSize: 0
}
}
}
},
plugins: [
// Clean build_app folder
new CleanWebpackPlugin(['build_app'], {
// Write logs to console.
verbose: true,
// perform clean just before files are emitted to the output dir
// Default: false
beforeEmit: true
}),
// Create our index.php file
new HtmlWebpackPlugin({
template: './src/index.php',
filename: 'index.php',
inject: 'head' // place scripts in head because we bootstrap the app at the end of the body
}),
// Expose _ (underscoreJS) to the global scope
new webpack.ProvidePlugin({
_: 'underscore'
})
]
};
tests.bundle.spec.js
const context = require.context('./', true, /.+home\.spec\.js$/);
console.log('================WHEEEEEE==============');
console.log(context.keys());
/*
* For each file, call the context function that will require the file and load it up here.
*/
context.keys().forEach(function(key) {
context(key);
});
home.spec.js
// Import dependencies
console.log('============HELLOOOOOOO123123123123==============');
require('angular');
require('angular-mocks');
import './home.js';
console.log('============HELLOOOOOOO==============');
describe('home section', function () {
console.log('============HELLOOOOOOO222222==============');
it('should run test', inject(function () {
expect(1).toEqual(1);
});
}
当我的测试运行时，我得到Executed 0 of 0 ERROR (0.001 secs / 0 secs)
【问题讨论】：
-
您找到解决方案了吗？我也有同样的问题。
标签： angularjs unit-testing webpack karma-runner karma-webpack