recently i decided to migrate from webpack 3 to webpack 4. It almost works well until i started to run tests. If my application really works well, in fact, no tests are detected by Karma.
I use webpack throught a wrapper (symfony encore) which works well. I upgraded all packages to latest version, but it doesn't worked. I added a test file that doesn't rely on Vue, and then this test is detected and run.
So i can say that Karma try to load the VueJS spec files, but when the test try to import the SingleFileComponent (Movie.component.vue per exemple) then it stops without any warning. So maybe the problem is related to the preprocessor that might not work.
here is the karma config and the webpack encore config:
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
and here is a part of my 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%"
And finally the karma output wher we can only see DebugKarma result, but not the Movie result:
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
You can get the whole project here: https://github.com/Rebolon/php-sf-flex-webpack-encore-vuejs/tree/feature/move-on-webpack4
Any clue is welcome, i really don't know how to fix this (neither how to debug it).
Thanks
