How do I include testing in an existing project created with vue cli? How do I include testing in an existing project created with vue cli? vue.js vue.js

How do I include testing in an existing project created with vue cli?


This is old but came across it when looking to add testing to my vue project that was scaffold with vue-cli and fwiw if you are using Vue Cli 3 you can run vue add @vue/unit-jest to add testing to an existing project.


Short answer

No you can't do that

Long answer

You should check out the source code for the vue template on GitHub.

What vue-cli does is use inquirer to prompt you for what you want, then it set some variables to define what should be included. Then it uses a combination of the static site generator metalsmith and mustache syntax to inject the code you specified you wanted into the files, and then spitting everything out into your specified project directory. It also filters out files you opted out of and doesn't put it in the root directory.

When the generated files are put into your project directory, all the inline mustaches and conditions in the js files and other files have been replaced with the correct source code matching what you specified you wanted, if these conditions were kept the syntax would be invalid and nothing would run without failing. Since these conditions and mustaches have been removed after generating a project, vue-cli wouldn't know where to put these things, and you would potentially need to remove code that conflict aswell, so it's simply impossible without adding back the conditions and mustache, and then you might aswell copy things over manually.

I recommend that in the future you opt into everything you think you might need, especially things like unit tests, as you don't have to use them, but there isn't an issue if you have them there, linting is also nice to always include, just decide on standard or airbnb and use it for all projects. Adding linting after the fact might require you to refactor the entire code-base if you used say semi-colons and added standard linting after you have coded much of the app.

Also, if you do explore the template code, you could potentially see what vue-cli does, and see what you need to add to a existing project, if generating the project again and copying things over is to much work.