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

落叶无声9

墨衍会员 · AI 创作全网分发码龄12年

关注

翻译最新推荐文章于 2026-09-15 09:37:33 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

【Vue】单元测试（Jest/Vue Test Utils） {{ product.price }}元加入购物车阅读详情

通常，使用测试驱动开发（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 。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)
})

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