[Day16] Vue 3 单元测试 (Unit Testing) - Vue Test Utils + Jest 基本介绍 & 安装

什麽是单元测试？

单元测试 (Unit Testing) 是针对程序码的最小单位来进行正确性检验的测试工作，并确保程序码不会在迭代维护的过程中出现 Bug，通过涵盖率高且有意义的测试可以给开发者更多的信心去增加新功能或者是重构旧有的程序码。

通常，最小单位指的是一个函式 (function) 或者是类别 (class)，而在 Vue.js 中最小单位常指的是元件 (Component)

通常单元测试会由开发者自己攥写测试，因为只有开发者自己知道如何去切分这些最小单位 (元件) 以及测试内容，因此交由开发者攥写才会有较高的攥写效率，不过对於没有什麽经验的开发者而言，写测试的时间成本可能远大於实际开发的时间成本，这也导致了很多开发者因为开发时程的不足，而并未为自己的程序码攥写测试。

Vue Test Utils + Jest

我这次要介绍的测试工具是 Vue Test Utils + Jest， Vue Test Utils 是 Vue.js 官方所维护的单元测试套件，它提供了一系列的 API 使我们很容易去操作存取元件，而 Jest 是一个由 Facebook 开发的测试执行器 (test runner) ，它提供了断言、Mock、 Snapshot 测试以及涵盖率报告等功能。

官方也有推荐另一个选项 Vue Testing Library (@testing-library/vue) 。

安装设定

会使用 Vue Test Utils + Jest 最重要的原因是，因为 Vue CLI 能自动帮我们配置好单元测试所需要的环境，我们只需要在建立专案时选择要安装 Unit Testing 且选 Jest 作为测试执行器即可

又或者是现有的 CLI 专案，也可以直接执行

vue add unit-jest

安装完後，CLI 会在 package.json 新增测试的指令。

"scripts": {
	"test:unit": "vue-cli-service test:unit"
}

除了新增指令以外，也会产生一支 example.spec.js 的范例测试档以及添加更动一些档案设定

可以马上来执行 npm run test:unit 来确认环境没有问题！

Next

明天我先会介绍 Vue Test Utils + Jest 的基本范例与核心语法，然後在大家对於单元测试有近一步的认识後，接下来我会介绍几个开发元件时常见的使用情况，如：

• Conditional Rendering
• Checking Elements visibility
• Event Handling
• Form Handling
• Props & Computed

并一一攥写相对应的测试程序码，来让大家可以提高单元测试的涵盖率！

参考资料

• 一次搞懂单元测试、整合测试、端对端测试之间的差异
• 你不知道的 Vue 单元测试（6000字实战单元测试）
• Vue - Testing
• Vue Test Utils for Vue 3

今天的分享就到这边，如果大家对我分享的内容有兴趣欢迎点击追踪 & 订阅系列文章，如果对内容有任何疑问，或是文章内容有错误，都非常欢迎留言讨论或指教的！

明天要来分享的是 Vue3 单元测试 (Unit Testing) 主题的第二篇 Vue Test Utils + Jest 的基本范例与核心语法，那我们明天见！