All geek questions in one place

SyntaxError: Unexpected 'const' token (with Vue, Karma, Webpack, PhantomJS)

I have a more or less vanilla Laravel + Vue.js application and I'm trying to do JS testing with Karma and Jasmine , If I try to use () => {} style functions or keywords like const in my tests, they fail with errors Unexpected tokens , however I have no problem using the import keyword, and I can reload and work with .vue files without any problems.

Trivial statement like

 expect(true).toBe(true);

It seems to work fine (see last line)

 $ ./node_modules/karma/bin/karma start 22 11 2016 11:09:23.250:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/ 22 11 2016 11:09:23.254:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 22 11 2016 11:09:23.263:INFO [launcher]: Starting browser PhantomJS 22 11 2016 11:09:24.025:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#U1dCZ7i3UtsC-M3_AAAA with id 84458811 PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.004 secs / 0.002 secs)

Then , if I add a trivial declaration of const to my test function

 const myVar = 1 expect(true).toBe(true);

I get an error message:

 $ ./node_modules/karma/bin/karma start 22 11 2016 11:10:00.741:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/ 22 11 2016 11:10:00.745:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 22 11 2016 11:10:00.752:INFO [launcher]: Starting browser PhantomJS 22 11 2016 11:10:01.659:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#Gwh8ywcLStrKf-ljAAAA with id 78654911 PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR SyntaxError: Unexpected token 'const' at tests/unit/Example.spec.js:165

Instead , if I try to cause a syntax error

 const = 1 // syntax error expect(true).toBe(true);

then Babel complains (on the first line before Karma or Phantom JS boots up)

 22 11 2016 11:07:00.079:ERROR [preprocessor.babel]: /Users/crcarter/Software/CropPlanning/cps-php/resources/assets/js/tests/unit/Example.spec.js: Unexpected token (8:15) at /Users/crcarter/Software/CropPlanning/cps-php/resources/assets/js/tests/unit/Example.spec.js 22 11 2016 11:07:00.090:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/ 22 11 2016 11:07:00.091:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 22 11 2016 11:07:00.101:INFO [launcher]: Starting browser PhantomJS 22 11 2016 11:07:00.986:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#9Y6QLVxtJ57qRrgDAAAA with id 56249014 PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR You need to include some adapter that implements __karma__.start method!

This seems to imply that the Example.spec.js file Example.spec.js parsed / translated using Babel, but that the transferred version is not delivered to the browser properly, even if the Example.vue file seems delivered correctly.

What can I do to be able to work in the test const and () => {} ? .

Here are the relevant files:

 resources/assets/js/components/Example.vue resources/assets/js/tests/unit/Example.spec.js karma.conf.js package.json 
 // Example.vue <template> <div class="container"> </div> </template> <script> export default { mounted() { console.log('Component ready.') }, data() { return { input: '# Hello!' } } } </script> 
 // Example.spec.js import Example from '../../components/Example.vue'; describe('Example', function () { it('should set correct default data', function () { const myVar = 1 // trivial assertions expect(true).toBe(true); }); }); 
 // karma.conf.js var path = require('path') var basePath = './resources/assets/js/'; module.exports = function(config) { config.set({ frameworks: ['jasmine'], port: 9876, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['PhantomJS'], singleRun: true, basePath: basePath, webpack: { resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, 'node_modules')], }, resolveLoader: { fallback: [path.join(__dirname, 'node_modules')] }, module: { loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', include: basePath, } ] } }, webpackMiddleware: { noInfo: true, stats: 'errors-only' }, files: [ { pattern: 'tests/**/*.spec.js', watched: false }, ], exclude: [], preprocessors: { 'app.js': ['webpack', 'babel'], 'tests/**/*.spec.js': [ 'babel', 'webpack' ] }, }) }

And package.json

 { "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "bootstrap-sass": "^3.3.7", "gulp": "^3.9.1", "jquery": "^3.1.0", "laravel-elixir": "^6.0.0-11", "laravel-elixir-vue-2": "^0.2.0", "laravel-elixir-webpack-official": "^1.0.2", "lodash": "^4.16.2", "vue": "^2.0.1", "vue-resource": "^1.0.3" }, "dependencies": { "jasmine-core": "^2.5.2", "karma": "^1.3.0", "karma-babel-preprocessor": "^6.0.1", "karma-chrome-launcher": "^2.0.0", "karma-firefox-launcher": "^1.0.0", "karma-jasmine": "^1.0.2", "karma-phantomjs-launcher": "^1.0.2", "karma-webpack": "^1.8.0" } }
+6
source share
3 answers

Comments @craig_h and @PanJunjie put me on track, looking at the configuration for karma-babel-preprocessor , which led me to the configuration for karma-webpack . I'm still not sure what caused the original problem, but it looks like my Karma webpack configuration was incorrect or incomplete and failed. I added babel-loader and babel-preset-es2015 through

 yarn add babel-loader babel-preset-es2015

And then I redid and cleaned my karma.conf.js as such:

 module.exports = function(config) { config.set({ singleRun: false, // false => watch for changes and rerun tests autoWatch: true, // enable / disable watching files & then run tests frameworks: ['jasmine'], browsers: ['PhantomJS'], // Options: LOG_DISABLE, LOG_ERROR, LOG_WARN, LOG_INFO, LOG_DEBUG logLevel: config.LOG_INFO, basePath: './resources/assets/js/', files: [ { pattern: 'tests/**/*.spec.js', watched: false }, ], // how to process files before serving them to the browser for testing preprocessors: { 'app.js': ['webpack'], 'tests/**/*.spec.js': ['webpack'], }, webpack: { module: { loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'] } } ] }, // make sure to use the stand-alone version of Vue resolve: { alias: {vue: 'vue/dist/vue.js'} } }, webpackMiddleware: { noInfo: true, stats: 'errors-only' } }); };

Now my package.json looks like this:

 { "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "bootstrap-sass": "^3.3.7", "gulp": "^3.9.1", "jquery": "^3.1.0", "laravel-elixir": "^6.0.0-11", "laravel-elixir-vue-2": "^0.2.0", "laravel-elixir-webpack-official": "^1.0.2", "lodash": "^4.16.2", "vue": "^2.0.1", "vue-resource": "^1.0.3" }, "dependencies": { "babel-loader": "^6.2.8", "babel-preset-es2015": "^6.18.0", "jasmine-core": "^2.5.2", "karma": "^1.3.0", "karma-babel-preprocessor": "^6.0.1", "karma-chrome-launcher": "^2.0.0", "karma-firefox-launcher": "^1.0.0", "karma-jasmine": "^1.0.2", "karma-phantomjs-launcher": "^1.0.2", "karma-webpack": "^1.8.0" } }

With all of this, I can now take full advantage of ES2015, such as const and () => {} . Sorry to answer my own question, but I hope this helps someone else facing a similar problem.

+3
source

I had a similar problem (although not identical, your configuration is quite specific). I also used Vue, karma, webpack and phantomjs (as configured in the vue-Webpack template).

However, my problem is that I defined const in a helper file that was imported into my application. When I changed const to var in this file, tests could be run. (It doesn't matter if const was used in other files that were already in the src directory).

This problem was fixed when I moved this auxiliary file to my src folder or one of its subdirectories. I start too much to understand why this solved the problem, but I assume that babel was not configured to work in the root folder and was directed only to the src folder.

Hope this is helpful to others too.

+1
source

In addition to RyanQuey's comment: he's right. The default VU + Webpack CLI setting includes certain contexts that will be handled by the babel loader. Take a look at build / webpack.base.conf.js and then on the module rule for JS files. You can see that only src, test, and node_modules / webpack-dev-server / client paths are included (at the time of this writing).

+1
source

Source: https://habr.com/ru/post/1012567/

More articles:


All Articles