недавно я решил перейти с webpack 3 на webpack 4. Он почти хорошо работал, пока я не начал запускать тесты.Если мое приложение действительно работает хорошо, фактически, Karma не обнаруживает никаких тестов.
Я использую веб-пакет через оболочку (symfony encore), которая работает хорошо.Я обновил все пакеты до последней версии, но это не сработало.Я добавил тестовый файл, который не использует Vue, а затем этот тест обнаружен и запущен.
Так что я могу сказать, что Karma пытается загрузить файлы спецификации VueJS, но когда тест пытается импортироватьSingleFileComponent (Movie.component.vue за пример) затем останавливается без предупреждения.Так что, возможно, проблема связана с препроцессором, который может не работать.
вот конфигурация кармы и конфигурация бис-пакета Webpack:
const ManifestPlugin = require('webpack-manifest-plugin');
const webpackConfig = require('./karma.webpack.config.babel');
const webpack = require('webpack');
// Configure specific plugin
for (const plugin of webpackConfig.plugins) {
// Set writeToFileEmit option of the ManifestPlugin to false
if ((plugin instanceof ManifestPlugin) && plugin.opts) {
plugin.opts.writeToFileEmit = false
}
}
// Remove entry property (handled by Karma)
delete webpackConfig.entry;
// Karma options
module.exports = function (config) {
config.set({
frameworks: ['jasmine'],
files: [
'./assets/js/vuejs/tests/DebugKarma.spec.js',
'./assets/js/vuejs/tests/Movie.spec.js'
],
preprocessors: {
'./assets/js/vuejs/tests/DebugKarma.spec.js': ['webpack'],
'./assets/js/vuejs/tests/Movie.spec.js': ['webpack']
},
browsers: ['Chrome'],
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only',
noInfo: true,
},
plugins: [
require('karma-webpack'),
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-spec-reporter'),
require('karma-junit-reporter'),
require('karma-jasmine-html-reporter'),
],
chromeLauncher: {
exitOnResourceError: false
},
reporters: ['kjhtml', 'spec', 'junit'],
junitReporter: {
outputDir: './var/report', // results will be saved as $outputDir/$browserName.xml
outputFile: 'karma.xml', // if included, results will be saved as $outputDir/$browserName/$outputFile
suite: '', // suite will become the package name attribute in xml testsuite element
useBrowserName: false, // add browser name to report and classes names
nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
properties: {}, // key value pair of properties to add to the <properties> section of the report
xmlVersion: 1 // use '1' if reporting to be per SonarQube 6.2 XML format
},
autoWatch: true,
});
}
const Encore = require('@symfony/webpack-encore')
Encore
.configureRuntimeEnvironment('dev-server')
// the project directory where compiled assets will be stored
.setOutputPath('./var/tests/karma/')
.setPublicPath('/')
.cleanupOutputBeforeBuild()
.disableSingleRuntimeChunk()
.addEntry()
.enableSassLoader(function(sassOptions) {}, {
resolveUrlLoader: false,
})
.enableVueLoader()
let config = Encore.getWebpackConfig();
module.exports = config
и вот часть моегоpackage.json
"dependencies": {
"@api-platform/admin": "^0.6.2",
"@rebolon/json-reviver": "0.0.7",
"apollo-cache-inmemory": "^1.5.1",
"apollo-client": "^2.5.1",
"apollo-link": "^1.2.9",
"apollo-link-error": "^1.1.8",
"apollo-link-http": "^1.5.12",
"axios": "^0.18.0",
"devextreme": "^18.2.6",
"devextreme-vue": "^18.2.6",
"graphql": "^14.1.1",
"graphql-tag": "^2.10.1",
"offline-plugin": "^5.0.6",
"prop-types": "^15.7.2",
"quasar-extras": "^1.0.3",
"quasar-framework": "^0.15.15",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"rxjs": "^6.4.0",
"uglifyjs-webpack-plugin": "^2.1.2",
"vue": "^2.6.8",
"vue-apollo": "^3.0.0-beta.28",
"vue-router": "^3.0.2",
"vuelidate": "^0.7.4"
},
"devDependencies": {
"@angular/cli": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"@symfony/webpack-encore": "^0.24.0",
"bootstrap": "^4.3.1",
"create-react-app": "^1.5.2",
"jasmine": "^3.3.1",
"karma": "^4.0.1",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"karma-junit-reporter": "^1.2.0",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^3.0.5",
"node-sass": "^4.11.0",
"prettier": "^1.16.4",
"rxjs-tslint": "^0.1.7",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"ts-loader": "^5.3.3",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.8"
},
"browserslist": "> 1%"
И, наконец, вывод кармы, когда мы можем видеть только результат DebugKarma, но не результат фильма:
npm run test-karma
> sf-flex-encore-vuejs@0.0.1 test-karma php-sf-flex-webpack-encore-vuejs
> karma start karma.conf.js --single-run
(node:20628) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
i ｢wdm｣: wait until bundle finished: noop
i ｢wdm｣: wait until bundle finished: noop
DONE Compiled successfully in 1235ms 10:10:06
i ｢wdm｣:
i ｢wdm｣: Compiled successfully.
08 03 2019 10:10:06.850:INFO [karma-server]: Karma v4.0.1 server started at http://0.0.0.0:9876/
08 03 2019 10:10:06.853:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
08 03 2019 10:10:06.872:INFO [launcher]: Starting browser Chrome
08 03 2019 10:10:08.582:INFO [Chrome 72.0.3626 ]: Connected on socket hy9Imp7g7Qgdq0WuAAAA with id 25037598
Chrome 72.0.3626 INFO: 'This log message must be displayed in devTools of Karma browser'
Chrome 72.0.3626 INFO LOG: 'This log message must be displayed in devTools of Karma browser'
Debug Karma conf
√ config is ok
TOTAL: 1 SUCCESS
Chrome 72.0.3626 : Executed 1 of 1 SUCCESS (0.007 secs / 0.001 secs)
TOTAL: 1 SUCCESS
Вы можете получить весь проект здесь: https://github.com/Rebolon/php-sf-flex-webpack-encore-vuejs/tree/feature/move-on-webpack4
Любая подсказка приветствуется, я действительно не знаю, как это исправить (ни как отладить).
Спасибо