如何在使用vue cli创建的现有项目中包含测试?

时间:2017-01-27 17:27:28

标签: webpack jasmine vue.js karma-jasmine

当我根据these instructions vue init webpack my-project时,我会收到一个问卷,在那里我被问到是否要包括掉毛和测试。如果我说是,那么该项目就会进行测试。

然而,在我的一个vue项目中,我没有说是,而是开始了它。 但是现在,我想要包括单元测试。

安装Karma和Jasmine的传统方法看起来太麻烦了,我不知道需要修改哪些文件才能正确连接所有依赖项。

我是否可以运行一个CLI命令,再次问我这些问题,以便自动连接我的单元测试?

2 个答案:

答案 0 :(得分:4)

这很旧,但是在向使用vue-cli和fwiw搭建的vue项目中添加测试时遇到了问题,如果您使用的是Vue Cli 3,则可以运行vue add @vue/unit-jest将测试添加到现有项目。

答案 1 :(得分:1)

简短回答

不,你不能那样做

答案很长

您应该在GitHub上查看vue模板的源代码。

vue-cli的作用是使用查询器来提示你想要什么,然后设置一些变量来定义应包含的内容。然后它使用静态站点生成器metalsmith和mustache语法的组合将您想要的代码注入到文件中,然后将所有内容吐出到指定的项目目录中。它还会筛选出您选择退出的文件,但不会将其放在根目录中。

当生成的文件放入项目目录时,js文件和其他文件中的所有内联必须和条件都已替换为与您指定的匹配的正确源代码,如果这些条件保持不变,则语法会无效,任何事情都不会失败。由于这些条件和胡须在生成项目后已被删除,因此vue-cli不知道在哪里放置这些东西,并且您可能需要删除冲突的代码,因此如果不添加它就不可能支持条件和小胡子,然后你也可以手动复制东西。

我建议您将来选择您认为可能需要的所有内容,尤其是单元测试,因为您不必使用它们,但如果您有这些内容则不会出现问题在那里,linting也很好,总是包括,只需决定标准或airbnb并将其用于所有项目。在事实之后添加linting可能需要你重构整个代码库,如果你在使用了大量的应用程序之后使用了分号并添加了标准linting。

此外,如果您确实浏览了模板代码,您可能会看到vue-cli的作用,并查看您需要添加到现有项目中的内容,如果再次生成项目并复制内容则需要做很多工作。