karma-webpack не запускает тесты
edit: из другого ответа я решил попробовать обновить karma-webpack 3.0.5 до 4.0.0-rc.2, и я начал получать реальные ошибки. Он начал жаловаться, что угол не был определен, и затем я понял, что импортировал свой home.spec.js файл из tests.bundle.spec файл вместо того, чтобы полагаться на контекст, чтобы импортировать его (делал это во время отладки и забыл об этом). После удаления лишнего импорта мои тесты пройдены успешно! Я обновлю этот вопрос ответом, как только СО позволит мне ответить на мой собственный вопрос.
Я совершенно уверен, что karma даже не загружает мой тестовый пакет, хотя кажется, что пакет создает пакет.
Я не могу видеть какие-либо console.logs из tests.bundle.spec.js или же home.spec.js файлы. Когда у меня singleRun = false и я проверяю консоль в появившемся окне Chrome после обновления (тесты должны быть перезапущены), я вижу на вкладке Сеть, что tests.bundle.spec.js файл загружен, но я ничего не вижу в консоли, и он не указан в файле html. Единственные скрипты, которые загружаются на html-странице: socket.io.js а также karma.js,
редактировать: после открытия страницы отладки из Chrome, я вижу мой tests.bundle.spec.js пакет загружается, но ни один из включенных модулей никогда не запускается. Я установил контрольные точки в сценарии тестирования, и даже tests.bundle.spec.js код (например, при установке контекста для require), но ни одна из точек останова никогда не срабатывает. Я должен что-то упустить, потому что Карма никогда не инициализирует ни один из этих модулей. Я даже поставил точки останова в __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)
0 ответов
Для меня это была проблема, связанная с optimization.splitChunks, после того как я удалил его из моего karma-webpack-config, мои тесты были найдены.
Вам нужно положить в karma.conf.js
callback: function(){window.__karma__.start()}
Я столкнулся с той же проблемой при обновлении до webpack 5. Выполнение теста: 0 из 0. Готовясь запросить поддержку, я создал репо https://github.com/svenbluege/karma-with-webpack-5-test и нашел решение здесь.
Исправить довольно просто. Вам нужно отключить такие фрагменты:
webpack: {
// webpack configuration => makes karma-webpack work!
optimization: {
runtimeChunk: false,
splitChunks: false
},
module: {
rules: [
По умолчанию в karma-webpack включена функция разбиения на части. Спасибо Йоханнесу за подсказку ( /questions/4421076/karma-webpack-ne-zapuskaet-testyi/49434175#49434175)!
Закончился исправлением моей собственной проблемы, извините за задержку с обновлением ответа после исходного сообщения.
Из другого ответа я решил попробовать обновить karma-webpack 3.0.5 до 4.0.0-rc.2, и я начал получать фактические ошибки. Он начал жаловаться, что angular не определен, а затем я понял, что импортирую свой файл home.spec.js из файла tests.bundle.spec вместо того, чтобы полагаться на контекст для его импорта (делал это во время отладки и забыл об этом). После удаления лишнего импорта мои тесты проходят успешно!