Debugging vue.js unit-tests

>I've set my node interpreter as babel, but I import vue template files in my test files, so I get an error for invalid javascript import.

sorry, but how is it related to debugging? You will get this error when running your tests as well;

Note also that I'd suggest using

node -r babel-register

 rather than using babel-node for debugging

>I know I need to use something like webpack vue-loader to process it to valid javascript, but I want to debug the test as is, without first building it.

Why? Debugging pre-built tests usually works better than debugging code transpiled on-the-fly... You just need to make sure that the sourcemaps are properly generated on building to be able to create breakpoints in original es6 files rather than in the generated ones

> Sorry, but how is it related to debugging? You will get this error when running your tests as well;

> Note also that I'd suggest using

node -r babel-register

I've mentioned it just so people would know that, and won't mention why I don't use one. I know the problem is originating from the import of the .vue files themselves.

Also why should I use babel-register, what are it's benefits?

And is transpiling first with sourcemaps are the only way? If I want to debug on the fly with .vue templates there's no way ?

>Also why should I use babel-register, what are it's benefits?

there is no way to pass --expose-debug-as=v8debug to babel-node (https://github.com/babel/babel/blob/master/packages/babel-cli/src/babel-node.js#L24) , so the debugger doesn't work when using it. So, if you like to transpile your code on-the-fly, you need using standard Node.js interpreter with 

-r babel-register

option instead

>And is transpiling first with sourcemaps are the only way? If I want to debug on the fly with .vue templates there's no way ?

what framework/test runner do you use? official docs (https://vuejs.org/guide/unit-testing.html) suggest using karma, but, being a framework for in-browser testing, it can hardly be used with babel-node, etc., as it transpiles ES6 modules into CommonJS ones that won't work with karma. So the suggested approach is using webpack/browserify

I use webpack with babel loader and karma that uses the webpack configuration to preprocess the test files before loading them.

that is the right way to run Vue + karma tests. Debugging works for me using similar configuration (I use a usual Karma run configuration  (https://confluence.jetbrains.com/display/WI/Running+JavaScript+tests+with+Karma) to debug). The only issue is that I need to refresh Chrome browser page to get breakpoints in spec files hit: when using sourcemaps, breakpoints in code that is executed on page loading don't work unless the page is hosted on built-in webserver, see https://youtrack.jetbrains.com/issue/WEB-19372.