CODEWITHSUNDEEP
webpackjasminevue.jskarma-jasmine
Divyanth Jayaraj
Divyanth Jayaraj

Reputation: 960

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

When I do vue init webpack my-project according to these instructions, I'm given a questionaire where I'm asked if I want to include linting and testing. If I say yes, the project is set up with testing in place.

However in one of my vue projects, I started it out without saying yes. But now, I want to include unit testing.

Traditional methods of installing Karma and Jasmine seems too cumbersome and I don't know which files I need to modify in order to wire up all the dependencies correctly.

Is there a CLI command that I can run, that asks me those questions again so that it wires up unit testing for me, automatically?

Upvotes: 8

Views: 2448

Answers (2)

Kevin W
Kevin W

Reputation: 158

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.

Upvotes: 11

Benjamin
Benjamin

Reputation: 132

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.

Upvotes: 0

Related Questions