Vue 组件的单元测试

这是一个判断一些文本是否被渲染的简单的示例：

上述代码片段展示了如何基于 的长度测试一个错误信息是否被渲染。它展示了 Vue 组件单元测试的一般思路：渲染这个组件，然后断言这些标签是否匹配组件的状态。

组件的单元测试有很多好处：

  • 提供描述组件行为的文档
  • 节省手动测试的时间
  • 减少研发新特性时产生的 bug
  • 促进重构自动化测试使得大团队中的开发者可以维护复杂的基础代码。

起步

Vue Test Utils 是 Vue 组件单元测试的官方库。 的 webpack 模板对 Karma 和 Jest 这两个测试运行器都支持，并且在 Vue Test Utils 的文档中有一些引导。

单元测试应该：

  • 可以快速运行
  • 易于理解

  • 只测试一个独立单元的工作我们在上一个示例的基础上继续构建，同时引入一个使得我们的测试更简洁更易读。这个组件应该：

  • 提示用户输入用户名
  • 如果输入的用户名少于七个字符则展示错误信息让我们先看一下组件代码：

我们应该测试的内容有：

  • message 是否被渲染
  • 如果 error 是 true，则 应该展示

上述代码有一些问题：

  • 单个测试断言了不同的事情

  • 很难阐述组件可以处于哪些不同的状态，以及它该被渲染成什么样子接下来的示例从这几个方面改善了测试：

  • 每个 it 块只做一个断言

  • 让测试描述更简短清晰
  • 只提供测试需要的最小化数据
  • 把重复的逻辑重构到了一个工厂函数中 (创建 和设置 username 变量)更新后的测试：

注意事项：

在一开始，工厂函数将 values 对象合并到了 data 并返回了一个新的 wrapper 实例。这样，我们就不需要在每个测试中重复 。另一个好处是当你想为更复杂的组件在每个测试中伪造或存根一个方法或计算属性时，你只需要声明一次即可。

  • 调用 API
  • 为 Vuex 的 store，commit 或 dispatch 一些 mutation 或 action
  • 测试用户交互我们在 Vue Test Utils 的教程中提供了更完整的示例展示这些测试。

Vue Test Utils 及庞大的 JavaScript 生态系统提供了大量的工具促进 100% 的测试覆盖率。单元测试只是整个测试金字塔中的一部分。其它类型的测试还包括 e2e (端到端) 测试、快照比对测试等。单元测试是最小巧也是最简单的测试——它们通过隔离单个组件的每一个部分，来在最小工作单元上进行断言。

快照比对测试会保存你的 Vue 组件的标记，然后比较每次新生成的测试运行结果。如果有些东西改变了，开发者就会得到通知，并决定这个改变是刻意为之 (组件更新时) 还是意外发生的 (组件行为不正确)。

端到端测试致力于确保组件的一系列交互是正确的。它们是更高级别的测试，例如可能会测试用户是否注册、登录以及更新他们的用户名。这种测试运行起来会比单元测试和快照比对测试慢一些。

单元测试中开发的时候是最有用的，即能帮助开发者思考如何设计一个组件或重构一个现有组件。通常每次代码发生变化的时候它们都会被运行。

高级别的测试，诸如端到端测试，运行起来会更慢很多。这些测试通常只在部署前运行，来确保系统的每个部分都能够正常的协同工作。

更多测试 Vue 组件的知识可翻阅核心团员 的书《测试 Vue.js 应用》。