如何Vue-cli开始使用在Vue.js项目中启动TDD（测试驱动开发）

一般，使用测试驱动开发（TDD）最困难的部分是开始。你必须下载带有奇怪依赖项的软件包，让测试套件与你的构建系统协同工做，而后你必须弄清楚如何编写一个测试！难怪这么多的开发者在你提起它的时候就开始跑开了。

可是，你不是一个普通的开发者。你就能够开始就使用TDD与Vue，因此你能够确信你的代码是彻底如预期的。如今咱们一块儿在一个新的Vue项目开始测试工做，经过默认的测试，而后添加一些咱们本身想作的。

设置

启动TDD的最简单方法是使用Vue-cli工具。若是你尚未使用过它，Vue-cli工具提供了你从命令行开始进行一个新的Vue项目的方法。

当你使用Vue-cli脚手架启动项目，全部你须要作的就是按照提示而后测试会自动为你设置。这有多容易？让咱们走过这个过程，这样咱们就能够确切地看到如何去作。

第一步是安装Vue-cli的工具，若是你尚未。使用npm，你能够打开你的终端运行npm install -g vue-cli安装它。

在建立项目以前，咱们须要选择一个模板。Vue-cli给咱们几个不一样的模板选项如WebPack，browserify，PWA，simple。他们每一个都有本身独特的设置，我会让你选择最适合你的。请注意，“sample”版本不包括测试。在本教程中，我将使用WebPack模板。

如今，浏览到你想建立新的Vue项目所在的目录。在这里你能够运行vue init <template-name> <project-name>。Vue-cli工具将提示您提供一系列的关于项目的问题，像这样：

你看，我已经接受了大部分默认脚手架设置，但我关掉Vue-router由于咱们暂时不须要它。你选择什么取决于你的项目，但请确保启用单元测试！

当你启用单元测试时，你将被要求选择一个测试运行器。 我选择Karma和Mocha，由于那是我所熟悉的。可是，我据说过不少关于Jest的东西，我必定很快就想试试。

在那以后，Vue-cli会问你，若是你想与Nightwatch创建端到端的测试。这有点超出了“入门”教程的范围，因此咱们如今不说了。最后，选择是否运行run npm 或者yarn 安装后，它会为您生成项目。

哦，咱们有了一个新的测试，已经为咱们构建了Vue项目！若是你的cd到您的项目和运行新的运行测试，咱们能够看到，Vue-cli已经包括咱们的项目和他们经过的一些测试。

看看状况

如今咱们都准备好了，让咱们四处看看，看看咱们的项目是什么样子。咱们的文件结构应该以下所示：

咱们能够看到，Vue-cli作了大量的工做，咱们！虽然这里有不少内容，但对于本教程，咱们只关心测试和SRC目录。

在src中，咱们能够看到，咱们有两个Vue组件和main.js文件。而后，在测试中，咱们能够看到一些测试设置文件和咱们的规格目录。这是咱们写测试的地方。让咱们看看里面，看看helloworld.spec.js中有什么。

让咱们一块一块地把这个文件打开。在最开始，咱们引入Vue和HelloWorld的组件能够用在测试。接下来，咱们使用**describe()功能，封装测试断言。咱们的主张是在it()**函数中定义。这是咱们能够看到组件测试的地方。

若是你是新的测试，这多是一个困难的概念包装你的脑海中。我喜欢思考的是，咱们的应用程序的测试就像一个大标准化测试，咱们都在最初阶段。每一个**describe()函数是一个不一样的主题，而后每一个it()**功能测试包含一个问题。随着你对测试愈来愈熟悉，我相信你会想出本身编写测试的内容。

回到HelloWorld.spec.js，咱们知道咱们的“主体”是helloworld.vue和咱们的测试问题，应该给予它正确的内容。那么，咱们怎么作呢？

首先，咱们使用Vue.extend（HelloWorld）经过Vue函数在HelloWorld类的基础上构建一个之类。接下来，咱们实例化HelloWorld这样咱们能够与它进行交互。在测试中，这一般被称为“设置”或“构建”，本质上，咱们正在初始化环境以匹配测试过程当中要与之交互的适当状态。

最后，咱们准备看看咱们的断言。在这里，咱们期待着里面的文字，在你的vue.js程序中设置**.hello**

中的h1为“Welcome to Your Vue.js App.”。“这是真的吗？”好吧，若是你已经运行你的测试，你知道他们经过了。因此，让咱们看看**helloworld.vue，**看看它的代码设置。

在第3行，咱们看到里面的H1。你好，是从咱们的Vue数据传递一个信息。而后，在28行咱们看到，信息是咱们预期的字符串：“Welcome to Your Vue.js App.”看起来咱们的测试像是正确的！

写一个测试

既然咱们确信咱们的测试是正确的，那么咱们来添加一个咱们本身的测试。编写任何测试的第一步老是弄清楚咱们想要测试什么。这也是最难作的事情，也是最容易解释的部分。

那里有许多不一样的策略。我发现一个好的作法是花一点时间思考给定的组件应该作什么，而后编写测试来验证它。我一般不担忧“单元”测试每一个方法或属性。相反，我专一于测试我指望从组件中得到的行为。

让咱们把这种方法用在咱们的HelloWorld组件。咱们指望什么样的行为？咱们但愿它能提供一组静态信息，而咱们当前的测试涵盖了。若是动态MSG不呈现，那么咱们能够至关确定咱们的内容渲染会有问题。可是，让咱们编写一个测试来确保全部连接都显示在页面上，即便出现了一个未知问题。

首先，让咱们来考虑一下咱们的测试。咱们但愿确保全部连接都显示正确。所以，让咱们编写一个测试，以确保咱们呈现正确的连接数量。

回到HelloWorld.spec.js，咱们的第一**it()**右下方，咱们能够添加一个像这样：

it('should show all the links', () => {
})

如今，咱们须要像在第一次测试中那样，创建咱们的内容。因此，咱们能够添加相同的常量，咱们在第一个**it()**中。

it('should show all the links', () => {
 const Constructor = Vue.extend(HelloWorld)
 const vm = new Constructor().$mount()
})

咱们要确保全部的连接显示相应的页面。让咱们试着找出咱们组件呈现的全部连接的计数，看看是否符合咱们的指望。在helloworld.vue咱们有9个环节，因此咱们但愿咱们的组件来呈现9个环节。

it('should show all the links', () => {
 const Constructor = Vue.extend(HelloWorld)
 const vm = new Constructor().$mount()
 expect(vm.$el.querySelectorAll('a').length)
 .to.equal(9)
})

当咱们运行测试套件时，咱们能够看到咱们运行结果正在变绿！要检查是否正常，请尝试注释一个连接，以确保它像咱们预期的那样失败。

总结

咱们在此次演练中已经讨论了不少。咱们开始把咱们的项目和Vue-cli运行。而后，咱们查看了默认测试，看看它们是如何工做的。最后，咱们编写了本身的测试，以确保咱们的组件能按照咱们指望的方式工做。

虽然咱们涉及了不少，但这只是冰山一角。学习测试Vue我推荐你看看Vue课程 和TDD课程。其余一些很棒的资源是mocha入门指南也有免费的内容和vue.js测试文档。

固然，咱们都知道最好的学习方法就是继续练习。因此，对于你的下一个项目或者全新的组件，试着设置测试并给它一个点赞。我敢打赌你会对你所能取得的成就印象深入。若是你被卡住了，能够在评论中问我任何问题。直到下一次，快乐的编码！

汇智网（www.hubwiz.com）小智翻译，原文有修改。